點(diǎn)擊這里返回腳本之家　HTML教程　欄目．
上文：Chapter1 清單
原文出處
標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語(yǔ)言和樣式手冊(cè)
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語(yǔ)法談起
Chapter2 標(biāo)題
總覽:
不但所有網(wǎng)頁(yè)都需要有標(biāo)題,而且如果標(biāo)記正確的話,他們能為網(wǎng)頁(yè)設(shè)計(jì)和易用性增色不少.
從外觀來(lái)說(shuō),網(wǎng)頁(yè)的標(biāo)題通常是使用較大的字號(hào),或許會(huì)用和主體文字不同的顏色或者字體.標(biāo)題的作用是"簡(jiǎn)要的描述往后章節(jié)所討論的主題",W3C這樣描述 — 顯示網(wǎng)頁(yè)內(nèi)各個(gè)段落的概要.
怎樣來(lái)創(chuàng)建一個(gè)頁(yè)面標(biāo)題來(lái)使得我們要展現(xiàn)的信息得到最有效的利用?在這個(gè)章節(jié)中,我們將研究幾種常用的處理標(biāo)題的方法,試著從中找出其中一種對(duì)我們最有幫助的方式,然后,我們將使用一些css的技巧和竅門(mén)來(lái)為最棒的方法裝飾一番.
創(chuàng)建文檔標(biāo)題的最好方法是什么?
在回答這個(gè)問(wèn)題之前,讓我們假設(shè)現(xiàn)在正要把標(biāo)題放置在文檔的頁(yè)首,我們來(lái)看看能夠達(dá)成類(lèi)似效果的三種方式.
方法A:有意義嗎?
<span class="heading">Super Cool Page Title</span>
雖然<span>標(biāo)簽在某些場(chǎng)合會(huì)是個(gè)方便的標(biāo)簽,但是對(duì)于頁(yè)面標(biāo)題來(lái)說(shuō),它的意義并不大,使用這個(gè)方法的唯一好處是我們可以為 heading 類(lèi)指定一個(gè)css樣式,以便讓文字看起來(lái)像是個(gè)標(biāo)題.
.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
現(xiàn)在,所有標(biāo)記了heading類(lèi)的標(biāo)題都會(huì)變大,變粗,變藍(lán),很棒對(duì)吧?但是,如果有人使用一個(gè)不支持css的瀏覽器訪問(wèn)這個(gè)頁(yè)面會(huì)怎么樣呢?
舉例來(lái)說(shuō),如果我們把css樣式放在舊瀏覽器不支持的外部樣式表文件里 — 或者屏幕閱讀器為有障礙的用戶朗讀頁(yè)面時(shí)會(huì)怎么樣呢?通過(guò)這些途徑訪問(wèn)這個(gè)頁(yè)面的使用者將看不到(聽(tīng)不到)標(biāo)題和正文文字的差異.
class="heading"這樣的標(biāo)注方法稍~~微的描述了標(biāo)簽內(nèi)容的意義,但是<span>只是個(gè)一般用途的容器,只是讓大部分瀏覽器改變默認(rèn)顯示樣式而已.
搜索引擎在抓取到這個(gè)頁(yè)面時(shí),會(huì)跳過(guò)<span>標(biāo)簽就像它不曾在那邊一樣,不會(huì)為里面可能包含的關(guān)鍵字提升權(quán)重,稍后在本章節(jié)內(nèi)會(huì)提到更多搜索引擎和頁(yè)面標(biāo)題的關(guān)系.
最后,由于<span>標(biāo)簽是一個(gè)行內(nèi)元素,我們大多需要把方法A的內(nèi)容在放置到另一個(gè)塊級(jí)容器中,比方說(shuō)<p>或者<div>,以便讓它獨(dú)占一行.這樣會(huì)生成許多不必要的代碼,就算你加上需要的容器,不支持css的瀏覽器仍然會(huì)以他本來(lái)的方式顯示文字,讓用戶看不出標(biāo)題和正文的任何區(qū)別.
#p#
方法B: P和B的組合
<p><b>Super Cool Page Title</b></p>
方法B使用了段落標(biāo)簽,這會(huì)讓我們得到我們想要的塊級(jí)元素的顯示效果,而<b>標(biāo)簽會(huì)讓文字呈現(xiàn)粗體的樣式(在大多數(shù)瀏覽器上) — 但是我們以這樣的方式標(biāo)記重要的標(biāo)題時(shí),仍然要面對(duì)同樣缺少語(yǔ)義性的結(jié)果.
不像方法A,<b>標(biāo)簽的存在就算缺少css樣式的定義,在大多數(shù)瀏覽器中還是會(huì)將文字以粗體的樣式呈現(xiàn).但是和<span>標(biāo)簽一樣,搜索引擎不會(huì)為段落內(nèi)的粗體文字提升關(guān)鍵字權(quán)重.
難以加上樣式
使用單純的p和b的標(biāo)簽組合,讓我們無(wú)法為這個(gè)標(biāo)題加上和其它段落有所區(qū)別的樣式,或許我們想以獨(dú)特的方式強(qiáng)調(diào)標(biāo)題,為頁(yè)面內(nèi)容加上定義和結(jié)構(gòu) — 但是使用了這個(gè)方法讓它呈現(xiàn)粗體后,我們就沒(méi)有辦法去做這些事情了.
方法C:樣式與實(shí)質(zhì)
<h1>Super Cool Page Title</h1>
哈哈,我們的好朋友標(biāo)題標(biāo)簽來(lái)了,標(biāo)題標(biāo)簽從一開(kāi)始就是存在的,但是許多網(wǎng)頁(yè)設(shè)計(jì)師還是無(wú)法以一致的方式使用它們.如果使用得當(dāng),標(biāo)題標(biāo)簽?zāi)軌蛱峁╉?yè)面內(nèi)容的錨點(diǎn),提供靈活的,可索引的,可更改樣式的結(jié)構(gòu).
從標(biāo)簽本身的觀點(diǎn)來(lái)看,你一定會(huì)愛(ài)上它的簡(jiǎn)潔,它們不需要額外的容器標(biāo)簽,你甚至能說(shuō)這個(gè)方法能比前兩個(gè)方法節(jié)省了一些字節(jié),可能可以忽略,但是每小一個(gè)字節(jié)就是改變.
<h1>到<h6>分別代表了6層標(biāo)題,從最重要的<h1>到最不重要的<h6>,他們本身就是塊級(jí)元素不需要一個(gè)額外的容器就能自成一行,簡(jiǎn)單而又有效率 — 是完成這項(xiàng)工作的最佳工具.
容易定義樣式
因?yàn)?lt;h1>標(biāo)簽擁有獨(dú)特的意義,不像<b>或者<p>標(biāo)簽?zāi)菢訒?huì)在文內(nèi)用到多次,因此我們能用css為它加上各式各樣的樣式(我們會(huì)在本章的"更多技巧"中深入討論).
更重要的是,就算不加上任何的樣式定義,標(biāo)題標(biāo)簽看起來(lái)就很明顯是個(gè)標(biāo)題!瀏覽器會(huì)用大字體,粗體字呈現(xiàn)<h1>的內(nèi)容,就算去掉頁(yè)面所有的樣式定義,仍然可以看到文檔的結(jié)構(gòu),因?yàn)檎_的標(biāo)題標(biāo)簽描述的是內(nèi)容意義,而不是表現(xiàn)方式. (圖 2-1)

圖 2 - 1: 脫離樣式后使用標(biāo)題標(biāo)簽的頁(yè)面內(nèi)容
屏幕閱讀器,PDA,移動(dòng)電話和其他一些視覺(jué)的非視覺(jué)的瀏覽器也能識(shí)別并正確處理標(biāo)題標(biāo)簽的內(nèi)容,把它的重要性突出于頁(yè)面其他內(nèi)容之上.使用<span>標(biāo)簽,不支持(或無(wú)法支持)css的瀏覽器就不會(huì)認(rèn)為它有什么特別之處.
討厭的默認(rèn)樣式
在網(wǎng)頁(yè)設(shè)計(jì)史上,設(shè)計(jì)師們都會(huì)避免使用標(biāo)題標(biāo)簽,完全是因?yàn)椴患由蠘邮降臅r(shí)候,標(biāo)題標(biāo)簽看起來(lái)就和怪物沒(méi)什么兩樣,二者擇其一,其中一部分人會(huì)因?yàn)槟J(rèn)字體大小太大而避免使用<h1>或<h2>而去使用字體大小較小的標(biāo)號(hào)較高的標(biāo)題標(biāo)簽.
然而,有個(gè)重點(diǎn)值得強(qiáng)調(diào),我們可以根據(jù)自己的喜好通過(guò)定義css輕易的改變這些標(biāo)題標(biāo)簽的樣式 — 舉例來(lái)說(shuō),<h1>未必一定是占據(jù)了半塊屏幕的龐然大物,稍后,我會(huì)示范如何簡(jiǎn)單的用css樣式來(lái)定義標(biāo)題標(biāo)簽,以此來(lái)幫助你克服對(duì)<h1>的恐懼.
對(duì)搜索引擎的友好
這是最大的優(yōu)點(diǎn).搜索引擎十分喜歡標(biāo)題標(biāo)簽,<span>標(biāo)簽或者段落中的粗體對(duì)搜索引擎來(lái)說(shuō)并沒(méi)有多大意義,使用正確的<h1>~<h6>標(biāo)記標(biāo)題花不了多少時(shí)間,但是卻能幫助搜索引擎為你的頁(yè)面建立索引,讓用戶更容易找到你的網(wǎng)頁(yè).
搜索引擎的機(jī)器人非常重視標(biāo)題標(biāo)簽中的內(nèi)容,或許,你會(huì)想要在里面堆上幾個(gè)關(guān)鍵字,在他們處理完<title>和<meta>標(biāo)簽之后,緊接著就會(huì)處理頁(yè)面內(nèi)容中的標(biāo)題標(biāo)簽,如果你的頁(yè)面上沒(méi)有使用標(biāo)題標(biāo)簽的話,那這些在你的標(biāo)題中的關(guān)鍵字不會(huì)引起他們的重視,被他們忽略.
所以,只需要花少少的時(shí)間,就能讓其他人更容易通過(guò)內(nèi)容找到你的網(wǎng)頁(yè),聽(tīng)起來(lái)不錯(cuò),對(duì)吧?
附帶一提的標(biāo)簽順序
在上面的示例中,在頁(yè)面中最重要的就是標(biāo)題,因?yàn)樗钦麄€(gè)文檔的標(biāo)題,因此,我們將使用最重要的標(biāo)題標(biāo)簽<h1>,根據(jù)W3C,有些人認(rèn)為跳過(guò)標(biāo)題層并不是什么好習(xí)慣,舉例說(shuō)明,假設(shè)我們有下面這么一份網(wǎng)頁(yè):
<h1>Super Cool Page Title</h1>
那么下一個(gè)標(biāo)題(如果不是另一個(gè)<h1>的話),就應(yīng)該是<h2>,在接下去則使用<h3>等等,你也許不會(huì)跳過(guò)某級(jí)標(biāo)題,比如說(shuō)在<h1>之后直接使用<h3>.我比較贊同,并且認(rèn)為結(jié)構(gòu)和綱要相同,應(yīng)該按照順序使用每個(gè)級(jí)層,這能讓你為已經(jīng)存在的頁(yè)面方便的添加標(biāo)題,樣式.同時(shí)這樣也比較不會(huì)出現(xiàn)用完所有標(biāo)題級(jí)層的情況.
如同先前所述,設(shè)計(jì)者可能會(huì)使用<h4>代表頁(yè)面里最重要的標(biāo)題,只因?yàn)樗念A(yù)設(shè)字體大小不如<h1>那樣大的恐怖.但是要記住,先寫(xiě)結(jié)構(gòu),再調(diào)整樣式,我們可以在任何時(shí)候根據(jù)我們自己的喜好通過(guò)css改變標(biāo)題標(biāo)簽的字體大小.
#p#
概要
讓我們大致上回顧一下,為什么使用標(biāo)題標(biāo)簽(<h1>到<h6>)來(lái)標(biāo)記頁(yè)面內(nèi)的標(biāo)題會(huì)比較好.
方法A:
可視化瀏覽器會(huì)在禁用或不支持css功能時(shí),以一般文字相同的樣式顯示標(biāo)題,非視覺(jué)瀏覽器則完全不知道標(biāo)題和內(nèi)文文字之間的差別.
搜索引擎不會(huì)特別重視以<span>標(biāo)記的標(biāo)題
我們能制定獨(dú)特的樣式,但是我們?cè)谛略鰳?biāo)題時(shí),卻會(huì)被heading類(lèi)困死.
方法B:
可視化瀏覽器只會(huì)用粗體顯示內(nèi)容,繼續(xù)使用預(yù)設(shè)的字體大小.
我們無(wú)法為標(biāo)題加上和內(nèi)文不同的獨(dú)特樣式
搜索引擎同樣不會(huì)特別重視以<p><b>創(chuàng)建的標(biāo)題的內(nèi)容.
方法C:
傳達(dá)了標(biāo)題標(biāo)簽中的文字確切的含義.
不管是可視化還是非可視化瀏覽器不管讀到什么樣式都會(huì)正確的處理標(biāo)題內(nèi)容
搜索引擎會(huì)重視標(biāo)題標(biāo)簽中的關(guān)鍵字.
技巧延伸
這里我們將采用方法C,并用它來(lái)實(shí)驗(yàn)一些簡(jiǎn)單的css樣式.我們將完全發(fā)揮標(biāo)題標(biāo)簽獨(dú)特性的優(yōu)勢(shì).我們可以非常安心的使用標(biāo)題標(biāo)簽,因?yàn)椴还茉谑裁礊g覽器和設(shè)備上,都能正確的處理標(biāo)題內(nèi)容.接下來(lái)我們來(lái)給他裝扮裝扮,然后帶它上街(如果你能夠帶著一個(gè)html標(biāo)簽上街的話....)
簡(jiǎn)單的樣式
使用css,最簡(jiǎn)單最容易實(shí)現(xiàn)的效果就是為標(biāo)題設(shè)置不同的字型.我們可以編寫(xiě)一個(gè)css規(guī)則,然后套用到頁(yè)面中所有的<h1>標(biāo)簽上(如果你用到了外部樣式表,那就可以把樣式套用到整個(gè)網(wǎng)站上).如果在稍后的時(shí)間里想要改變整個(gè)網(wǎng)站里每個(gè)<h1>的顏色,大小或者字體,那么只需要修改幾條css規(guī)則就行了,而且修改之后的效果能夠馬上看到!這聽(tīng)起來(lái)很誘人,對(duì)吧?
讓我們超級(jí)酷的標(biāo)題來(lái)告訴我們自己吧:
<h1>Super Cool Page Title</h1>
讓我們用css來(lái)改變它的顏色,字體和大小吧:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}
就像我們剛才所說(shuō)的,非常簡(jiǎn)單,整個(gè)頁(yè)面的所有<h1>都被設(shè)置成24像素大小,藍(lán)色的Arial(或者默認(rèn)的sans-serif)字體,如圖 2-2:

圖 2-2: 標(biāo)題樣式示例
接下來(lái)我們繼續(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)題樣式示例
我們?cè)谖淖值撞慷嗔袅诵﹥?nèi)補(bǔ)丁,使得下面的邊線不至于呼吸困難.因?yàn)闃?biāo)題標(biāo)簽是塊級(jí)元素,因此邊框會(huì)不止填滿文字底部,還會(huì)繼續(xù)向右邊延伸,直到填滿整個(gè)頁(yè)面寬度.
另外值得一提的是,我們使用了邊框的簡(jiǎn)寫(xiě)法 — 就是在一條聲明中同時(shí)定義了寬度,樣式,顏色.你可以試試看其他的設(shè)定值,看看有什么別的效果.
#p#
加上背景
背景能給標(biāo)題加上精巧的效果.只要加上背景色與一些留白,不需要用到圖片我們就可以創(chuàng)造出清新的標(biāo)題風(fēng)格.舉例來(lái)說(shuō):
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
我們把標(biāo)題中的文字變成白色,周?chē)舫?像素的內(nèi)補(bǔ)丁空間,同時(shí)把背景改成綠色.如圖2-4那樣,會(huì)有一條寬大的,顏色如同撞球桌的綠帶貫穿整個(gè)頁(yè)面,分割兩個(gè)段落.

圖2-4:設(shè)定了內(nèi)補(bǔ)丁和背景色的標(biāo)題示例
背景和邊框
只要在標(biāo)題下面加上一條細(xì)邊框,再配上淺色背景,你就能不用一張圖片的情況下做出三維的效果.
這份css與上面的十分類(lèi)似,只改了幾個(gè)顏色,在底部加上了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:設(shè)定背景和底邊的標(biāo)題
平鋪背景
用上圖片的話,就能發(fā)揮更多的創(chuàng)意了.就讓我們用photoshop創(chuàng)建一個(gè)10X10的小圖片,最上面是黑色的邊框,然后下面是從上到下的灰色梯度(如圖2-6):

圖2-6 用Photoshop創(chuàng)建的小圖片
我們可以用css把這個(gè)小圖片放到我們的<h1>底部去:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}
設(shè)定 repeat-x 使瀏覽器在平鋪背景圖的時(shí)候只在水平方向上排列(相對(duì)的repeat-y就是在垂直方向上排列),同時(shí)我們?cè)O(shè)定了將圖片放置在標(biāo)題的底部,并加上一些下部?jī)?nèi)補(bǔ)丁,以便調(diào)整圖片和標(biāo)圖文字之間的距離(如圖2-7)

圖2-7:設(shè)定平鋪背景的標(biāo)題示例
方便替換的圖標(biāo)
我們也可以使用cssdebackground屬性來(lái)設(shè)定放在文字左邊的小圖標(biāo)以此來(lái)代替寫(xiě)死圖片標(biāo)簽的方法,為標(biāo)題加上裝飾用的小圖標(biāo).這個(gè)方法能使在未來(lái)的日子里改變網(wǎng)站顯示效果的工作變得十分輕松—只需要替換那么一個(gè)css規(guī)則,就能同時(shí)改變整個(gè)網(wǎng)站的顯示效果.
代碼和上面的平鋪背景大致相同:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}
我們?cè)谖淖值淖筮叾嗔舫鲆粔K空間以便防止我們想要的圖標(biāo),然后設(shè)定no-repeat指定背景圖片不進(jìn)行平鋪(如圖2-8),同時(shí)我們希望圖標(biāo)的位置在據(jù)左邊0像素,并且對(duì)起垂直中線.

圖2-8:設(shè)定了圖標(biāo)的標(biāo)題示例
#p#
容易更新
讓我們?cè)O(shè)想這樣一個(gè)場(chǎng)景:在一個(gè)包含了100個(gè)頁(yè)面的網(wǎng)站里,我們沒(méi)有使用上面的方法,而使用<img>標(biāo)簽寫(xiě)死每個(gè)標(biāo)題旁邊的圖標(biāo),圖標(biāo)和網(wǎng)站風(fēng)格是相融合的,幾個(gè)星期后,網(wǎng)站的主人打算換掉網(wǎng)站風(fēng)格,而新的圖標(biāo)大小和舊的并不一樣,哎呦!這下我們就得回去修改整整100份頁(yè)面里面的<img>標(biāo)簽以更新新圖標(biāo)的路徑,真討厭!想想這些事件會(huì)對(duì)項(xiàng)目預(yù)算造成怎樣的影響,對(duì)完工期限帶來(lái)多大的壓力?時(shí)間就是金錢(qián)啊!
如果把這些并不十分重要的,裝飾性的圖標(biāo)整合到一個(gè)css文件中,只要花上幾分鐘就能夠一次性換掉整站的所有圖標(biāo),帶來(lái)嶄新的外觀!由此你應(yīng)該可以漸漸明白到結(jié)構(gòu)標(biāo)記和顯示效果分離的好處了吧.
變色龍效果
下來(lái)的技巧和我剛才所說(shuō)的有一些矛盾,但是我認(rèn)為這個(gè)技巧在某些情況下是十分有用的.這是我在2003年4月為Fast Company雜志的網(wǎng)站(www.fastcompany.com)做標(biāo)準(zhǔn)重構(gòu)時(shí)大量使用的技巧.
那時(shí)我們?cè)诰W(wǎng)站里的<h3>標(biāo)簽旁邊用了許多13X13的小圖標(biāo),就像這樣:
<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>
有兩個(gè)讓我們決定要這樣把圖標(biāo)寫(xiě)死在網(wǎng)頁(yè)里面.首先,根據(jù)標(biāo)題種類(lèi)的不同,我們會(huì)使用到不同的圖標(biāo)(圖書(shū)俱樂(lè)部是一本書(shū),每日引言則是引號(hào)等等),第二個(gè)理由則是我們每個(gè)月會(huì)更換一次整個(gè)網(wǎng)站的配色,以配合當(dāng)期雜志的封面主題.當(dāng)然,這種替換工作因?yàn)槭褂昧薱ss而變得十分簡(jiǎn)單.
為了讓圖標(biāo)跟著其他頁(yè)面元素一起變色(這樣才不必一直為了新色彩而重新制作圖標(biāo)),我們只用兩種顏色做了一組圖標(biāo):白色和透明(會(huì)顯示除每次更改的背景顏色).圖2-9就是放在首頁(yè)引言之前的圖標(biāo):

圖2-9: 13X13的透明圖標(biāo)(放大后)
為了在透明部分填進(jìn)顏色,我們使用了簡(jiǎn)單的css的background屬性設(shè)定顏色,我們希望只希望這個(gè)顏色出現(xiàn)在圖表的后面而不出現(xiàn)在標(biāo)題文字后面,我們用到了css選擇器只對(duì)<h3>標(biāo)簽內(nèi)的圖片使用這條規(guī)則,以便達(dá)到我們想要的效果:
h3 img {
background: #696;
}
這段css代碼表示<h3>標(biāo)簽內(nèi)的所有<img>標(biāo)簽都把背景設(shè)為綠色,背景色會(huì)透過(guò)透明像素顯示出來(lái),但是白色部分仍然還是白色,如此一來(lái),每個(gè)月只需要修改這條css規(guī)則,換上不同的顏色,就能瞬間改變網(wǎng)站上每個(gè)圖標(biāo)的色彩了,就像變魔術(shù)一樣.
對(duì)齊<img>標(biāo)簽
為了使圖標(biāo)和文字正確的對(duì)齊(我們希望垂直居中),因此我們加上了這條css規(guī)則:
h3 img {
background: #696;
vertical-align: middle;
}
這條規(guī)則會(huì)使圖標(biāo)和<h3>文字內(nèi)容垂直居中,圖2-20就是設(shè)定玩的標(biāo)題:

圖2-10:以css為圖標(biāo)加上背景色的示例
這個(gè)例子還能說(shuō)明另一個(gè)重要的概念—以css指定背景色彩會(huì)出現(xiàn)在任何頁(yè)面內(nèi)指定的圖標(biāo)或是css圖標(biāo)后面.
舉例來(lái)說(shuō),我們回頭看看"方便更新的圖標(biāo)"這個(gè)示例,為它加上背景色看看:
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background: #696 url(transparent_icon.gif) no-repeat 0 50%;
}
如此以來(lái) transparent_icon.gif 會(huì)顯示在相同規(guī)則中稍早定義的背景色之上(如圖2-11) —在這個(gè)例子中,背景色是#696,也就是撞球桌的綠色.

圖2-11 設(shè)定了背景圖,背景色的標(biāo)題示例
當(dāng)你為了考慮色彩為主的頁(yè)面上加小圓角,裝飾圖標(biāo)時(shí),這個(gè)小技巧就十分好用了.這些不重的圖片可以完全放進(jìn)css文件里面,未來(lái)打算更新的時(shí)候也就可以輕松替換.現(xiàn)在多用點(diǎn)心思.就能節(jié)省未來(lái)許多的工作.
總結(jié)
我希望通過(guò)比較集中常用的方法后,你能發(fā)覺(jué)正確使用標(biāo)題標(biāo)簽的好處.不管是視覺(jué),非視覺(jué)瀏覽器或者其他設(shè)備,都能正確的歷屆標(biāo)題的含義,并且以適當(dāng)?shù)姆椒ㄕ宫F(xiàn)它們,搜索引擎也會(huì)為他們建立索引,你也可以輕松的以css應(yīng)用和修改需要顯示的效果.

最新評(píng)論