CSS 学习笔记 (1) 基础语法
简介
CSS：层叠样式表（Cascading Style Sheets）用于控制网页的外观。
CSS 语法：先指定选择器，再给出键值对。
[选择器] {
[属性]: [值];
}
MDN 文档
链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS 。
BootStrap 文档
BootStrap 集成了常用的 CSS 组件，可以通过外部样式表引入：
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>
截至本文完成， bootstrap 最新版本为 5.3.8 ，读者可以留意一下当前的最新版本是什么。
读者可以通过 https://bootstrap.sbox.cn/docs/5.3/getting-started/introduction/ 查询你需要的组件。
分类
内联样式表
样式写在标签内部。
<p style="color: red; font-size: 14px;">段落</p>
内部样式表
样式写在 <head> 标签中。
<head>
<style>
p {
color: red;
font-size: 14px;
}
</style>
</head>
外部样式表
样式写在外部 css 文件中。
<head>
<link rel="stylesheet" href="1.css">
</head>
/* 1.css */
p {
color: red;
font-size: 14px;
}
基础选择器
元素选择器
别名类型选择器、标签选择器，可以选择同种类的所有标签。
p {
color: red;
font-size: 14px;
}
这里的 p 即为元素选择器，可以选中页面中所有的 <p> 标签，并将其赋予颜色为红色、字体大小为 14px 的属性。
类选择器
通过 class 属性定义类，再通过 . 加上类名即可选中。
<style>
.a {
color: red;
}
.b {
font-size: 16px;
}
</style>
<p class="a">段落</p>
<h1 class="a b">一级标题</h1>
温馨提示：
- 类名可以自定义，但不能是中文或纯数字。
- 命名尽量见名知义。
- 多个英文单词可以用
-连接。 - 多类名中间用空格隔开。
id 选择器
类选择器可以实现一对多， id 选择器可以实现一对一。
<style>
#a {
color: red;
}
</style>
<p class="a">段落</p>
通配符选择器
通配符选择器可以选择页面中的所有标签。
* {
margin: 0px;
padding: 0px;
}
关系选择器
后代选择器
语法规则 A B 可以选择 A 标签后代的所有 B 标签，注意可以是间接（嵌套）后代。
ul li {
color: red;
}
子代选择器
语法规则 A>B 表示选择 A 标签直接后代的所有 B 标签。
相邻兄弟选择器
语法规则 A+B 表示选择紧跟在 A 标签后面的 B 标签。
<style>
h3+p{
color: red;
}
</style>
<body>
<p>1</p>
<h3>2</h3>
<p>3</p>
<p>4</p>
</body>
其中只有 3 会变红。
通用兄弟选择器
语法规则 A~B 表示选择在 A 标签后面的所有兄弟元素 B 标签。
<style>
h3~p{
color: red;
}
</style>
<body>
<p>1</p>
<h3>2</h3>
<p>3</p>
<div><p>4</p></div>
<p>5</p>
</body>
其中 3 和 5 都会变红。
字体样式
颜色
p {
color: red;
color: #FF0000;
color: rgb(255,0,0);
color: rgba(255,0,0,1);
}
16 进制表示法对应三原色，前 2 位红，中间 2 位绿，最后 2 位蓝。
rgba 中最后一维是 \([0,1]\) 中的实数，表示透明度。 0 表示完全透明， 1 表示完全不透明。
字体
p {
font-family: Consolas,"Microsoft YaHei",monospace;
}
可以同时定义多个不同字体，用逗号分隔。
浏览器会优先尝试第一种字体，如果不可用再尝试第二种，依此类推。
大小
p {
font-size: 16px;
}
斜体
p {
font-style: italic; /* 倾斜 */
font-style: normal; /* 正常 */
}
粗体
p {
font-weight: normal;
font-weight: 100;
}
关键字对应效果如下：
| 名称 | 效果 |
|---|---|
| lighter | 变细 |
| normal | 默认 |
| bold | 加粗 |
| bolder | 加粗 |
也可用 \([100,900]\) 中的一个数（注意没有 px）表示粗细，数字越大效果越粗，经过实测：
- \(100\sim 345\) ：变细。
- \(346\sim 549\) ：默认。
- \(550\sim 900\) ：加粗。
装饰
a {
text-decoration: none;
}
| 属性 | 描述 |
|---|---|
| none | 无装饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
字体样式简写
字体样式可以一行完成，语法如下：
body {
font: font-style font-weight font-size/line-height font-family;
}
其中 font-size 和 font-family 必须写，其余可以省略，注意不能调换顺序。
文本布局
水平对齐
p {
text-align: center;
}
text-align 属性可以控制块级元素内的文本如何水平对齐，其值如下：
| 值 | 描述 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
两端对齐使用场景：段落中每行文字占用空间不尽相同（英语单词更明显），如果采用左对齐那么右边很不美观，采用两端对齐可以保证占用空间是矩形，相应文字间隔会拉大。
首行缩进
p {
text-indent: 20px;
text-indent: 2em;
}
text-indent 属性对块级元素生效，其属性值有两种单位：
| 单位 | 描述 |
|---|---|
| px | 绝对单位，固定缩进若干像素 |
| em | 相对单位， 1em 等于当前元素字体大小，若未设置则继承父元素字体大小，依此类推。 |
字间距
p {
letter-spacing: 5px;
}
行高
p {
line-height: 20px;
line-height: 1.5; /* 字体大小的 1.5 倍 */
}
line-height 属性额外用途：行高等于盒子高度时可以让单行文本垂直居中。
原理：行高 = 上边空白 + 文字大小 + 下边空白 ，并且两边空白高度相同。当行高等于盒子高度时，对单行文本而言，文字到盒子两边距离刚好为两边空白，自然也就实现垂直居中效果。
<style>
.box {
height: 50px;
}
p {
text-align: center; /* 水平对齐 */
line-height: 50px; /* 垂直对齐 */
}
</style>
<div class="box"><p>段落</p></div>
合并选择器
又称分组选择器，可以给多个选择器设置相同样式，节约代码量。
语法规则是用 , 分隔不同的选择器。
.box1, .box2 {
width: 100px;
height: 100px;
}
伪类选择器
伪类选择器选择的是元素的特定状态或结构位置。
链接伪类
| 链接伪类 | 描述 |
|---|---|
| a:link | 未访问的链接 |
| a:visited | 已访问的链接 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标点击到松开 |
a:hover {
color: orange;
}
注意链接伪类必须按照上述表格的顺序设计样式（可以省略但不能颠倒），比如将 a:visited 放到 a:link 前面， a:visited 样式无效。
行为伪类
| 行为伪类 | 描述 |
|---|---|
| .box:hover | 鼠标悬停 |
| .box:focus | 获得焦点（鼠标点击该容器开始，到点击其他容器结束） |
.box:hover {
color:red;
}
结构伪类
| 结构伪类 | 描述 |
|---|---|
| first-child | 一组兄弟元素中的第一个元素 |
| last-child | 一组兄弟元素中的最后一个元素 |
| nth-child(n) | 一组兄弟元素中的第 \(n\) 个元素 |
这里 \(n\) 的取值可以是以下几种：
- 正整数：不解释。
- 关键字：
odd和even两种，分别表示奇数和偶数。 - 含 \(n\) 的表达式（注意 \(n\) 从 \(0\) 开始计算）：
nth_child(3n)：选择 \(3\) 的倍数。nth_child(n+2)：选择第 \(2\) 个及以后的元素。nth_child(-n+3)：选择前 \(3\) 个元素。
ul li:nthchild(odd) {
background-color: white;
}
ul li:nthchild(even) {
background-color: grey;
}
表单伪类
| 表单伪类 | 描述 |
|---|---|
| disabled | 按钮被禁用 |
| checked | 表单控件被选中 |
button:disabled {
opacity: 0.4;
}
伪元素选择器
伪类选择器选择的是元素的特定部分。
| 伪元素 | 描述 |
|---|---|
| ::first-line | 选择首行 |
| ::first-letter | 选择首字母 |
| ::placeholder | 选择 input 或 textarea 中的占位符 |
| ::before | 在选定元素最前面添加一个元素 |
| ::after | 在选定元素最后面添加一个元素 |
::before 和 ::after 本质就是生成一个新容器，注意默认是行内元素。同时必须设置 content 属性，其值为容器中的文本内容，
<style>
a::after {
content: " ↗";
}
</style>
<a href="#">了解更多</a>
<style>
a::after {
content: ""; /* 没有文本内容时值为空 */
display: inline-block;
width: 16px;
height: 16px;
background-image: url('external-icon.svg'); /* 假装你能看到这张图片 */
}
</style>
<a href="#">了解更多</a>
上面两种方法的链接都会显示为 "了解更多 ↗" 。
属性选择器
| 属性选择器 | 描述 |
|---|---|
| [属性] | 选择包含指定属性的所有元素 |
| [属性=值] | 选择属性等于值的所有元素 |
| [属性^=值] | 选择属性以指定字符串开头的所有元素 |
| [属性$=值] | 选择属性以指定字符串结尾的所有元素 |
| [属性*=值] | 选择属性包含指定字符串的所有元素 |
/* 选择包含 class 属性的所有元素 */
[class] {
color: red;
}
/* 选择所有表单中的单复选框 */
[type="checkbox"],[type="radio"] {
color: red;
}
CSS 优先级
高权重选择器的样式会覆盖低权重选择器，相同权重保留最后一个。
| 选择器类型 | 权值 |
|---|---|
| !important | \(\infty\) |
| 内联样式表 | 1000 |
| ID 选择器 | 100 |
| 类/属性/伪类选择器 | 10 |
| 元素/伪元素选择器 | 1 |
| 通配符选择器/继承的样式 | 0 |
权重可以叠加，但是不能进位。
\(\text{Q}\) ：关系选择器 #nav .item a 的权重是多少？
\(\text{A}\) ：#nav 权重为 \(100\) ， .item 权重为 \(10\) ， a 权重为 \(1\) ，累加为 \(111\) 。
权重不能进位的意思是，即使嵌套 \(10\) 层类选择器，权值仅为 \((0,10,0)_k\) （这里 \(k\) 可以认为是无穷大），也不能超过 ID 选择器。
本文来自博客园，作者：peiwenjun，转载请注明原文链接：https://www.cnblogs.com/peiwenjun/p/19535802
浙公网安备 33010602011771号