CSS的主要优点之一（特别是对于网页设计师来说），就是它能很容易地向所有同类型的元素应用一组样式。是不是听上去还不够震撼？那么请这样想想看：只需编辑一行CSS，就能改变所有标题的颜色！是不是不喜欢现在用的蓝色？那就改变那行代码，标题将会全部变成紫色、黄色、紫红色，或者是你想要的任何其他颜色。这就能让作为网页设计师的你更多地关注设计而不是那些琐事。下一次开会讨论时，如果有人希望标题还要有绿色阴影，只需编辑样式，再单击Reload按钮就行了。很酷吧？只需区区几秒就大功告成。

当然，CSS并不能解决你的所有问题，比如说你不能用它来改变GIF的颜色，但是利用CSS确实能更容易地完成一些全局性的修改。所以下面先来介绍选择器和结构。

基本规则

前面已经提到，CSS的一个核心特性就是能向文档中的一组元素类型应用某些规则。例如，假设你想让所有h2元素的文本都显示为灰色。如果使用传统的HTML，就必须在所有h2 元素中插入<FONT COLOR="gray">...</FONT>标记：

<h2><font color="gray">This is h2 text</font></h2>

显然，如果你的文档中包含了大量h2元素，这将是一个很繁琐的过程。更槽糕的是，如果你后来又决定要让所有h2元素都是绿色而不是灰色，就必须再重来一次，手动地为所有h2元素设置相应的标记。

利用CSS，可以创建易于修改和编辑的规则，并且能很容易地将其应用到你定义的所有文本元素（下一节将解释这些规则如何工作）。例如，只需将以下规则写一次，就能让所有h2元素变成灰色：

h2 {color:gray;}

如果希望将所有h2文本都改为其他颜色，如银色，只需把这个规则修改如下：

h2 {color:silver;}

规则结构

为了更详细地说明规则的概念，下面将规则的结构分解开逐一介绍。

每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。声明块由一个或多个声明（declaration）组成，每个声明则是一个属性-值对（property-value）。每个样式表由一系列规则组成。

一旦直接向元素全局地应用样式，可以将这些样式从一个元素切换应用到另一个元素。假设你决定将网页中的主体字体设置为灰色。没问题。只需把h1选择器改为P:

html {color: black;}

p {color: gray;}

h2 {color: silver;}

声明和关键字

声明块包含一个或多个声明。声明总有如下格式：一个属性后面跟一个冒号，再后面是一个值，然后是一个分号。冒号和分号后面可以有0个或多个空格。几乎在所有情况下，值要么是一个关键字，要么是该属性可取关键字的一个列表（包含一个或多个关键字),关键字之间用空格分隔。如果声明中使用了不正确的属性或者不正确的值，整个声明都会被忽略。因此，下面这两个声明将会失败：

brain-size:2cm;/* unknown property */

color:ultraviolet;/* unknown value */

如果一个属性的值可以取多个关键字，在这种情况下，关键字通常由空格分隔。并不是所有属性都能接受多个关键字，不过确实有许多属性是这样，例如font属性。假设你想为段落文本定义中等大小的Helvetica字体。

注意medium和Helvetica之间的空格，medium和Helvetica都是关键字（前一个指定了字体的大小，后一个是具体的字体名）。两个关键字之间的空格使用户代理能够区分这两个关键字，并适当地应用。后面的分号指示声明结束。

用空格分隔的这些词称为关键字，这是因为，它们加在一起构成了当前属性的值。例如，考虑以下假想规则：

rainbow: red orange yellow green blue indigo violet;

当然并没有rainbow这样的属性，另外这里使用的颜色也不合法，不过可以用这个例子来说明有关的概念。rainbow 的值是red orange yellow green blue indigo violet,这7个关键字加在一起构成了一个唯一的值。可以把rainbow的值重新定义如下：

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

现在rainbow就有了一个新值，由9个而不是7个关键字组成。尽管这两个值的名字是相同的，但是它们就像0和1一样黑白分明，完全不同。

注意：可以看到，CSS关键字往往由空格分隔。只有一种情况例外。在CSS的font属性中。只有一种情况下可以使用斜线（/）来分隔两个特定关键字。下面是一个例子：

h2 {font: large/150% sans-serif;}

斜线分隔了用来设置元素的字体大小和行高的两个关键字。只有在这里才允许font声明中出现斜线。font允许的所有其他关键字都用空格分隔。

以上介绍了简单声明的基础知识，不过声明可以比这复杂得多。接下来将带你了解CSS的功能有多强大。

分组

到目前为止，我们已经学习了如何向一个选择器应用一个样式，这个技术相当简单。但是如果想为多个元素应用同一个样式该怎么做呢？倘若如此，可能要使用多个选择器，或者向一个元素或一组元素应用多个样式。

选择器分组

假设希望h2元素和段落都有灰色文本。为达到这个目的，最容易的做法是使用以下声明：

h2,p {color:gray;}

将h2和p选择器放在规则的左边，并用一个逗号来分隔，这样就定义了一个规则，其右边的样式（color: gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义则完全不同，有关内容将在“后代选择器”一节中详细介绍。

可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果你想把很多元素显示为灰色，可以使用类似如下的规则：

body,table,th,td,h1,h2,h3,h4,p,pre,strong,em,b,i{color:gray;}

通过分组，网页设计师可以将某些类型的样式“压缩”在一起，这就能得到一个更简短的样式表。以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：

h1 {color:purple;}

h2 {color:purple;}

h3 {color:purple;}

h4 {color:purple;}

h5 {color:purple;}

h6 {color:purple;}

h1,h2,h3,h4,h5,h6{color: purple;}

分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：

/* group 1 */

h1 {color:silver;background:white;}

h2 {color:silver;background:gray;}

h3 {color:white;background:gray;}

h4 {color:silver;background:white;}

h5 {color:gray;background:white;}

/* group 2*/

h1,h2,h4 {color:silver;}

h2,h3 {background:gray;}

h1,h4,b {background:white;}

h3 {color: white;}

b {color: gray;}

/*group3*/

h1，h4 {color: silver; background: white;}

h2 {color: silver;}

h3 {color: white;}

h2，h3 {background: gray;}

b {color: gray; background: white;}

通配选择器

CSS2引入了一种新的简单选择器，称为通配选择器（universal selector），显示为一个星号（*）。这个选择器可以与任何元素匹配，就像是一个通配符。例如，要让一个文档中的每一个元素都为红色，可以写为以下规则：

*{color: red;}

这个声明等价于列出了网页文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能把文档中所有元素的color值都指定为red。不过要当心，尽管通配选择器很方便，但它也有一些意想不到的后果。

声明分组

既然可以将选择器分组到一个规则中，当然也可以对声明分组。假设你希望所有h1元素都有浅绿色背景，并使用18像素高的Helvetica字体显示为

紫色文本（你并不关心读者能不能看清楚）。可以写以下样式：

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

但是这种方法效率不高，想想看，如果为一个有10个或15个样式的元素创建这样一个列表会多麻烦！相反，可以将声明分组在一起：

h1 {font: 18px Helvetica; color: purple; background: aqua;}

这与前面的3行样式表的效果完全一样。

注意，对声明分组时，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符，而且用户代理必须依赖正确的语法才能解析样式表。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：

h1 {

font: 18px Helvetica;

color: purple background: agua;

}

因为background:对于color来说不是一个合法值，而且由于只能为color指定一个关键字，所以用户代理会完全忽略这个color声明（包括background: aqua部分。这样h1标题只会显示为紫色文本，而没有淡绿色背景，不过更有可能根本得不到紫色的h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色（font:18px Helvetica声明仍能正常起作用，因为它确实正确地以一个分号结尾）。

注意：尽管从技术上讲没有必要让规则的最后一个声明也以分号结尾，不过这通常是一个好的实践做法。首先，这会让你养成在声明后加上分号的好习惯。声明的最后缺少分号，是导致表现出错的最常见的原因之一。其次，如果你决定向规则增加另一个声明，就不必担心忘记再插入一个分号。最后一点，如果规则中的最后一个声明少了分号，一些较老的浏览器（如Internet Explorer 3.X）很可能会不知所措。一定要避免所有这些问题。所以只要出现规则，就要在声明的后面加一个分号。

与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之表述更为清晰，而且易于维护。

结合选择器和声明的分组

现在应该了解到，可以对选择器分组，还可以对声明分组。如果在一个规则中结合这两种分组，就可以使用很少的一些语句定义相当复杂的网页设计的样式。现在，如果你想为文档中的所有标题指定某种复杂的样式，而且希望向所有这些标题应用同样的样式，该怎么办呢？可以这么做：

h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

以上对选择器进行了分组，所以规则右边的样式会应用到所列的所有标题上，而且对声明分组意味着所列的所有样式都会应用到规则左边的选择器。

这种方法对比较长的样式很适用，该样式可能如下：

h1 {color: gray;}

h2 {color: gray;}

h3 {color: gray;}

h4 {color: gray;}

h5 {color: gray;}

h6 {color: gray;}

h1 {background: white;}

h2 {background: white;}

h3 {background: white;}

而且后面还有很多行。用这种方式写出长长的样式也是可以的，不过我不推荐这样的方法，编辑这样一个冗长的样式就像到处使用font标记一样麻烦！

还可以向选择器增加更多的表达式，并按信息的类型以“快捷”方式选择元素来应用样式。当然，要想得到如此强大的功能，还需要先做一点准备工作，但这是很值得的。