CSS 语法
CSS（层叠样式表）是一种用于描述网页外观的样式表语言。它的语法主要包括以下几个方面：
一、选择器
1. 元素选择器：通过 HTML 元素名称来选择元素。
css
p {
color: blue;
}这段代码的意思是选择所有的`<p>`标签，并将它们的文本颜色设置为蓝色。只要是`<p>`段落元素，其文本都会显示为蓝色。
2. 类选择器：以点（.）开头，后面跟类名，可以选择具有特定类的元素。
css
.my-class {
font-size: 16px;
}这里定义了一个类选择器`.my-class`，当在 HTML 元素中添加`class="my-class"`属性时，该元素的字体大小会被设置为 16 像素。比如`<p class="my-class">Some text</p>`，这个段落的字体大小就是 16 像素。
3. ID 选择器：以井号（#）开头，后面跟 ID 名称，用于选择具有特定 ID 的单个元素。
css
#my-id {
background-color: yellow;
}此代码定义了一个 ID 选择器`#my-id`，在 HTML 中只有具有`id="my-id"`的那个唯一元素的背景颜色会被设置为黄色。例如`<div id="my-id">This is a div</div>`，这个`<div>`元素的背景色是黄色。
4. 后代选择器：用于选择特定元素的后代元素。
css
div p {
color: green;
}这个选择器会选择`<div>`元素内部的所有`<p>`元素，并将它们的文本颜色设置为绿色。比如`<div><p>Paragraph inside div</p></div>`，这里面的`<p>`标签文本颜色为绿色。
5. 子选择器：选择直接子元素。
css
div > p {
font-weight: bold;
}这段代码只选择`<div>`的直接子元素`<p>`，并将其字体设置为粗体。如果有`<div><p>Direct child</p><span><p>Not direct child</p></span></div>`，只有第一个`<p>`标签会变为粗体，第二个不会。
二、属性和值
1. 属性：定义要修改的样式特征，如`color`（文本颜色）、`font-size`（字体大小）、`background-color`（背景颜色）等。
- `color`属性用于设置文本的颜色。
- `font-size`属性用于设置字体的大小。
- `background-color`属性用于设置元素的背景颜色。
2. 值：为属性指定具体的设置，如`color: red;`将文本颜色设置为红色，`font-size: 14px;`将字体大小设置为 14 像素。
- 对于颜色值，可以使用颜色名称（如`red`、`blue`等）、十六进制值（如`#ff0000`表示红色）、RGB 值（如`rgb(255, 0, 0)`表示红色）等。
- 长度单位可以是`px`（像素）、`em`（相对于父元素字体大小的倍数）、`rem`（相对于根元素字体大小的倍数）等。
三、声明块
由一对花括号`{}`包围，包含一组属性和值的声明，用于描述选择器所选中元素的样式。
css
p {
color: blue;
font-size: 16px;
}这里为`<p>`元素设置了文本颜色为蓝色，字体大小为 16 像素。也就是说，所有的`<p>`段落元素都会呈现蓝色的文本和 16 像素大小的字体。
四、注释
使用`/* 注释内容 */`来添加注释，提高代码的可读性。
css
/* 这是一个注释，用于解释下面的样式规则 */
p {
color: blue;
}注释可以帮助开发者和其他阅读代码的人理解 CSS 代码的用途和意图。
五、伪类和伪元素
1. 伪类：用于选择处于特定状态的元素，如`:hover`（鼠标悬停状态）、`:active`（被激活状态）、`:nth-child(n)`（选择第 n 个子元素）等。
css
a:hover {
color: red;
}当鼠标悬停在`<a>`标签上时，文本颜色变为红色。这意味着在网页中，当用户的鼠标指针移动到链接上但还没有点击时，链接的文本颜色会从原来的颜色变成红色，起到一种交互提示的作用。
2. 伪元素：用于选择元素的特定部分，如`::before`（在元素内容之前插入内容）、`::after`（在元素内容之后插入内容）。
css
p::before {
content: ">>";
color: gray;
}在每个`<p>`元素的内容之前插入“>>”，并设置为灰色。这样，所有的段落开头都会出现一个灰色的“>>”符号，起到装饰和区分的作用。
六、单位
1. 长度单位：如`px`（像素）、`em`（相对于父元素字体大小的倍数）、`rem`（相对于根元素字体大小的倍数）等。
css
font-size: 14px; padding: 1em;
- `font-size: 14px;`表示将字体大小设置为 14 像素。像素是一种绝对长度单位，在不同设备上显示的大小相对固定。
- `padding: 1em;`表示内边距为 1 个相对于父元素字体大小的倍数。如果父元素的字体大小是 16 像素，那么这个元素的内边距就是 16 像素。
2. 颜色单位：可以使用颜色名称（如`red`