CSS定義標題的實例講解

簡單的樣式

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

讓我們認識一下我們自己的超級酷的標題：

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

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

圖2-2： 應用樣式后的標題

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

圖2-3：帶有灰色下邊框的樣式化標題

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

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

增加背景

背景可以增強標題的整潔效果。增加一點補白和背景顏色，我們就有了一個不需要圖片的，但又很有樣子的標題。如下：

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

圖2-4： 帶有背景色和補白的標題

背景和邊框

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

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

試著創建各種不同的同色陰影，產生的立體效果如圖2-5顯示。

圖2-5：帶有背景和下部邊框的標題

平鋪的背景

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

圖2-6：A 在Photoshop中創建10×10點大小的圖片（被放大了）

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

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

圖2-7： 帶有平鋪背景的標題

可替換的圖標

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

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

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

圖2-8：A： 帶有圖標的標題

輕松升級

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

把那些非必須的，裝飾性的圖片保持在CSS文件中，就可以使得更改背景圖片只需幾分鐘，而不再需要幾天，整個站點可以立刻得到升級。你應該開始明白把結構層和表現層的標記分離開的力量了吧。

可變換的效果

下面的技巧在某些情況下會很有用。這是我在2003年4月，用標準重構Fast Company magazine（www.fastcompany.com）站點時大量采用的方法。

我們在整個站點的大多數<h3>標題中使用了13*13點的小圖標，就象這樣：

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

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

圖2-9：A 13×13 點大小的透明圖標（放大的）

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

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

對齊<img>標簽

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

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

圖2-10： 應用CSS背景的透明圖片的效果

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

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

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

圖2-11：帶有背景圖片和色彩的標題

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