|
概要
讓我們大致上回顧一下,為什么使用標題標簽(<h1>到<h6>)來標記頁面內(nèi)的標題會比較好.
方法A:
可視化瀏覽器會在禁用或不支持css功能時,以一般文字相同的樣式顯示標題,非視覺瀏覽器則完全不知道標題和內(nèi)文文字之間的差別.
搜索引擎不會特別重視以<span>標記的標題
我們能制定獨特的樣式,但是我們在新增標題時,卻會被heading類困死.
方法B:
可視化瀏覽器只會用粗體顯示內(nèi)容,繼續(xù)使用預(yù)設(shè)的字體大小.
我們無法為標題加上和內(nèi)文不同的獨特樣式
搜索引擎同樣不會特別重視以<p><b>創(chuàng)建的標題的內(nèi)容.
方法C:
傳達了標題標簽中的文字確切的含義.
不管是可視化還是非可視化瀏覽器不管讀到什么樣式都會正確的處理標題內(nèi)容
搜索引擎會重視標題標簽中的關(guān)鍵字.
技巧延伸
這里我們將采用方法C,并用它來實驗一些簡單的css樣式.我們將完全發(fā)揮標題標簽獨特性的優(yōu)勢.我們可以非常安心的使用標題標簽,因為不管在什么瀏覽器和設(shè)備上,都能正確的處理標題內(nèi)容.接下來我們來給他裝扮裝扮,然后帶它上街(如果你能夠帶著一個html標簽上街的話....)
簡單的樣式
使用css,最簡單最容易實現(xiàn)的效果就是為標題設(shè)置不同的字型.我們可以編寫一個css規(guī)則,然后套用到頁面中所有的<h1>標簽上(如果你用到了外部樣式表,那就可以把樣式套用到整個網(wǎng)站上).如果在稍后的時間里想要改變整個網(wǎng)站里每個<h1>的顏色,大小或者字體,那么只需要修改幾條css規(guī)則就行了,而且修改之后的效果能夠馬上看到!這聽起來很誘人,對吧?
讓我們超級酷的標題來告訴我們自己吧:
<h1>Super Cool Page Title</h1>
讓我們用css來改變它的顏色,字體和大小吧:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}
就像我們剛才所說的,非常簡單,整個頁面的所有<h1>都被設(shè)置成24像素大小,藍色的Arial(或者默認的sans-serif)字體,如圖 2-2:
圖 2-2: 標題樣式示例
接下來我們繼續(xù)在標題文字下面加上1像素寬的灰色邊框(如圖 2-3):
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}
圖 2-3:加上灰色底邊的標題樣式示例
我們在文字底部多留了些內(nèi)補丁,使得下面的邊線不至于呼吸困難.因為標題標簽是塊級元素,因此邊框會不止填滿文字底部,還會繼續(xù)向右邊延伸,直到填滿整個頁面寬度.
另外值得一提的是,我們使用了邊框的簡寫法 — 就是在一條聲明中同時定義了寬度,樣式,顏色.你可以試試看其他的設(shè)定值,看看有什么別的效果.
出處：藍色理想
責(zé)任編輯：bluehearts
上一頁 標記語言——標題 [2] 下一頁 標記語言——標題 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 標記語言——標題 [3]
