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