標(biāo)記語言——標(biāo)題

互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 18:55:27 作者：佚名

點擊這里返回網(wǎng)頁教學(xué)網(wǎng)　HTML教程　欄目．上文：Chapter1 清單原文出處標(biāo)準化設(shè)計解決方案 - 標(biāo)記語言和樣式手冊 Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup 從標(biāo)記語法談起 Chapter2 標(biāo)題總覽: 不但

概要
讓我們大致上回顧一下,為什么使用標(biāo)題標(biāo)簽(<h1>到<h6>)來標(biāo)記頁面內(nèi)的標(biāo)題會比較好.
方法A:
可視化瀏覽器會在禁用或不支持css功能時,以一般文字相同的樣式顯示標(biāo)題,非視覺瀏覽器則完全不知道標(biāo)題和內(nèi)文文字之間的差別.
搜索引擎不會特別重視以<span>標(biāo)記的標(biāo)題
我們能制定獨特的樣式,但是我們在新增標(biāo)題時,卻會被heading類困死.
方法B:
可視化瀏覽器只會用粗體顯示內(nèi)容,繼續(xù)使用預(yù)設(shè)的字體大小.
我們無法為標(biāo)題加上和內(nèi)文不同的獨特樣式
搜索引擎同樣不會特別重視以<p><b>創(chuàng)建的標(biāo)題的內(nèi)容.
方法C:
傳達了標(biāo)題標(biāo)簽中的文字確切的含義.
不管是可視化還是非可視化瀏覽器不管讀到什么樣式都會正確的處理標(biāo)題內(nèi)容
搜索引擎會重視標(biāo)題標(biāo)簽中的關(guān)鍵字.
技巧延伸
這里我們將采用方法C,并用它來實驗一些簡單的css樣式.我們將完全發(fā)揮標(biāo)題標(biāo)簽獨特性的優(yōu)勢.我們可以非常安心的使用標(biāo)題標(biāo)簽,因為不管在什么瀏覽器和設(shè)備上,都能正確的處理標(biāo)題內(nèi)容.接下來我們來給他裝扮裝扮,然后帶它上街(如果你能夠帶著一個html標(biāo)簽上街的話....)
簡單的樣式
使用css,最簡單最容易實現(xiàn)的效果就是為標(biāo)題設(shè)置不同的字型.我們可以編寫一個css規(guī)則,然后套用到頁面中所有的<h1>標(biāo)簽上(如果你用到了外部樣式表,那就可以把樣式套用到整個網(wǎng)站上).如果在稍后的時間里想要改變整個網(wǎng)站里每個<h1>的顏色,大小或者字體,那么只需要修改幾條css規(guī)則就行了,而且修改之后的效果能夠馬上看到!這聽起來很誘人,對吧?
讓我們超級酷的標(biāo)題來告訴我們自己吧:
<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: 標(biāo)題樣式示例
接下來我們繼續(xù)在標(biāo)題文字下面加上1像素寬的灰色邊框(如圖 2-3):
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}

圖 2-3:加上灰色底邊的標(biāo)題樣式示例
我們在文字底部多留了些內(nèi)補丁,使得下面的邊線不至于呼吸困難.因為標(biāo)題標(biāo)簽是塊級元素,因此邊框會不止填滿文字底部,還會繼續(xù)向右邊延伸,直到填滿整個頁面寬度.
另外值得一提的是,我們使用了邊框的簡寫法 — 就是在一條聲明中同時定義了寬度,樣式,顏色.你可以試試看其他的設(shè)定值,看看有什么別的效果.

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

標(biāo)記語言——標(biāo)題

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容