既然可以为一条规则中的选择符分组,那么声明也应该能够分组。在这里用分号作为一条声明的结束,这样可以显得更加清楚,因为一条规则里可能含有多个声明。这样还能使样式表更加紧凑、有组织、易于阅读。例如,要让某个背景的所有H1元素都具有紫色文本,而且用18磅的Helvetica字体,可以像下面这样书写样式:
H1 {font:18pt Helvetica;}
H1 {color:purple;}
H1 {background:gray;}
这样做效率并不高——试想如果要为某个元素分配10个或者15个样式,情形会怎样呢!所以,必须对声明分组:
H1 {font:18pt Helvetica;color:purple;background:gray;}
这同上面三行样式表所表达的效果是一样,其结果如下图所示:
当在一条规则中分组声明时,分号作为分隔符使用。这一点尤为重要,因为空白会被忽略掉。当然,像下面这样的格式也是可以的:
H1 {
font:18pt Helvetica;
color:purple;
background:gray;
}
如果第二个分号被删掉,用户代理就会将其翻译成下面的样式:
H1 {
font:18pt Helvetica;
color:purple background:gray;
}
因为background并不是个有效的颜色值,而且color只能被赋予一个关键字,所以整条语句都将被忽略。在这种情况下,用户代理就不能按预期的效果来显示了。既然只能有一个关键字赋给color,用户代理就会忽略整条声明,这也就意味着不能得到紫色的H1元素;进而得到的是没有背景的缺省颜色(通常为黑色)。声明font:18pt Helvetica;仍然有效,因为它以正确的分号作为结尾,但其他样式就不能工作了。
【注意】从技术上来讲,没有必要在最后的声明后加个分号,但这不失为一个好的习惯。首先,它能保持用分号来中断一条声明的习惯,缺少这样一个分号常常是引起错误的主要因素。其次,如果想往一条规则里加入另一个声明,就不必担心会忘记插入一个特殊的分号了。最后,如果将最后的那个分号去掉的话,像IE 3.x选样较老的浏览器会出毛病。为了避免所有的这些问题,建议还是加上这个分号为好。
同选择将分组一样,声明分组尾保持样式表短小精悍且易于维护的一种便利方式。下面的例于显示了用两种方式为H1元素分配六种不同的样式的情形。第一种是采用独立规则方式,第二种采用声明分组的方式。第二种方式的好处是只需编辑一个选择符,而不是六个,就能改变其样式。尽管两种方式都可以得到图5一样的结果:
H1 {color:gray;}
H1 {background:white;}
H1 {border:1px solid black;}
H1 {padding:0.5em;}
H1 {font:20pt Charcoal,sans-serif;}
H1 {text-transform:capitalize;}
H1 {
color:gray;
background:white;
padding:0.5em;
font:20pt Charcoal,sans-serif;
border:1px solid black;
text-transform:capitalize;
}