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：帶有灰色下邊框的樣式化標題