CSS样式规则语法

样式规则是CSS的基本单位，每个样式规则由选择器（selector）和声明块（declaration block）两个基本部分构成。

选择器决定为哪些元素应用样式，声明块定义相应的样式。声明块包裹在一对花括号中。声明块由一条或多条声明（declaration）组成，每条声明由一个属性和一个值组成，属性和值之间用冒号隔开。属性是希望设置的样式属性，每个属性有一个值。

具体来讲，一个样式规则由选择器、属性和值这 3 部分构成。格式如下：

1. selector { property: value; }

为了全面描述一个元素的样式，通常需要指定多个属性，每个属性就需要一条声明，多条声明之间用分号隔开（最后一条声明可以省略分号）。如：

1. h1 { color: red; font-size: 14px }

上述样式规则中，h1 是选择器，其中包含两条声明。第一条声明中，color 是属性， red是 color 属性的值；第二条声明中，font-size 是属性，14px 是 font-size 属性的值。样式规则的结构如图 1‑2 所示：

图1-2 CSS样式规则的结构

上述规则就表示，为页面上的所有 h1 标题应用样式，其作用是将 h1 元素内的文本颜色定义为红色，同时将字体大小设置为 14 像素。

一个样式规则中包含多条声明时，声明的顺序并不重要，并且多条可以在一行内书写，也可以在多行内书写。为了阅读方便，建议一行只写一条声明，一般是将选择器和左大括号放在第一行，然后一条声明写一行，右大括号则单独放在最后一行。由于浏览器会忽略样式规则中的所有空格和跳格，建议使用空格或跳格为每条声明增加缩进，并在冒号和属性值之间增加一个空格。如：

1. h1 {
2.    color: red;
3.    font-size: 14px;
4. }

在定义属性时，如果属性的值由多个单词组成，单词之间存在空格，则必须把属性值放在引号中。引号既可以是单引号，也可以是双引号。如：

1. p {
2.    font-family: 'Times New Roman';
3. }

本样式规则中，font-family属性的值为Times New Roman，由于该值是多个单词组成，所以加上了引号。

某些经常在一起使用的样式属性，可以组合起来使用一个特殊的复合属性。复合属性中，属性会包含多个值，值之间需要使用空格隔开。

如，描述边框的border-width、border-style、border-color属性，就可以使用复合属性 border 来一次性设置完成。

1. img {
2.    border: 1px solid blue;
3. }

CSS对所有的属性和值都有严格要求，如果声明的属性名称在CSS规范中不存在，或者属性的值不符合该属性的要求，则该声明就不会生效。