用CSS定義標題的幾個例項
簡單的樣式
使用CSS，最容易做的事情就是給我們的標題設定不同的字型樣式。我們可以建立一個CSS規則，它將把樣式應用到頁面中出現的所有<h1>標籤（或者是整個站點，當使用一個外部樣式表的時候）。隨後，如果我們想要改變整個站點上所有出現<h1>標籤的地方的顏色、尺寸、字型的話，我們所有需要做的事情就是修改一些CSS規則，然後它們將立即改變。聽上去非常誘惑人，不是嗎？
讓我們認識一下我們自己的超級酷的標題：
<h1>Super Cool Page Title</h1>
用CSS改變顏色、字型和尺寸：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}
頁面上所有找到<h1>的地方都將應用Arial字型（或者是預設的sans-serif字型）、24點大小以及蘭色，就象圖2-2顯示的。
圖2-2： 應用樣式後的標題
接著，讓我們在文字的下面增加一條1點寬的灰色邊框，以增強清晰度（看圖2-3）：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
圖2-3：帶有灰色下邊框的樣式化標題
我們在文字的下方增加了一點補白，來讓線條附近寬鬆一點。由於標題是一個塊級元素，所以它的邊界不僅僅到文字，而是與頁面的水平寬度靈活的保持一致。
值得指出的是，這個特別的建立邊框的方法是一個由三部分組成的語句：寬度、式樣、顏色。試著改變它們的值，看看會產生什麼不同的效果。
增加背景
背景可以增強標題的整潔效果。增加一點補白和背景顏色，我們就有了一個不需要圖片的，但又很有樣子的標題。如下：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
我們把文字改成白色，周圍加上4個點的補白，再把背景改成綠色。就象圖2-4顯示的那樣，這可以建立一個好看的綠色條來橫貫頁面，分隔段落。
圖2-4： 帶有背景色和補白的標題
背景和邊框
在標題下面增加一個窄窄的邊框，加上淡淡的背景色，你能夠建立一種三維的效果，卻不需使用圖片。
這個CSS和前面的例子很相似，僅僅改變一點顏色和在底部增加一個2點寬的邊框。
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background-color: #ddd;
border-bottom: 2px solid #ccc;
}
試著建立各種不同的同色陰影，產生的立體效果如圖2-5顯示。
圖2-5：帶有背景和下部邊框的標題
平鋪的背景
當背景圖片被一起加入後，就變得更富有創造性了。用Photoshop或者你喜歡的圖片編輯器，建立一個10*10的圖片，圖片的頂部有黑色的邊框，漸變的灰色一直到底部，象圖2-6顯示的。
圖2-6：A 在Photoshop中建立10×10點大小的圖片（被放大了）
我們可以用CSS把這個極小的圖片平鋪在<h1>的底部：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}
repeat-x會通知瀏覽器僅在水平方向平鋪（repeat-y 將在垂直方向平鋪）。我們再把圖片設定在bottom，又增加了額外的padding-bottom，我們可以調節平鋪的圖片和上面文字之間的距離。（看圖2-7）
圖2-7： 帶有平鋪背景的標題
可替換的圖示
處理行內的裝飾性圓點和圖示時，作為代替硬編碼的方式，我們可以繼續使用CSS的background屬性來把圖示設定在文字左邊。這個方法可以迅速的改變整個站點的look and feel——升級一個CSS檔案從而立刻改變整個站點的頁面。
程式碼和前面平鋪範例很相似：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}
這裡，我們在左邊留出了額外的空間（在那兒我們將顯示一個圖示），設為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點的小圖示，就象這樣：
<h3><img src="http://images.fastcompany.com/icon/first_imp.gif"
width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>
我們用這種方法編碼有兩個原因。一個原因是，有各種各樣的圖示，它取決於標題的主題（讀書俱樂部的一本書，引號標記著每天的引用，等等）。第二個原因是，當時，我們每個月都會根據當前發行的雜誌封面來更換整個站點的配色方案。這種更換要成為可能，當然要用CSS。
要讓這些圖示隨著頁面上其它元素一起變換顏色，並不需要每次都建立新的圖示。我們建立一個僅使用兩種色彩的圖示：白色和透明色（變換的色彩將被透出來）。圖2-9顯示了這些圖示中的一個例子，它們被使用在首頁上的每日引言中。
圖2-9：A 13×13 點大小的透明圖示（放大的）
透過圖示中透明的部分，我們再次使用簡便的CSS中background屬性設定想讓它透出來的顏色。另外我們還想讓色彩僅僅出現在圖示的後面，而不影響到標題的文字，因此我們又用下面的方法將規則僅施加於包含在<h3>內的<img>標籤。
h3 img {
background: #696;
}
前面的程式碼確定了所有包含在<h3>內的<img>標籤都有一個綠色的背景。色彩透過圖片的透明部分顯示出來，而白色的部分仍然保持白色。每個月，我們都能用一個不同的色彩值來升級CSS規則，從而改變整個站點中的每個標題以及相關聯的圖示的色彩。這就象變魔術！
對齊<img>標籤
為了讓圖示和文字正確的排齊（我們想讓它垂直居中），我們加入了以下CSS規則：
h3 img {
background: #696;
vertical-align: middle;
}
這樣保證了包含於<h3>標籤中的圖片對齊於它的文字中點。圖2-10顯示了標題的效果。
圖2-10： 應用CSS背景的透明圖片的效果
這個方法還有另一個值得注意的地方——不但可以用一個單獨CSS程式碼塊來指定圖片背後要顯示出的背景顏色，同樣也可以在CSS程式碼塊的內部指定。
舉個例子，讓我們回到前面“可替換的圖示”例子，增加一些背景色彩：
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background: #696 url(transparent_icon.gif) no-repeat 0 50%;
}
transparent_icon.gif將放置在我們在前面所指定的色彩上面，用的是同樣的規則（看圖2-11）——這裡是#696，一個可愛的綠色。
圖2-11：帶有背景圖片和色彩的標題
這個技巧使得放置一些與頁面色彩相關聯的小圓角或者裝飾性的圖片變得特別的方便。這些非必須的圖片被完全的包含在CSS檔案中，如果將來要升級，那將可以非常容易的改換。