4.3 CSS语法基础
前面介绍了如何在网页中定义和引用CSS样式表，接下来要讲解CSS是如何定义网页外观的。其定义的网页外观由样式规则和选择符决定。
16 CSS的基本语法
4.3.1 CSS样式规则
CSS为样式化网页内容提供了一条捷径，即样式规则。每一条样式规则都是单独的语句。
1.样式规则
样式表的每条规则都有两个主要部分：选择符（selector）和声明（declaration）。选择符决定哪些因素要受到影响，声明由一个或多个属性及其属性值组成。其语法如下。
selector表示要进行格式化的元素；在选择器后的大括号中的即为声明部分；用“属性:属性值”描述要应用的格式化操作。
图4-5 CSS样式规则
例如，分析一条如图4-5所示的CSS样式规则。
选择符：h1代表CSS样式的名字。
声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选择符相匹配的对象。声明内部由属性及其属性值组成，并用冒号隔开，以分号结束。声明可以是一个或者多个属性及其属性值的组合。
属性（property）：是定义的具体样式（如颜色、字体等）。
属性值（value）：属性值放置在属性名和冒号后面，具体内容随属性的类别而呈现不同形式，一般包括数值、单位及关键字。
例如，将HTML中<body>和</body>标签内的所有文字设置为“华文中宋”、文字大小为12px、黑色文字、白色背景，则只需要在样式中如下定义。
从上述代码片段可以看出，这样的CSS代码结构十分清晰，为方便以后编辑，还可以在每行后面添加注释说明。但是，这种写法虽然使得阅读CSS变得方便，却无形中增加了很多字节，对于有一定基础的Web设计人员来说，可以将上述代码改写为如下格式。
2.选择符的类型
选择符决定了格式化将应用于哪些元素。CSS选择符包括基本选择符、复合选择符、通配符选择符和特殊选择符。
4.3.2 基本选择符
17 CSS的选择器-1
基本选择符包括标签选择符、class类选择符和id选择符。
1.标签选择符
标签选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。一个HTML页面由许多不同的标签组成，而标签选择符就是声明哪些标签采用哪种CSS样式。因此，每一种HTML标签的名称都可以作为相应的标签选择符的名称。标签选择符就是网页元素本身，定义时直接使用元素名称。其格式如下。
其中，E表示网页元素（Element）。例如以下代码表示标签选择符。
应用上述样式的代码如下。
图4-6 标签选择符示例
本例在浏览器中的显示效果如图4-6所示。
2.class类选择符
class类选择符用来定义HTML页面中需要特殊表现的样式，使用元素的class属性值为一组元素指定样式。class类选择符的名称可以由用户自定义，属性和属性值跟HTML标签选择符一样，必须符合CSS规范。其格式如下。
使用class类选择符时，需要使用英文．（点）进行标识，示例代码如下。
应用class类选择符的代码如下。
图4-7 class类选择符示例
本例在浏览器中的显示效果如图4-7所示。
3.id选择符
id选择符用来对某个单一元素定义单独的样式。id选择符只能在HTML页面中使用一次，针对性更强。定义id选择符时要在id名称前加上一个“#”号。其格式如下。
其中，“#id名”是定义的id选择符名称。该选择符名称在一个文档中是唯一的，只对页面中的唯一元素进行样式定义。这个样式定义在页面中只能出现一次，其适用范围为整个HTML文档中所有由id选择符所引用的设置。
示例代码如下。
应用id选择符的代码如下。
本例在浏览器中的显示效果如图4-8所示。
4.3.3 复合选择符
图4-8 id选择符示例
复合选择符包括“交集”选择符、“并集”选择符和“后代”选择符。
1.“交集”选择符
“交集”选择符由两个选择符直接连接构成，其结果是选中两者各自元素范围的交集。其中，第一个选择符必须是标签选择符，第二个选择符必须是class类选择符或id选择符。这两个选择符之间不能有空格，必须连续书写。
图4-9 “交集”选择符
例如，如图4-9所示的“交集”选择符，第一个选择符是段落标签选择符，第二个选择符是class类选择符。
【例4-5】“交集”选择符示例。本例在浏览器中的显示效果如图4-10所示。
图4-10 “交集”选择符示例
【说明】页面中只有第2个段落使用了“交集”选择符，可以看到两个选择符样式交集的效果为字体大小为20px、红色边框且无下画线。
2.“并集”选择符
与“交集”选择符相对应的还有一种“并集”选择符，或者称为“集体声明”。它的结果是同时选中各个基本选择符所选择的范围。任何形式的基本选择符都可以作为“并集”选择符的一部分。
图4-11 “并集”选择符
例如，如图4-11所示的“并集”选择符，集合中分别是<h1>、<h2>和<h3>标签选择符，“集体声明”将为多个标签设置同一样式。
【例4-6】“并集”选择符示例。本例在浏览器中的显示效果如图4-12所示。
图4-12 “并集”选择符示例
【说明】页面中<h1>、<h2>和<h3>标签使用了“并集”选择符，可以看到这3个标签设置了同一样式，即文字颜色均为紫色。
3.“后代”选择符
在CSS选择符中，还可以通过嵌套的方式，对选择符或者HTML标签进行声明。当标签发生嵌套时，内层的标签就成为外层标签的“后代”。“后代”选择符在样式中会常常用到，因布局中常常用到容器的外层和内层，使用“后代”选择符就可以控制某个容器层的子层，使其他同名的对象不受该规则影响。
“后代”选择符能够简化代码，实现大范围的样式控制。例如，当用户对<h1>标签下面的<span>标签进行样式设置时，就可以使用“后代”选择符进行相应的控制。“后代”选择符的写法就是把外层的标签写在前面，内层的标签写在后面，之间用空格隔开。
图4-13 “后代”选择符
例如，如图4-13所示的“后代”选择符，外层的标签是<h1>，内层的标签是<span>，<span>标签就成为<h1>标签的后代。
【例4-7】“后代”选择符示例。本例在浏览器中的显示效果如图4-14所示。
图4-14 “后代”选择符示例
4.3.4 通配符选择符
通配符选择符是一种特殊的选择符，用“*”表示，与Windows通配符“*”具有相似的功能，可以定义所有元素的样式。其格式如下。
例如，通常在制作网页时首先将页面中所有元素的外边距和内边距设置为0，代码如下。
此外，还可以对特定元素的子元素应用样式，例如以下代码。
应用上述样式的代码如下。
图4-15 通配符选择符示例
上述代码在浏览器中的显示效果如图4-15所示。
从代码的执行结果可以看出，由于通配符选择符定义了所有文字的颜色为黑色，因此<h2>和<div>标签中文字的颜色为黑色。接着又定义了<p>标签的文字颜色为蓝色，所以<p>标签中文字的颜色呈现为蓝色。最后定义了<p>标签内所有子元素的文字颜色为红色，所以<p><span>和</span></p>标签之间的文字颜色呈现为红色。
4.3.5 特殊选择符
18 CSS的选择器-2
除前面讲解的选择符外，还有两个比较特殊的、针对属性操作的选择符——伪类选择符和伪元素。
1.伪类选择符
伪类选择符可看作一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。其最大的用处是，可以对链接在不同状态下的内容定义不同的样式效果。之所以名字中有“伪”字，是因为它所指定的对象在文档中并不存在，它指定的是一个与其相关的选择符的状态。伪类选择符和类选择符不同，它不能像类选择符一样随意用别的名字。
伪类选择符可以让用户在使用页面的过程中增加更多的交互效果，例如应用最为广泛的锚点标签<a>的几种状态（未访问超链接状态、已访问超链接状态、鼠标指针悬停在超链接上的状态以及被激活的超链接状态），具体代码如下所示。
需要注意的是，要把active样式写到hover样式后面，否则active样式是不生效的。因为当浏览者按下鼠标按键未松手（active）的时候其实也是获取焦点（hover）的时候，所以如果把hover样式写到active样式后面就把样式重写了。
【例4-8】伪类选择符的应用。当鼠标悬停在超链接上的时候背景色变为其他颜色，文字字体变大，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类选择符实现。本例在浏览器中的显示效果如图4-16和图4-17所示。
图4-16 鼠标悬停在超链接上时
图4-17 鼠标离开超链接时
19 CSS的选择器-3
20 CSS的选择器-4
21 CSS的选择器-5
2.伪元素
与伪类选择符类似，伪元素通过对插入到文档中的虚构元素进行触发，从而达到某种效果。CSS的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。CSS有一个特性——允许用户添加额外元素而不扰乱文档本身，这就是“伪元素”。伪元素的语法如下。
伪元素及其作用见表4-2。
表4-2 伪元素及其作用
【例4-9】 伪元素的应用。本例在浏览器中的显示效果如图4-18所示。
图4-18 伪元素的显示效果
【说明】在本示例代码中，分别对“h4:first-letter”“p:first-line”进行了样式设置。从图4-18中可以看出，凡是<h4>与</h4>之间的内容，都应用了首字号增大且变为红色的样式；凡是<p>与</p>之间的内容，都应用了首行文字变为红色的样式。