簡單的樣式

使用CSS，最容易做的事情就是給我們的標(biāo)題設(shè)置不同的字體樣式。我們可以建立一個CSS規(guī)則，它將把樣式應(yīng)用到頁面中出現(xiàn)的所有<h1>標(biāo)簽（或者是整個站點(diǎn)，當(dāng)使用一個外部樣式表的時候）。隨后，如果我們想要改變整個站點(diǎn)上所有出現(xiàn)<h1>標(biāo)簽的地方的顏色、尺寸、字體的話，我們所有需要做的事情就是修改一些CSS規(guī)則，然后它們將立即改變。聽上去非常誘惑人，不是嗎？

讓我們認(rèn)識一下我們自己的超級酷的標(biāo)題：

用CSS改變顏色、字體和尺寸：

頁面上所有找到<h1>的地方都將應(yīng)用Arial字體（或者是缺省的sans-serif字體）、24點(diǎn)大小以及蘭色，就象圖2-2顯示的。

圖2-2： 應(yīng)用樣式后的標(biāo)題

接著，讓我們在文字的下面增加一條1點(diǎn)寬的灰色邊框，以增強(qiáng)清晰度（看圖2-3）：

圖2-3：帶有灰色下邊框的樣式化標(biāo)題

我們在文字的下方增加了一點(diǎn)補(bǔ)白，來讓線條附近寬松一點(diǎn)。由于標(biāo)題是一個塊級元素，所以它的邊界不僅僅到文字，而是與頁面的水平寬度靈活的保持一致。

值得指出的是，這個特別的創(chuàng)建邊框的方法是一個由三部分組成的語句：寬度、式樣、顏色。試著改變它們的值，看看會產(chǎn)生什么不同的效果。

增加背景

背景可以增強(qiáng)標(biāo)題的整潔效果。增加一點(diǎn)補(bǔ)白和背景顏色，我們就有了一個不需要圖片的，但又很有樣子的標(biāo)題。如下：

我們把文字改成白色，周圍加上4個點(diǎn)的補(bǔ)白，再把背景改成綠色。就象圖2-4顯示的那樣，這可以建立一個好看的綠色條來橫貫頁面，分隔段落。

圖2-4： 帶有背景色和補(bǔ)白的標(biāo)題

背景和邊框

在標(biāo)題下面增加一個窄窄的邊框，加上淡淡的背景色，你能夠創(chuàng)建一種三維的效果，卻不需使用圖片。

這個CSS和前面的例子很相似，僅僅改變一點(diǎn)顏色和在底部增加一個2點(diǎn)寬的邊框。

試著創(chuàng)建各種不同的同色陰影，產(chǎn)生的立體效果如圖2-5顯示。

圖2-5：帶有背景和下部邊框的標(biāo)題

平鋪的背景

當(dāng)背景圖片被一起加入后，就變得更富有創(chuàng)造性了。用Photoshop或者你喜歡的圖片編輯器，創(chuàng)建一個10*10的圖片，圖片的頂部有黑色的邊框，漸變的灰色一直到底部，象圖2-6顯示的。

圖2-6：A 在Photoshop中創(chuàng)建10×10點(diǎn)大小的圖片（被放大了）

我們可以用CSS把這個極小的圖片平鋪在<h1>的底部：

repeat-x會通知瀏覽器僅在水平方向平鋪（repeat-y 將在垂直方向平鋪）。我們再把圖片設(shè)置在bottom，又增加了額外的padding-bottom，我們可以調(diào)節(jié)平鋪的圖片和上面文字之間的距離。（看圖2-7）

圖2-7： 帶有平鋪背景的標(biāo)題

可替換的圖標(biāo)

處理行內(nèi)的裝飾性圓點(diǎn)和圖標(biāo)時，作為代替硬編碼的方式，我們可以繼續(xù)使用CSS的background屬性來把圖標(biāo)設(shè)置在文字左邊。這個方法可以迅速的改變整個站點(diǎn)的look and feel――升級一個CSS文件從而立刻改變整個站點(diǎn)的頁面。

代碼和前面平鋪范例很相似：

這里，我們在左邊留出了額外的空間（在那兒我們將顯示一個圖標(biāo)），設(shè)為no-repeat，是為了讓背景圖片只顯示一次（看圖2-8）。我們把它放置在距離首部0點(diǎn)和距離頂部50%的位置上。

圖2-8：A： 帶有圖標(biāo)的標(biāo)題

輕松升級

設(shè)想這樣一個情景來代替前面的例子，我們已經(jīng)在一個包含100個文檔的站點(diǎn)中用<img>標(biāo)簽編碼了這些圖標(biāo)。這些圖標(biāo)匹配著整個站點(diǎn)各個的題目。幾個星期后，站點(diǎn)的所有者決定更改這個站點(diǎn)的look and feel。新的圖標(biāo)和老的圖標(biāo)有著不同的規(guī)格。天哪！我們將需要回到所有的100個文檔里面，去改變每一個<img>標(biāo)簽，來更新它的image路徑。對于一個項(xiàng)目的預(yù)算，這額外所需的時間就會推遲原先的期限。時間就是金錢。

把那些非必須的，裝飾性的圖片保持在CSS文件中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個站點(diǎn)可以立刻得到升級。你應(yīng)該開始明白把結(jié)構(gòu)層和表現(xiàn)層的標(biāo)記分離開的力量了吧。

可變換的效果

下面的技巧在某些情況下會很有用。這是我在2003年4月，用標(biāo)準(zhǔn)重構(gòu)Fast Company magazine（www.fastcompany.com）站點(diǎn)時大量采用的方法。

我們在整個站點(diǎn)的大多數(shù)<h3>標(biāo)題中使用了13*13點(diǎn)的小圖標(biāo)，就象這樣：

我們用這種方法編碼有兩個原因。一個原因是，有各種各樣的圖標(biāo)，它取決于標(biāo)題的主題（讀書俱樂部的一本書，引號標(biāo)記著每天的引用，等等）。第二個原因是，當(dāng)時，我們每個月都會根據(jù)當(dāng)前發(fā)行的雜志封面來更換整個站點(diǎn)的配色方案。這種更換要成為可能，當(dāng)然要用CSS。

要讓這些圖標(biāo)隨著頁面上其它元素一起變換顏色，并不需要每次都創(chuàng)建新的圖標(biāo)。我們創(chuàng)建一個僅使用兩種色彩的圖標(biāo)：白色和透明色（變換的色彩將被透出來）。圖2-9顯示了這些圖標(biāo)中的一個例子，它們被使用在首頁上的每日引言中。

圖2-9：A 13×13 點(diǎn)大小的透明圖標(biāo)（放大的）

透過圖標(biāo)中透明的部分，我們再次使用簡便的CSS中background屬性設(shè)置想讓它透出來的顏色。另外我們還想讓色彩僅僅出現(xiàn)在圖標(biāo)的后面，而不影響到標(biāo)題的文字，因此我們又用下面的方法將規(guī)則僅施加于包含在<h3>內(nèi)的<img>標(biāo)簽。

前面的代碼確定了所有包含在<h3>內(nèi)的<img>標(biāo)簽都有一個綠色的背景。色彩透過圖片的透明部分顯示出來，而白色的部分仍然保持白色。每個月，我們都能用一個不同的色彩值來升級CSS規(guī)則，從而改變整個站點(diǎn)中的每個標(biāo)題以及相關(guān)聯(lián)的圖標(biāo)的色彩。這就象變魔術(shù)！

對齊<img>標(biāo)簽

為了讓圖標(biāo)和文本正確的排齊（我們想讓它垂直居中），我們加入了以下CSS規(guī)則：

這樣保證了包含于<h3>標(biāo)簽中的圖片對齊于它的文本中點(diǎn)。圖2-10顯示了標(biāo)題的效果。

圖2-10： 應(yīng)用CSS背景的透明圖片的效果

這個方法還有另一個值得注意的地方――不但可以用一個單獨(dú)CSS代碼塊來指定圖片背后要顯示出的背景顏色，同樣也可以在CSS代碼塊的內(nèi)部指定。

舉個例子，讓我們回到前面“可替換的圖標(biāo)”例子，增加一些背景色彩：

transparent_icon.gif將放置在我們在前面所指定的色彩上面，用的是同樣的規(guī)則（看圖2-11）――這里是#696，一個可愛的綠色。

圖2-11：帶有背景圖片和色彩的標(biāo)題

這個技巧使得放置一些與頁面色彩相關(guān)聯(lián)的小圓角或者裝飾性的圖片變得特別的方便。這些非必須的圖片被完全的包含在CSS文件中，如果將來要升級，那將可以非常容易的改換。