CSS的主要優(yōu)點(diǎn)之一（特別是對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)），就是它能很容易地向所有同類(lèi)型的元素應(yīng)用一組樣式。是不是聽(tīng)上去還不夠震撼？那么請(qǐng)這樣想想看：只需編輯一行CSS，就能改變所有標(biāo)題的顏色！是不是不喜歡現(xiàn)在用的藍(lán)色？那就改變那行代碼，標(biāo)題將會(huì)全部變成紫色、黃色、紫紅色，或者是你想要的任何其他顏色。這就能讓作為網(wǎng)頁(yè)設(shè)計(jì)師的你更多地關(guān)注設(shè)計(jì)而不是那些瑣事。下一次開(kāi)會(huì)討論時(shí)，如果有人希望標(biāo)題還要有綠色陰影，只需編輯樣式，再單擊Reload按鈕就行了。很酷吧？只需區(qū)區(qū)幾秒就大功告成。
當(dāng)然，CSS并不能解決你的所有問(wèn)題，比如說(shuō)你不能用它來(lái)改變GIF的顏色，但是利用CSS確實(shí)能更容易地完成一些全局性的修改。所以下面先來(lái)介紹選擇器和結(jié)構(gòu)。
前面已經(jīng)提到，CSS的一個(gè)核心特性就是能向文檔中的一組元素類(lèi)型應(yīng)用某些規(guī)則。例如，假設(shè)你想讓所有h2元素的文本都顯示為灰色。如果使用傳統(tǒng)的HTML，就必須在所有h2 元素中插入<FONT COLOR="gray">...</FONT>標(biāo)記：
<h2><font color="gray">This is h2 text</font></h2>
顯然，如果你的文檔中包含了大量h2元素，這將是一個(gè)很繁瑣的過(guò)程。更槽糕的是，如果你后來(lái)又決定要讓所有h2元素都是綠色而不是灰色，就必須再重來(lái)一次，手動(dòng)地為所有h2元素設(shè)置相應(yīng)的標(biāo)記。
利用CSS，可以創(chuàng)建易于修改和編輯的規(guī)則，并且能很容易地將其應(yīng)用到你定義的所有文本元素（下一節(jié)將解釋這些規(guī)則如何工作）。例如，只需將以下規(guī)則寫(xiě)一次，就能讓所有h2元素變成灰色：
h2 {color:gray;}
如果希望將所有h2文本都改為其他顏色，如銀色，只需把這個(gè)規(guī)則修改如下：
h2 {color:silver;}
規(guī)則結(jié)構(gòu)
為了更詳細(xì)地說(shuō)明規(guī)則的概念，下面將規(guī)則的結(jié)構(gòu)分解開(kāi)逐一介紹。
每個(gè)規(guī)則都有兩個(gè)基本部分：選擇器（selector）和聲明塊（declaration block）。聲明塊由一個(gè)或多個(gè)聲明（declaration）組成，每個(gè)聲明則是一個(gè)屬性-值對(duì)（property-value）。每個(gè)樣式表由一系列規(guī)則組成。
一旦直接向元素全局地應(yīng)用樣式，可以將這些樣式從一個(gè)元素切換應(yīng)用到另一個(gè)元素。假設(shè)你決定將網(wǎng)頁(yè)中的主體字體設(shè)置為灰色。沒(méi)問(wèn)題。只需把h1選擇器改為P:
html {color: black;}
p {color: gray;}
h2 {color: silver;}
聲明塊包含一個(gè)或多個(gè)聲明。聲明總有如下格式：一個(gè)屬性后面跟一個(gè)冒號(hào)，再后面是一個(gè)值，然后是一個(gè)分號(hào)。冒號(hào)和分號(hào)后面可以有0個(gè)或多個(gè)空格。幾乎在所有情況下，值要么是一個(gè)關(guān)鍵字，要么是該屬性可取關(guān)鍵字的一個(gè)列表（包含一個(gè)或多個(gè)關(guān)鍵字),關(guān)鍵字之間用空格分隔。如果聲明中使用了不正確的屬性或者不正確的值，整個(gè)聲明都會(huì)被忽略。因此，下面這兩個(gè)聲明將會(huì)失?。?br/>
brain-size:2cm;/* unknown property */
color:ultraviolet;/* unknown value */
如果一個(gè)屬性的值可以取多個(gè)關(guān)鍵字，在這種情況下，關(guān)鍵字通常由空格分隔。并不是所有屬性都能接受多個(gè)關(guān)鍵字，不過(guò)確實(shí)有許多屬性是這樣，例如font屬性。假設(shè)你想為段落文本定義中等大小的Helvetica字體。
注意medium和Helvetica之間的空格，medium和Helvetica都是關(guān)鍵字（前一個(gè)指定了字體的大小，后一個(gè)是具體的字體名）。兩個(gè)關(guān)鍵字之間的空格使用戶(hù)代理能夠區(qū)分這兩個(gè)關(guān)鍵字，并適當(dāng)?shù)貞?yīng)用。后面的分號(hào)指示聲明結(jié)束。
用空格分隔的這些詞稱(chēng)為關(guān)鍵字，這是因?yàn)?，它們加在一起?gòu)成了當(dāng)前屬性的值。例如，考慮以下假想規(guī)則：
rainbow: red orange yellow green blue indigo violet;
當(dāng)然并沒(méi)有rainbow這樣的屬性，另外這里使用的顏色也不合法，不過(guò)可以用這個(gè)例子來(lái)說(shuō)明有關(guān)的概念。rainbow 的值是red orange yellow green blue indigo violet,這7個(gè)關(guān)鍵字加在一起構(gòu)成了一個(gè)唯一的值?？梢园裷ainbow的值重新定義如下：
rainbow: infrared red orange yellow green blue indigo violet ultraviolet;
現(xiàn)在rainbow就有了一個(gè)新值，由9個(gè)而不是7個(gè)關(guān)鍵字組成。盡管這兩個(gè)值的名字是相同的，但是它們就像0和1一樣黑白分明，完全不同。
注意：可以看到，CSS關(guān)鍵字往往由空格分隔。只有一種情況例外。在CSS的font屬性中。只有一種情況下可以使用斜線(xiàn)（/）來(lái)分隔兩個(gè)特定關(guān)鍵字。下面是一個(gè)例子：
h2 {font: large/150% sans-serif;}
斜線(xiàn)分隔了用來(lái)設(shè)置元素的字體大小和行高的兩個(gè)關(guān)鍵字。只有在這里才允許font聲明中出現(xiàn)斜線(xiàn)。font允許的所有其他關(guān)鍵字都用空格分隔。
以上介紹了簡(jiǎn)單聲明的基礎(chǔ)知識(shí)，不過(guò)聲明可以比這復(fù)雜得多。接下來(lái)將帶你了解CSS的功能有多強(qiáng)大。
到目前為止，我們已經(jīng)學(xué)習(xí)了如何向一個(gè)選擇器應(yīng)用一個(gè)樣式，這個(gè)技術(shù)相當(dāng)簡(jiǎn)單。但是如果想為多個(gè)元素應(yīng)用同一個(gè)樣式該怎么做呢？倘若如此，可能要使用多個(gè)選擇器，或者向一個(gè)元素或一組元素應(yīng)用多個(gè)樣式。
選擇器分組
假設(shè)希望h2元素和段落都有灰色文本。為達(dá)到這個(gè)目的，最容易的做法是使用以下聲明：
h2,p {color:gray;}
將h2和p選擇器放在規(guī)則的左邊，并用一個(gè)逗號(hào)來(lái)分隔，這樣就定義了一個(gè)規(guī)則，其右邊的樣式（color: gray;）將應(yīng)用到這兩個(gè)選擇器所引用的元素。逗號(hào)告訴瀏覽器，規(guī)則中包含兩個(gè)不同的選擇器。如果沒(méi)有這個(gè)逗號(hào)，那么規(guī)則的含義則完全不同，有關(guān)內(nèi)容將在“后代選擇器”一節(jié)中詳細(xì)介紹。
可以將任意多個(gè)選擇器分組在一起，對(duì)此沒(méi)有任何限制。例如，如果你想把很多元素顯示為灰色，可以使用類(lèi)似如下的規(guī)則：
body,table,th,td,h1,h2,h3,h4,p,pre,strong,em,b,i{color:gray;}
通過(guò)分組，網(wǎng)頁(yè)設(shè)計(jì)師可以將某些類(lèi)型的樣式“壓縮”在一起，這就能得到一個(gè)更簡(jiǎn)短的樣式表。以下的兩組規(guī)則能得到同樣的結(jié)果，不過(guò)可以很清楚地看出哪一個(gè)寫(xiě)起來(lái)更容易：
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;}
分組提供了一些有意思的選擇。例如，下例中的所有規(guī)則分組都是等價(jià)的，每個(gè)組只是展示了對(duì)選擇器和聲明分組的不同方法：
/* 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引入了一種新的簡(jiǎn)單選擇器，稱(chēng)為通配選擇器（universal selector），顯示為一個(gè)星號(hào)（*）。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符。例如，要讓一個(gè)文檔中的每一個(gè)元素都為紅色，可以寫(xiě)為以下規(guī)則：
*{color: red;}
這個(gè)聲明等價(jià)于列出了網(wǎng)頁(yè)文檔中所有元素的一個(gè)分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個(gè)星號(hào)）就能把文檔中所有元素的color值都指定為red。不過(guò)要當(dāng)心，盡管通配選擇器很方便，但它也有一些意想不到的后果。
聲明分組
既然可以將選擇器分組到一個(gè)規(guī)則中，當(dāng)然也可以對(duì)聲明分組。假設(shè)你希望所有h1元素都有淺綠色背景，并使用18像素高的Helvetica字體顯示為
紫色文本（你并不關(guān)心讀者能不能看清楚）。可以寫(xiě)以下樣式：
h1 {font: 18px Helvetica;}
h1 {color: purple;}
h1 {background: aqua;}
但是這種方法效率不高，想想看，如果為一個(gè)有10個(gè)或15個(gè)樣式的元素創(chuàng)建這樣一個(gè)列表會(huì)多麻煩！相反，可以將聲明分組在一起：
h1 {font: 18px Helvetica; color: purple; background: aqua;}
這與前面的3行樣式表的效果完全一樣。
注意，對(duì)聲明分組時(shí)，一定要在各個(gè)聲明的最后使用分號(hào)，這很重要。瀏覽器會(huì)忽略樣式表中的空白符，而且用戶(hù)代理必須依賴(lài)正確的語(yǔ)法才能解析樣式表。只要加了分號(hào)，就可以毫無(wú)顧忌地采用以下格式建立樣式：
h1 {
font: 18px Helvetica;
color: purple;
background: aqua;
}
不過(guò)，如果忽略了第二個(gè)分號(hào)，用戶(hù)代理就會(huì)把這個(gè)樣式表解釋如下：
h1 {
font: 18px Helvetica;
color: purple background: agua;
}
因?yàn)閎ackground:對(duì)于color來(lái)說(shuō)不是一個(gè)合法值，而且由于只能為color指定一個(gè)關(guān)鍵字，所以用戶(hù)代理會(huì)完全忽略這個(gè)color聲明（包括background: aqua部分。這樣h1標(biāo)題只會(huì)顯示為紫色文本，而沒(méi)有淡綠色背景，不過(guò)更有可能根本得不到紫色的h1。相反，這些標(biāo)題只會(huì)顯示為默認(rèn)顏色（通常是黑色），而且根本沒(méi)有背景色（font:18px Helvetica聲明仍能正常起作用，因?yàn)樗_實(shí)正確地以一個(gè)分號(hào)結(jié)尾）。
注意：盡管從技術(shù)上講沒(méi)有必要讓規(guī)則的最后一個(gè)聲明也以分號(hào)結(jié)尾，不過(guò)這通常是一個(gè)好的實(shí)踐做法。首先，這會(huì)讓你養(yǎng)成在聲明后加上分號(hào)的好習(xí)慣。聲明的最后缺少分號(hào)，是導(dǎo)致表現(xiàn)出錯(cuò)的最常見(jiàn)的原因之一。其次，如果你決定向規(guī)則增加另一個(gè)聲明，就不必?fù)?dān)心忘記再插入一個(gè)分號(hào)。最后一點(diǎn)，如果規(guī)則中的最后一個(gè)聲明少了分號(hào)，一些較老的瀏覽器（如Internet Explorer 3.X）很可能會(huì)不知所措。一定要避免所有這些問(wèn)題。所以只要出現(xiàn)規(guī)則，就要在聲明的后面加一個(gè)分號(hào)。
與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之表述更為清晰，而且易于維護(hù)。
現(xiàn)在應(yīng)該了解到，可以對(duì)選擇器分組，還可以對(duì)聲明分組。如果在一個(gè)規(guī)則中結(jié)合這兩種分組，就可以使用很少的一些語(yǔ)句定義相當(dāng)復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)的樣式?，F(xiàn)在，如果你想為文檔中的所有標(biāo)題指定某種復(fù)雜的樣式，而且希望向所有這些標(biāo)題應(yīng)用同樣的樣式，該怎么辦呢？可以這么做：
h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}
以上對(duì)選擇器進(jìn)行了分組，所以規(guī)則右邊的樣式會(huì)應(yīng)用到所列的所有標(biāo)題上，而且對(duì)聲明分組意味著所列的所有樣式都會(huì)應(yīng)用到規(guī)則左邊的選擇器。
這種方法對(duì)比較長(zhǎng)的樣式很適用，該樣式可能如下：
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;}
而且后面還有很多行。用這種方式寫(xiě)出長(zhǎng)長(zhǎng)的樣式也是可以的，不過(guò)我不推薦這樣的方法，編輯這樣一個(gè)冗長(zhǎng)的樣式就像到處使用font標(biāo)記一樣麻煩！
還可以向選擇器增加更多的表達(dá)式，并按信息的類(lèi)型以“快捷”方式選擇元素來(lái)應(yīng)用樣式。當(dāng)然，要想得到如此強(qiáng)大的功能，還需要先做一點(diǎn)準(zhǔn)備工作，但這是很值得的。
當(dāng)前文章標(biāo)題：css在網(wǎng)頁(yè)設(shè)計(jì)中的分組功能
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/css-webdesign-group.html
