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