簡(jiǎn)單的樣式

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

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

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

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

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

接著，讓我們?cè)谖淖值南旅嬖黾右粭l1點(diǎn)寬的灰色邊框，以增強(qiáng)清晰度（看圖2-3）：

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

我們?cè)谖淖值南路皆黾恿艘稽c(diǎn)補(bǔ)白，來讓線條附近寬松一點(diǎn)。由于標(biāo)題是一個(gè)塊級(jí)元素，所以它的邊界不僅僅到文字，而是與頁面的水平寬度靈活的保持一致。

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

增加背景

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

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

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

背景和邊框

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

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

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

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

平鋪的背景

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

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

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

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

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

可替換的圖標(biāo)

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

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

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

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

輕松升級(jí)

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

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

可變換的效果

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

我們?cè)谡麄€(gè)站點(diǎn)的大多數(shù)<h3>標(biāo)題中使用了13*13點(diǎn)的小圖標(biāo)，就象這樣：

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

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

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

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

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

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

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

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

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

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

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

transparent_icon.gif將放置在我們?cè)谇懊嫠付ǖ纳噬厦?，用的是同樣的?guī)則（看圖2-11）――這里是#696，一個(gè)可愛的綠色。

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

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