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

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

基本規(guī)則

前面已經提到，CSS的一個核心特性就是能向文檔中的一組元素類型應用某些規(guī)則。例如，假設你想讓所有h2元素的文本都顯示為灰色。如果使用傳統(tǒng)的HTML，就必須在所有h2 元素中插入<FONT COLOR="gray">...</FONT>標記：

<h2><font color="gray">This is h2 text</font></h2>

顯然，如果你的文檔中包含了大量h2元素，這將是一個很繁瑣的過程。更槽糕的是，如果你后來又決定要讓所有h2元素都是綠色而不是灰色，就必須再重來一次，手動地為所有h2元素設置相應的標記。

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

h2 {color:gray;}

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

h2 {color:silver;}

規(guī)則結構

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

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

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

html {color: black;}

p {color: gray;}

h2 {color: silver;}

聲明和關鍵字

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

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

color:ultraviolet;/* unknown value */

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

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

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

rainbow: red orange yellow green blue indigo violet;

當然并沒有rainbow這樣的屬性，另外這里使用的顏色也不合法，不過可以用這個例子來說明有關的概念。rainbow 的值是red orange yellow green blue indigo violet,這7個關鍵字加在一起構成了一個唯一的值?？梢园裷ainbow的值重新定義如下：

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

現(xiàn)在rainbow就有了一個新值，由9個而不是7個關鍵字組成。盡管這兩個值的名字是相同的，但是它們就像0和1一樣黑白分明，完全不同。

注意：可以看到，CSS關鍵字往往由空格分隔。只有一種情況例外。在CSS的font屬性中。只有一種情況下可以使用斜線（/）來分隔兩個特定關鍵字。下面是一個例子：

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

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

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

分組

到目前為止，我們已經學習了如何向一個選擇器應用一個樣式，這個技術相當簡單。但是如果想為多個元素應用同一個樣式該怎么做呢？倘若如此，可能要使用多個選擇器，或者向一個元素或一組元素應用多個樣式。

選擇器分組

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

h2,p {color:gray;}

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

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

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

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

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ī)則分組都是等價的，每個組只是展示了對選擇器和聲明分組的不同方法：

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

*{color: red;}

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

聲明分組

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

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

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

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

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

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

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

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

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

h1 {

font: 18px Helvetica;

color: purple background: agua;

}

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

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

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

結合選擇器和聲明的分組

現(xiàn)在應該了解到，可以對選擇器分組，還可以對聲明分組。如果在一個規(guī)則中結合這兩種分組，就可以使用很少的一些語句定義相當復雜的網頁設計的樣式。現(xiàn)在，如果你想為文檔中的所有標題指定某種復雜的樣式，而且希望向所有這些標題應用同樣的樣式，該怎么辦呢？可以這么做：

h1,h2,h3,h4,h5,h6 {color: gray; background: white; padding:0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

以上對選擇器進行了分組，所以規(guī)則右邊的樣式會應用到所列的所有標題上，而且對聲明分組意味著所列的所有樣式都會應用到規(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;}

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

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