聲明分組簡介
我們既可以對選擇器進行分組,也可以對聲明分組。
假設您希望所有 h1 元素都有紅色背景,並使用 28 像素高的 Verdana 字型顯示為藍色文本,可以寫以下樣式:
h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;} 但是上面這種做法的效率並不高。尤其是當我們為一個有多個樣式的元素創建這樣一個列表時會很麻煩。相反,我們可以將聲明分組在一起:
h1 {font: 28px Verdana; color: white; background: black;} 這與前面的 3 行樣式表的效果完全相同。
注意,對聲明分組,一定要在各個聲明的最後使用分號,這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號,就可以毫無顧忌地採用以下格式建立樣式:
h1 { font: 28px Verdana; color: blue; background: red; } 怎么樣,上面這種寫法的可讀性是不是更強。
不過,如果忽略了第二個分號,用戶代理就會把這個樣式表解釋如下:
h1 { font: 28px Verdana; color: blue background: red;} 因為 background 對 color 來說不是一個合法值,而且由於只能為 color 指定一個關鍵字,所以用戶代理會完全忽略這個 color 聲明(包括 background: black 部分)。這樣 h1 標題只會顯示為藍色,而沒有紅色背景,不過更有可能根本得不到藍色的 h1。相反,這些標題只會顯示為默認顏色(通常是黑色),而且根本沒有背景色。font: 28px Verdana 聲明仍能正常發揮作用,因為它確實正確地以一個分號結尾。
與選擇器分組一樣,聲明分組也是一種便利的方法,可以縮短樣式表,使之更清晰,也更易維護。
提示:在規則的最後一個聲明後也加上分號是一個好習慣。在向規則增加另一個聲明時,就不必擔心忘記再插入一個分號。
結合選擇器和聲明的分組
我們可以在一個規則中結合選擇器分組和聲明分組,就可以使用很少的語句定義相對複雜的樣式。
下面的規則為所有標題指定了一種複雜的樣式:
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; } 上面這條規則將所有標題的樣式定義為帶有白色背景的灰色文本,其內邊距是 10 像素,並帶有 1 像素的實心框線,文本字型是 Verdana。