样式规则

CSS样式表由样式规则组成，这些规则由浏览器解释，然后应用于文档中的相应元素。样式规则由三部分组成：

选择器selector - 选择器是一个HTML标记，在该标记上应用样式。这可以是任何标记，如h1或table等。属性property - 属性修饰HTML标记，所有的HTML属性都被转换成CSS属性。它们可以是颜色、边框等。值value - 被指定为属性的值。例如，color属性的值可以是red或#F1F1F1等。

CSS样式规则语法如下所示：

定义表格边框的示例：

这里，table是一个选择器，border是一个属性，给定值1px solid #C00是该属性的值。

标记选择器

如下所示，为所有h1标记指定颜色：

通用选择器

通用选择器并不选择特定的元素，而是简单地匹配任何元素的标记名，即选取所有元素。

此规则将文档中每个元素的文字呈现为黑色。

后代选择器

在位于特定元素内时才对其应用样式规则。使用空格分隔标记，如下所示，表示只有当em标记位于ul标记内时，样式规则才会对其应用。

类选择器

根据元素的class属性定义样式规则。所有具有该类的元素都将根据定义的规则进行格式化。

此规则将文档中class属性为black的每个元素的文字呈现为黑色。类选择器还有另一种用法，例如：

此规则表示仅为class属性为black的h1元素呈现黑色文字。

可以为元素应用多个类选择器，如下所示：

ID选择器

可以根据元素的id属性定义样式规则。所有具有该id的元素都将根据定义的规则进行格式化。

此规则将文档中id属性为black的每个元素的文字呈现为黑色。与类选择器一样，ID选择器可以和标记选择器配合使用，例如

此规则仅为id属性为black的h1元素呈现黑色文字。

ID选择器的真正威力是当它们用作后代选择，例如

在本例中，id属性为black的标记内的所有h2标题都将显示为黑色。

子选择器

子选择器与后代选择器功能非常不同，如下所示：

如果p是body元素的直接子级，则此规则将以黑色呈现p的文字。如果p标记放在其他元素中如div或td，则p将不会受到该规则的任何影响。

属性选择器

还可以将样式应用于具有特定属性的HTML元素。下面的样式规则将匹配type属性值为text的所有input元素。

此方法的优点是类似<input type=“submit”/>这样的元素不受影响，颜色仅应用于所需的文本字段。

属性选择器有以下几种应用形式：

p[lang] − 选择指定了lang属性的所有p元素p[lang="fr"] − 选择lang属性值为fr的所有p元素p[lang~="fr"] − 选择lang属性值包含fr的所有p元素p[lang|="en"] − 选择lang属性值为en或以en-开头的所有p元素样式块

可以为每个元素定义多条样式规则，将它们组合到一个块中，如下所示：

所有的属性和值对都用分号（；）分隔，可以写成一行或多行，但为了提高可读性，每行最好只写一条规则。

分组选择器

分组选择器将相同的样式应用于多个选择器，使用逗号分隔这些选择器，如下所示：

以上样式规则都应用于h1、h2和h3元素，所有元素都将应用相同的规则。

同样，id选择器也可以组合在一起，如下所示：