簡單的樣式

使用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）