CSS基础
1. CSS入门
1.1. CSS是什么
CSS是Cascading Style Sheets的缩写，翻译为层叠样式表。CSS是一种样式表语言，用来描述HTML文档的表现方式，如字体、色彩、背景色等等。我们先从一段简单的CSS代码开始。
代码1 CSS示例
p {color: red;
}
这段代码的效果是将HTML文档中全部 <p> 元素里的文本设置成红色。
大括号里面的是CSS规则，格式为
属性: 属性值;
每条规则占一行，以半角分号结尾。属性和值之间以半角冒号分割，属性和值的前后可以添加空格。 color 表示文字色彩属性， red 表示将这个属性设置为红色。单独的一条规则叫做声明。大括号前面的 p 表示将这条规则应用到所有 <p> 元素，叫做选择器。
由选择器、大括号、声明共同构成的整个结构叫做规则集，简称规则。CSS就是由许多个类似的规则集构成的。学习CSS就是要弄清楚下列3个问题：
- 属性：HTML标签有哪些样式属性？
- 属性值：这些属性可以设置为什么值，对应的样式是什么？
- 选择器：如何将规则应用到HTML标签上？
1.2. CSS和HTML
前面我们说过，CSS是描述HTML文档样式的语言。如何将CSS和HTML结合起来呢？方法是在HTML中添加 <link> 标签。
代码2 在HTML中引入CSS
<html><head><link href="style.css" rel="stylesheet" /></head><body><!-- 其他内容 --></body> </html>
<link> 标签将CSS和HTML结合起来。浏览器在展示HTML时，根据CSS规则集描述的样式，决定渲染的效果。
2. 属性值和单位
CSS规则由属性和属性值构成。很多属性值带有单位。本章介绍属性值和单位，作为后续属性部分的基础。
每个CSS属性都可以有一个或多个值。下面是一个示例：
p {font-size: 1.2em;height: 100px;letter-spacing: 0;width: 80%;background-color: #00ff00;color: red;
}
在例子中， font-size 是字体尺寸， height 和 width 是元素高度和宽度， background-color 是元素背景色彩， color 是文字色彩， letter-spacing 是字间距。这里主要介绍属性值和单位，后面会详细介绍这些属性。
从例子中可以看到，属性值可以是带单位的值（ 1.2em 、 100px ）、不带单位的数值（ 0 ）、百分比（ 80% ）、十六进制色彩值（ #00ff00 ）、预定义名字（ red ）等。我们逐一介绍这些属性值和单位。
em 是上级元素中文字的尺寸。 1.2em 表示在元素中的文字大小是上级元素的1.2倍。因为用于描述大小， em 叫做距离单位。因为是相对于上级元素的， em 属于相对距离单位。下表列出了常用的相对距离单位。附录包含一份更完整的表格。
| em | 上级元素字符高度 |
| rem | 根元素字符高度 |
| ex | 小写字母高度 |
| cap | 大写字母高度 |
| ch | 字符“0”的宽度 |
| ic | 字符“水”的宽度 |
px 表示CSS像素（也叫参考像素）。像素是屏幕能显示的最小单位。不同屏幕中像素的大小不一样，为了统一规范，CSS使用“CSS像素”的概念，在上下文没有歧义时简称像素。CSS像素定义为 196 英寸。1英寸是2.54厘米，因此1像素是0.26毫米。请注意，不同设备上，1个CSS像素实际占据的空间可能不同，未必一定是0.26毫米。这里只是一个简单的介绍。要了解更多内容，请查阅本节末尾的参考资料部分。
px 是绝对距离单位。下面列出了常用的绝对距离单位。附录包含更完整的表格。
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 1in = 2.54cm = 96px |
| pt | 点 1pt = 172 in |
| px | 像素 1px = 196 in |
如果某个距离的值是0，比如 0px 或 0cm ，此时单位已经不重要了，可以省略，简写为0，如 letter-spacing: 0; 。
80% 属于百分比数据类型。很多关于尺寸的属性可以使用百分比。比如例子中的 width: 80%; 表示元素宽度占上级元素宽度的80%。
#00ff00 和 red 是色彩值，色彩也是CSS数据类型。色彩值可以是色彩名（ red ）、十六进制色彩记号（ #00ff00 ）、 rgb 函数（ rgb(31 120 50) ）等。
十六进制色彩记号有4种语法：
代码3 十六进制色彩记号语法
#RGB /* 三值语法，#RRGGBB的缩写 */ #RGBA /* 四值语法，#RRGGBBAA的缩写 */ #RRGGBB /* 六值语法 */ #RRGGBBAA /* 八值语法 */
R、G、B、A分别是红色、绿色、蓝色和透明度分量，值从00到ff。对于透明度分量，00表示完全透明，ff表示完全不透明。为了方便引用色彩值，CSS定义了色彩名，下面是部分常用色彩名。附录包含更完整的列表。
代码4 常见色彩名
aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff gray #808080 green #008000 lime #00ff00 maroon #800000 navy #000080 olive #808000 purple #800080 red #ff0000 silver #c0c0c0 teal #008080 white #ffffff yellow #ffff00
3. 基础样式
现在我们来学习CSS中的基础样式。所有HTML元素几乎都支持这些样式。
3.1. 文字
字体和文本样式分为两类，一类描述字符样式，如大小、色彩、笔画粗细等。另一类描述字符布局，如对齐方式、字间距、行间距等。
3.1.1. 字符样式
控制字符样式最主要属性的是 font-family ，决定了元素中的文字的字体族。
span {font-family: "Times New Roman", "新宋体", serif;
}
如上例所述， font-family 支持设置多个字体族，以半角逗号分隔。CSS中使用的标点都是半角符号。允许设置多个字体族是出于兼容性的考虑，为没有安装对应字体族电脑提供一些备选项。浏览器按照顺序依次选择可用字体族。如果一个都不可用，使用系统默认字体。如果字体族名字包含空格，必须使用双引号包围起来，如 "Times New Roman" 。除了字体族名字，CSS还定义了几个通用字体族，也可以作为 font-family 属性值。
| 通用字体族 | 说明 |
|---|---|
| serif | 衬线字体，笔画存在装饰，粗细不同 |
| sans serif | 无衬线字体，笔画没有装饰，粗细均匀 |
| cursive | 手写体 |
| fantasy | 艺术体 |
| monospace | 等宽字体 |
| fangsong | 仿宋体 |
| kai | 楷体 |
另一个影响字体样式的重要属性是 font-size 字号，它决定了字符尺寸。 font-size 值可以是带有距离单位、百分比、或者尺寸名字。
font-size: 32px; font-size: 1em; font-size: 80%; font-size: small;
这里面的 small 是绝对尺寸，是一个比 medium （大部分浏览器 font-size 的默认值）小的值。至于具体是多少，或者比 medium 小多少，CSS没有定义，由浏览器自行决定。类似的值还有：
| 绝对尺寸 | 在大部分浏览器中的值 |
|---|---|
| xx-small | 9-10px |
| x-small | 10-12px |
| small | 13-14px |
| medium | 16px |
| large | 18px |
| x-large | 24px |
| xx-large | 32px |
| xxx-large | 48px |
下面我们介绍另外三个影响字符样式的属性： font-weight 、 font-stretch 和 font-style ，它们控制笔画粗细、字符宽度和倾斜风格。要理解它们，首先要明白字体和字体族的区别，弄清楚字形、字体、字体族3个概念。
| 字形 | 字符的表现形式。 |
| 字体 | 有相同外观和排版尺寸的字形的集合。 |
| 字体族 | 有相同风格的，笔画粗细、字宽或倾斜风格s不同的字体的集合。 |
字体族中的字体看起来差不多，区别就在于笔画粗细（ font-weight ）、字符宽度（ font-stretch ）和倾斜风格（ font-style ）不同。
font-weight 叫做字重，取值从1到1000，越大笔画越粗。字重的默认值是 bold ，定义为400。另一个常用值是 bold ，定义为700。
font-stretch 叫做字宽，用于在水平方向上拉伸或压缩字符，值是百分比。小于100%表示压缩，大于100%是拉伸，默认值是100%。
| 名字 | 值 |
|---|---|
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| normal | 100% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
font-style 表示字符的倾斜风格，取值可以是 normal （不倾斜）或 italic （倾斜）。
还有几个和字体样式有关的属性： color 是字体色彩。 text-decoration 是文字上下的修饰符，例如 text-decoration: underline dotted red; 在文字下方绘制一个红色虚线下划线。 text-shadow 是文字阴影, text-shadow: #fc0 2px 4px 8px; 表示绘制颜色 #fc0 的文字阴影，阴影相对文字在x轴偏移2像素，y轴偏移4像素，阴影渐变半径8px。
| 属性 | 说明 | 示例 |
|---|---|---|
| font-family | 字体族 | "Times New Roman" |
| font-size | 字体大小 | 1.2rem |
| font-weight | 字重，笔画粗细 | bold |
| font-stretch | 字宽 | 100% |
| font-style | 倾斜风格 | italic |
| color | 字体色彩 | red |
| text-decoration | 文字装饰 | underline dotted red |
| text-shadow | 文字阴影 | #fc0 2px 4px 8px |
3.1.2. 字符布局
除了字符自身的样式属性外，还有一些属性决定了字符的排列方式。 text-align 是文字排列方向，可以是 left 左对齐、 right 右对齐、 center 剧中、 justify 两端对齐。 line-height 是一行文字占用的高度，包括字符和字符上下的空白空间。 letter-spacing 是字间距， word-spacing 是词间距。
| 属性 | 说明 | 示例 |
|---|---|---|
| text-align | 文本对齐方式 | left |
| line-height | 行高 | 4px |
| letter-spacing | 字间距 | 1px |
| word-spacing | 词间距 | 6px |
3.2. 背景
background-color 决定了元素背景色彩，值可以是色彩名、十六进制色彩值、色彩函数等。
background-color: red; background-color: #bbff00; background-color: rgb(255 255 128); background-color: rgb(117 190 218 / 50%); background-color: transparent;
这里的 rgb(117 190 218 / 50%) 等效于 #75beda80 ，斜杠 / 后面的百分比是透明通量， 0% 是完全透明，100% 是完全不透明。透明通量也可以使用数值表示，0表示完全透明，1.0表示完全不透明。如果希望将背景设置为透明，可以使用 background-color: transparent; 。
CSS不仅支持设置背景色的透明通量，也支持设置元素的透明通量。
opacity: 1; /* 完全不透明 */ opacity: 0.6; /* 半透明 */ opacity: 0; /* 完全透明 */
如果希望使用图片作为背景，可以使用 background-image 属性。
background-image: url("background.png");
背景图片的位置和大小由 background-position 和 background-size 控制。
background-position: top; /* 顶部水平居中 */ background-position: bottom; /* 底部水平居中 */ background-position: left; /* 左对齐垂直居中 */ background-position: right; /* 右对齐垂直居中 */ background-position: center; /* 水平和垂直居中 */background-position: top right; /* 顶部右对齐 */ background-position: 25% 75%; /* 距离左边25%，顶边75%处 */ background-position: 1cm 2cm; /* 距离左边1cm，顶边2cm处 */background-size: cover; /* 缩放图片覆盖元素，可能裁剪图片。 */ background-size: contain; /* 缩放图片到能够让元素完整包含的最大尺寸，以空白填充剩余空间。 */background-size: 50%; /* 设置图片宽度。 */ background-size: 12px; /* 设置图片宽度。 */background-size: 3em 25%; /* 设置图片宽度和高度。 */ background-size: auto 6px; /* 设置图片宽度和高度。 */
如果图片尺寸较小，希望用图片铺满元素，可以使用 background-repeat 属性。
background-repeat: repeat space;
background-repeat 属性有两个值，分别表示在水平、垂直方向上如何重复排列图片。可取的值有
| 值 | 说明 |
|---|---|
| repeat | 重复排列图片，铺满整个元素。最后一个图片可能被裁剪。 |
| space | 重复排列图片，首个最左，末尾右边，均匀排列，间以空白。 |
| round | 类似space，适当放大图片，覆盖间隔。 |
| no-repeat | 不重复排列图片。 |
为了简化编码，CSS提供了单值简写。
| 单值 | 等价于双值 |
|---|---|
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
| repeat | repeat repeat |
| space | space space |
| round | round round |
| no-repeat | no-repeat no-repeat |
3.3. 边框
边框样式由3个主要属性控制： border-width 是边框宽度， border-style 是边框样式，比如虚线、短横线、实线等， border-color 是边框色彩。
代码5 边框属性
border-width: 4px; border-width: 2px 1.5em; /* 顶底 | 左右 */ border-width: 1px 2em 1.5cm; /* 顶 | 左右 | 底 */ border-width: 1px 2em 0 4rem; /* 顶 | 右 | 底 | 左 */border-color: red; border-color: red #f015ca; /* 顶底 | 左右 */ border-color: red yellow green; /* 顶 | 左右 | 底 */ border-color: red yellow green blue; /* 顶 | 右 | 底 | 左 */border-style: none; /* 不显示 */ border-style: dotted; /* 圆点 */ border-style: dashed; /* 短虚线 */ border-style: solid; /* 实线 */ border-style: double; /* 双实线 */ border-style: groove; /* 浮雕 */ border-style: ridge; /* 浮雕 */border-style: dotted solid; /* 顶底 | 左右 */ border-style: hidden double dashed; /* 顶 | 左右 | 底 */ border-style: none solid dotted dashed; /* 顶 | 右 | 底 | 左 */
此外还有两个重要的属性， border-radius 是边框圆角半径， border-image 是边框图片。
border-radius: 30px;
border-radius: 25% 10%; /* 顶底 | 左右 */
border-radius: 10% 30% 50% 70%; /* 顶 | 右 | 底 | 左 */
border-image: url("/images/border.png");
轮廓是在边框外侧，紧贴边框绘制的线条，和边框有些类似。我们常见的输入框，周围的细线就是边框。轮廓的样式和边框几乎一样。
代码6 轮廓属性
outline-width outline-color outlint-style
4. 选择器
对属性和属性值有了一定了解之后，我们开始介绍选择器。选择器决定了属性值应用到哪个元素上。首先介绍最基础的选择器，然后介绍如何将选择器组合起来，实现更丰富的效果。最后介绍按照元素状态或位置进行的选择的伪选择器。
4.1. 基本选择器
我们重温第一个例子：
p {color: red;
}
这段规则会应用到全部 <p> 元素上。因为按照元素进行选择，这个选择器叫做元素选择器。此外还有按照元素的class属性值进行选择的类选择器，按照id属性值选择的标识选择器，以及更通用的，按照一般属性值进行选择的属性选择器。最后一个是选择全部元素的通用选择器。
代码7 基本选择器语法
元素 { 样式声明 } /* 元素选择器，按元素选择。 */.类名 { 样式声明 } /* 类选择器，按class属性选择。 */
元素.类名 { 样式声明 } /* 类选择器可以指定适用元素。 */#标识 { 样式声明 } /* 标识选择器，按id属性选择。 */[属性] { 样式声明 } /* 属性选择器 */
[属性=值] { 样式声明 }
[属性~=值] { 样式声明 }
[属性|=值] { 样式声明 }
[属性^=值] { 样式声明 }
[属性$=值] { 样式声明 }
[属性*=值] { 样式声明 }
元素[属性=值] { 样式声明 } /* 属性选择器可以指定适用元素。 */
[属性1=值1][属性2=值2] { 样式声明 } /* 属性选择器并集。 */*{ 样式声明 } /* 通用选择器，选择全部元素。 */
这里规则相对复杂的是属性选择器，我们逐一介绍。
[attr]{ 样式声明 }选择拥有属性attr的元素。[attr=value] { 样式声明 }选择拥有属性attr，并且值是value的元素。[attr~=value] { 样式声明 }如果元素的attr属性值是以空格分隔的列表，且列表包含value，选择元素。[attr|=value] { 样式声明 }如果元素的attr属性值以value或value-为前缀，选择元素。[attr^=value] { 样式声明 }如果元素的attr属性值以value为前缀，选择元素。[attr$=value] { 样式声明 }如果元素的attr属性值以value为后缀，选择元素。[attr*=value] { 样式声明 }如果元素的attr属性值以value为子串，选择元素。
4.2. 组合起来
选择器列表和组合器是将多个选择器结合起来，实现更强大功能的方法。选择器列表允许多个选择器使用相同的样式规则。组合器将多个选择器结合，构造更精细的选择方式。
4.2.1. 选择器列表
如果多个选择器需要使用同一组样式，可以使用选择器列表。列表选择器是用逗号分隔的选择器列表，逗号前后可以有空格、换行符或者其他空白符。
代码8 选择器列表
h1, h2, h3,
h4, h5, h6 {font-family: helvetica;
}
这个例子表示 <h1> - <h6> 标题元素都使用 helvetica 字体族。效果和分别使用6个元素选择器是一样的。
使用选择器列表可以简化编码，但有一点需要注意：如果列表中的某个选择器无效，整个规则都会被忽略。例如
代码9 无效的选择器列表
h1,
h2:invalid-pseudo,
h3 {font-family: sans-serif;
}
由于 h2:invalid-pseudo 无效， h1 和 h3 也不会采用样式块。
4.2.2. 组合器
组合器将多个选择器结合，构造更精细的选择方式。
代码10 组合器
选择器1 选择器2 { 样式声明 } /* 下级组合器 */
选择器1 > 选择器2 { 样式声明 } /* 直接下级组合器 */
选择器1 ~ 选择器2 { 样式声明 } /* 后续同级组合器 */
选择器1 + 选择器2 { 样式声明 } /* 邻接后续同级组合器 */
| 下级组合器 | 选择器1 选择器2 { 样式声明 } |
| 选择器1匹配的元素中，若其下级元素匹配选择器2，选择下级元素。 | |
| 直接下级组合器 | 选择器1 > 选择器2 { 样式声明 } |
| 选择器1匹配的元素中，若其直接下级元素匹配选择器2，选择下级元素。 | |
| 后续同级组合器 | 选择器1 ~ 选择器2 { 样式声明 } |
| 选择器1匹配的元素中，若后续同级元素匹配选择器2，选择同级元素。 | |
| 邻接后续同级组合器 | 选择器1 + 选择器2 { 样式声明 } |
| 选择器1匹配的元素中，若紧邻的后续同级元素匹配选择器2，选择同级元素。 |
4.3. 伪类和伪元素
伪类和伪元素是选择器的扩展，放置在选择器后面，提供了更精细的选择机制。伪类以冒号开头，如 button:hover 。伪元素以双冒号开头，如 p::first-letter 。
| 伪类 | 说明 |
|---|---|
| :hover | 鼠标悬停时 |
| :active | 元素被点击瞬间 |
| :focus | 元素获得焦点时 |
| :visited | 已访问链接 |
| :checked | 选中的表单元素 |
| :disabled | 禁用状态 |
| :nth-child(n) | 元素的第n个下级元素 |
| :not(选择器列表) | 排除指定选择器 |
| :is(选择器列表) | 匹配任意一个选择器 |
| :has(选择器列表) |
| 伪元素 | 说明 |
|---|---|
| ::before | 元素内容前 |
| ::after | 元素内容后 |
| ::first-letter | 元素内容的首字母 |
| ::first-line | 元素内容的首行 |
| ::selection | 用户选中的文本 |
| ::placeholder | 输入框占位符 |
伪类和伪元素作为选择器的扩展，必须跟在选择器后面，不能独立使用。可以同时使用多个伪类，依次排列。伪类和伪元素也可以同时使用，伪类在前，伪元素在后。
代码11 伪类在前，伪元素在后。
span:hover:active { ... }
div[data-tooltip]:hover::after { ... }
5. 优先级和层叠
学习了选择器之后，我们会遇到一个问题：如果两个选择器命中了同一个元素，要选哪个呢？选优先级高的。优先级相同时，选层叠顺序靠后的。
每个选择器都有优先级，简单来说，越具体的选择器优先级越高。标识选择器比类选择器具体，因此优先级高于类选择器。类选择器可以看做是属性选择器的特例，二者优先级相同，又都高于元素选择器。
| 优先级 | 选择器 |
|---|---|
| 高 | 标识选择器 |
| 类选择器 属性选择器 | |
| 低 | 元素选择器 |
如果两个选择器优先级相同，将会按照层叠顺序，即样式块的编写顺序，选择靠后的一个。
代码12 优先级相同时，选层叠顺序靠后者
p {color: red;
}/* 层叠顺序靠后者生效 */
p {color: blue;
}
6. 盒模型
CSS把元素放到一个“盒子”里面，通过排列盒子实现布局。每个盒子分为4层，由内而外依次是内容、内边距、边框、外边距。内容的宽度和高度由 width 和 height 确定。内边距是内容到边框之间的距离，由 padding 确定。边框是在内容周围的修饰性线条，线条宽度由 border-width 确定。外边距是边框到其他元素（边框）的距离，由 margin 确定。元素实际占据的空间包括内容、内边距和边框，不包括外边距。外边距是控制元素（边框）之间距离的。
图1 盒模型
内容的宽度和高度可以通过 width 和 height 设置。值可以是带距离单位的值、百分比（相对于上级元素）或 auto 。 auto 是默认值，表示让浏览器自行元素宽度。使用 min-width 和 max-width 可以设置元素的最小和最大宽度，这两个属性的优先级高于 width 。类似的，高度属性有 height 、 min-height 和 max-height 。
从内容到边框（内层）的距离叫内边距，使用 padding 设置，也可以在每个方向上单独设置内边距。内边距可以设置为负数。
代码13 内边距
padding: 12px; /* 内边距 */ padding: 8px 16px; /* 顶底 | 左右 */ padding: 8px 16px 12px; /* 顶 | 左右 | 底 */ padding: 8px 16px 12px -24px; /* 顶 | 右 | 底 | 左 */ padding-top: 12px; /* 顶部内边距 */ padding-right: 12px; /* 右侧内边距 */ padding-bottom: 12px; /* 底部内边距 */ padding-left: 12px; /* 左侧内边距 */
边框是在内容周围的修饰性线条，线条有粗细，边框也会占用空间。同样的，可以为四个方向的边框单独设置样式。
代码14 边框样式
border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color
轮廓是在边框外侧紧贴边框的线条。轮廓不占用空间，意思是不会因为绘制轮廓而将其他元素“推开”，因此盒模型不包含轮廓。轮廓在边框外侧，这里通常是属于外边距的空间。如果外边距是0而轮廓宽度大于0，轮廓将“侵入”到其他元素的边框、内边距或内容所占用的空间。
外边距是边框（外侧）到其他元素边框（外侧）的距离。和内边距一样，外边距也可以设置成负值。
代码15 外边距
margin: 12px; /* 外边距 */ margin: 8px 16px; /* 顶底 | 左右 */ margin: 8px 16px 12px; /* 顶 | 左右 | 底 */ margin: 8px 16px 12px -24px; /* 顶 | 右 | 底 | 左 */ margin-top: 12px; /* 顶部外边距 */ margin-right: 12px; /* 右侧外边距 */ margin-bottom: 12px; /* 底部外边距 */ margin-left: 12px; /* 左侧外边距 */
由于外边距和两个元素有关，必然产生一个问题：如果两个相邻元素都设置了 margin ，那么它们边框外侧之间的距离是多少呢？这个计算规则叫做外边距折叠，方法如下：
- 两个正外边距取最大值。
- 两个负外边距取最小值（绝对值最大）。
- 一正一负外边距取和。