现在,我们能分组选择符,也可以分组声明。将二者结合起来,就可以用一条语句来定义复杂的样式。假设我们需要为文档中的一些标题分配一些复杂的样式。如下:
- H1,H2,H3,H4,H5,H6{color:gray;
- background:white;
- padding:0.5em;
- font:20pt Charcoal,sans-serif;
- Continue Reading →
现在,我们能分组选择符,也可以分组声明。将二者结合起来,就可以用一条语句来定义复杂的样式。假设我们需要为文档中的一些标题分配一些复杂的样式。如下:
既然可以为一条规则中的选择符分组,那么声明也应该能够分组。在这里用分号作为一条声明的结束,这样可以显得更加清楚,因为一条规则里可能含有多个声明。这样还能使样式表更加紧凑、有组织、易于阅读。例如,要让某个背景的所有H1元素都具有紫色文本,而且用18磅的Helvetica字体,可以像下面这样书写样式:
这样做效率并不高——试想如果要为某个元素分配10个或者15个样式,情形会怎样呢!所以,必须对声明分组:
迄今为止,事情就这么简单——如果只想将一个样式应用于某个选择符,就是这样轻而易举。毫无疑问,我们要求的不仅仅是这些;有时,我们或许需要让同一条规则应用于多个元素,也就是多个选择符,或者要将更多的样式应用于一个或一组元素。
假设文档中的H2元素和P元素都应是灰色的文本。最简便的方式就是像下面的这样:
通过将H2和p元素同时放在规则的左边并且用英文逗号分隔它们,右边为规则定义的样式,规则将被同时应用于两个选择符。逗号告诉浏览器在这一条规则中包含两个不同的选择符。如果漏掉了逗号,将会赋予这条规则完全不同的意义。我们将在”上下文选择符”一节中对此展开讨论。
也可以一次分组任意多个选择符。如果想让文档中的每个元素都为灰色,可以用下面的规则:
声明的格式是固定的,某个属性(property)后跟一个冒号,然后是其取值。最后,这条声明以分号(;)作为终结。而值可以是单个关键字(keyword)或者是由空格所分开的一串关键字组成的。如果有一个不正确的属性被用于声明中,那么,整条声明将被忽略。而且后续的声明也将被忽略,因为即使值是正确的,属性也不正确:
如果某个值不正确,多数情况下只有那个值被忽略——尽管它可能使整条规则作废。然而,这种可能性对多数浏览器来说是很小的,因为大部分都能忍受CSS中的一定的错误:它们只是丢掉不认识的值,使用声明中的剩余部分,而不是忽略整条规则。这听起来好像是做了件礼貌的事,但对于制作者来说也更容易培养不好的编写习惯。
如果使用多个关键字作为一个属性的值,通常用空格将它们分开。并不是每个属性都接受多个关键字,但大部分都可以,例如FONT属性。如果想要使段落的文本采用中等尺寸的Helvetica字体,那么规则应该如下所示:
注意medium和Helvetica之间的空格,两边各为一个关键字,第一个是字体尺寸,第二个是字体名。这一空格使得用户代理能分辨关键字,从而正确地使用它们。最后的分号表示规则结尾。之所以要将这些以空格符分开的单词当作关键字,是因为它们全部合起来才形成属性的值。例如,下面这条虚构的规则:
选择符通常是一个HTML元素,但也可以是其他的。例如,如果一个CSS文件包含XML文档的样式,它看起来可能如下所示:
换句话说,最基本的选择符是一个文档中的某个元素。在XML里,可以是任何东西。另一方面,如果是为HTML定制样式,常常是使用某个HTML的元素,像P、H3、EM、A或者是BODY元素,如下: