CSS的主要優(yōu)點(diǎn)之一（特別是對于網(wǎng)頁設(shè)計(jì)師來說），就是它能很容易地向所有同類型的元素應(yīng)用一組樣式。是不是聽上去還不夠震撼？那么請這樣想想看：只需編輯一行CSS，就能改變所有標(biāo)題的顏色！是不是不喜歡現(xiàn)在用的藍(lán)色？那就改變那行代碼，標(biāo)題將會全部變成紫色、黃色、紫紅色，或者是你想要的任何其他顏色。這就能讓作為網(wǎng)頁設(shè)計(jì)師的你更多地關(guān)注設(shè)計(jì)而不是那些瑣事。下一次開會討論時(shí)，如果有人希望標(biāo)題還要有綠色陰影，只需編輯樣式，再單擊Reload按鈕就行了。很酷吧？只需區(qū)區(qū)幾秒就大功告成。

當(dāng)然，CSS并不能解決你的所有問題，比如說你不能用它來改變GIF的顏色，但是利用CSS確實(shí)能更容易地完成一些全局性的修改。所以下面先來介紹選擇器和結(jié)構(gòu)。

基本規(guī)則

前面已經(jīng)提到，CSS的一個(gè)核心特性就是能向文檔中的一組元素類型應(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è)很繁瑣的過程。更槽糕的是，如果你后來又決定要讓所有h2元素都是綠色而不是灰色，就必須再重來一次，手動地為所有h2元素設(shè)置相應(yīng)的標(biāo)記。

利用CSS，可以創(chuàng)建易于修改和編輯的規(guī)則，并且能很容易地將其應(yīng)用到你定義的所有文本元素（下一節(jié)將解釋這些規(guī)則如何工作）。例如，只需將以下規(guī)則寫一次，就能讓所有h2元素變成灰色：

h2 {color:gray;}

如果希望將所有h2文本都改為其他顏色，如銀色，只需把這個(gè)規(guī)則修改如下：

h2 {color:silver;}

規(guī)則結(jié)構(gòu)

為了更詳細(xì)地說明規(guī)則的概念，下面將規(guī)則的結(jié)構(gòu)分解開逐一介紹。

每個(gè)規(guī)則都有兩個(gè)基本部分：選擇器（selector）和聲明塊（declaration block）。聲明塊由一個(gè)或多個(gè)聲明（declaration）組成，每個(gè)聲明則是一個(gè)屬性-值對（property-value）。每個(gè)樣式表由一系列規(guī)則組成。

一旦直接向元素全局地應(yīng)用樣式，可以將這些樣式從一個(gè)元素切換應(yīng)用到另一個(gè)元素。假設(shè)你決定將網(wǎng)頁中的主體字體設(shè)置為灰色。沒問題。只需把h1選擇器改為P:

html {color: black;}

p {color: gray;}

h2 {color: silver;}

聲明和關(guān)鍵字

聲明塊包含一個(gè)或多個(gè)聲明。聲明總有如下格式：一個(gè)屬性后面跟一個(gè)冒號，再后面是一個(gè)值，然后是一個(gè)分號。冒號和分號后面可以有0個(gè)或多個(gè)空格。幾乎在所有情況下，值要么是一個(gè)關(guān)鍵字，要么是該屬性可取關(guān)鍵字的一個(gè)列表（包含一個(gè)或多個(gè)關(guān)鍵字),關(guān)鍵字之間用空格分隔。如果聲明中使用了不正確的屬性或者不正確的值，整個(gè)聲明都會被忽略。因此，下面這兩個(gè)聲明將會失敗：

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

color:ultraviolet;/* unknown value */

如果一個(gè)屬性的值可以取多個(gè)關(guān)鍵字，在這種情況下，關(guān)鍵字通常由空格分隔。并不是所有屬性都能接受多個(gè)關(guān)鍵字，不過確實(shí)有許多屬性是這樣，例如font屬性。假設(shè)你想為段落文本定義中等大小的Helvetica字體。

注意medium和Helvetica之間的空格，medium和Helvetica都是關(guān)鍵字（前一個(gè)指定了字體的大小，后一個(gè)是具體的字體名）。兩個(gè)關(guān)鍵字之間的空格使用戶代理能夠區(qū)分這兩個(gè)關(guān)鍵字，并適當(dāng)?shù)貞?yīng)用。后面的分號指示聲明結(jié)束。

用空格分隔的這些詞稱為關(guān)鍵字，這是因?yàn)?，它們加在一起?gòu)成了當(dāng)前屬性的值。例如，考慮以下假想規(guī)則：

rainbow: red orange yellow green blue indigo violet;

當(dāng)然并沒有rainbow這樣的屬性，另外這里使用的顏色也不合法，不過可以用這個(gè)例子來說明有關(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屬性中。只有一種情況下可以使用斜線（/）來分隔兩個(gè)特定關(guān)鍵字。下面是一個(gè)例子：

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

斜線分隔了用來設(shè)置元素的字體大小和行高的兩個(gè)關(guān)鍵字。只有在這里才允許font聲明中出現(xiàn)斜線。font允許的所有其他關(guān)鍵字都用空格分隔。

以上介紹了簡單聲明的基礎(chǔ)知識，不過聲明可以比這復(fù)雜得多。接下來將帶你了解CSS的功能有多強(qiáng)大。

分組

到目前為止，我們已經(jīng)學(xué)習(xí)了如何向一個(gè)選擇器應(yīng)用一個(gè)樣式，這個(gè)技術(shù)相當(dāng)簡單。但是如果想為多個(gè)元素應(yīng)用同一個(gè)樣式該怎么做呢？倘若如此，可能要使用多個(gè)選擇器，或者向一個(gè)元素或一組元素應(yīng)用多個(gè)樣式。

選擇器分組

假設(shè)希望h2元素和段落都有灰色文本。為達(dá)到這個(gè)目的，最容易的做法是使用以下聲明：

h2,p {color:gray;}

將h2和p選擇器放在規(guī)則的左邊，并用一個(gè)逗號來分隔，這樣就定義了一個(gè)規(guī)則，其右邊的樣式（color: gray;）將應(yīng)用到這兩個(gè)選擇器所引用的元素。逗號告訴瀏覽器，規(guī)則中包含兩個(gè)不同的選擇器。如果沒有這個(gè)逗號，那么規(guī)則的含義則完全不同，有關(guān)內(nèi)容將在“后代選擇器”一節(jié)中詳細(xì)介紹。

可以將任意多個(gè)選擇器分組在一起，對此沒有任何限制。例如，如果你想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：

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

通過分組，網(wǎng)頁設(shè)計(jì)師可以將某些類型的樣式“壓縮”在一起，這就能得到一個(gè)更簡短的樣式表。以下的兩組規(guī)則能得到同樣的結(jié)果，不過可以很清楚地看出哪一個(gè)寫起來更容易：

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è)組只是展示了對選擇器和聲明分組的不同方法：

/* 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），顯示為一個(gè)星號（*）。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符。例如，要讓一個(gè)文檔中的每一個(gè)元素都為紅色，可以寫為以下規(guī)則：

*{color: red;}

這個(gè)聲明等價(jià)于列出了網(wǎng)頁文檔中所有元素的一個(gè)分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個(gè)星號）就能把文檔中所有元素的color值都指定為red。不過要當(dāng)心，盡管通配選擇器很方便，但它也有一些意想不到的后果。

聲明分組

既然可以將選擇器分組到一個(gè)規(guī)則中，當(dāng)然也可以對聲明分組。假設(shè)你希望所有h1元素都有淺綠色背景，并使用18像素高的Helvetica字體顯示為

紫色文本（你并不關(guān)心讀者能不能看清楚）?？梢詫懸韵聵邮剑?/p>

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

但是這種方法效率不高，想想看，如果為一個(gè)有10個(gè)或15個(gè)樣式的元素創(chuàng)建這樣一個(gè)列表會多麻煩！相反，可以將聲明分組在一起：

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

這與前面的3行樣式表的效果完全一樣。

注意，對聲明分組時(shí)，一定要在各個(gè)聲明的最后使用分號，這很重要。瀏覽器會忽略樣式表中的空白符，而且用戶代理必須依賴正確的語法才能解析樣式表。只要加了分號，就可以毫無顧忌地采用以下格式建立樣式：

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

不過，如果忽略了第二個(gè)分號，用戶代理就會把這個(gè)樣式表解釋如下：

h1 {

font: 18px Helvetica;

color: purple background: agua;

}

因?yàn)閎ackground:對于color來說不是一個(gè)合法值，而且由于只能為color指定一個(gè)關(guān)鍵字，所以用戶代理會完全忽略這個(gè)color聲明（包括background: aqua部分。這樣h1標(biāo)題只會顯示為紫色文本，而沒有淡綠色背景，不過更有可能根本得不到紫色的h1。相反，這些標(biāo)題只會顯示為默認(rèn)顏色（通常是黑色），而且根本沒有背景色（font:18px Helvetica聲明仍能正常起作用，因?yàn)樗_實(shí)正確地以一個(gè)分號結(jié)尾）。

注意：盡管從技術(shù)上講沒有必要讓規(guī)則的最后一個(gè)聲明也以分號結(jié)尾，不過這通常是一個(gè)好的實(shí)踐做法。首先，這會讓你養(yǎng)成在聲明后加上分號的好習(xí)慣。聲明的最后缺少分號，是導(dǎo)致表現(xiàn)出錯(cuò)的最常見的原因之一。其次，如果你決定向規(guī)則增加另一個(gè)聲明，就不必?fù)?dān)心忘記再插入一個(gè)分號。最后一點(diǎn)，如果規(guī)則中的最后一個(gè)聲明少了分號，一些較老的瀏覽器（如Internet Explorer 3.X）很可能會不知所措。一定要避免所有這些問題。所以只要出現(xiàn)規(guī)則，就要在聲明的后面加一個(gè)分號。

與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之表述更為清晰，而且易于維護(hù)。

結(jié)合選擇器和聲明的分組

現(xiàn)在應(yīng)該了解到，可以對選擇器分組，還可以對聲明分組。如果在一個(gè)規(guī)則中結(jié)合這兩種分組，就可以使用很少的一些語句定義相當(dāng)復(fù)雜的網(wǎng)頁設(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;}

以上對選擇器進(jìn)行了分組，所以規(guī)則右邊的樣式會應(yīng)用到所列的所有標(biāo)題上，而且對聲明分組意味著所列的所有樣式都會應(yīng)用到規(guī)則左邊的選擇器。

這種方法對比較長的樣式很適用，該樣式可能如下：

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;}

而且后面還有很多行。用這種方式寫出長長的樣式也是可以的，不過我不推薦這樣的方法，編輯這樣一個(gè)冗長的樣式就像到處使用font標(biāo)記一樣麻煩！

還可以向選擇器增加更多的表達(dá)式，并按信息的類型以“快捷”方式選擇元素來應(yīng)用樣式。當(dāng)然，要想得到如此強(qiáng)大的功能，還需要先做一點(diǎn)準(zhǔn)備工作，但這是很值得的。