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

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

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

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

最新評論