7.5 使用CSS樣式美化超鏈接

人們?yōu)g覽網(wǎng)頁(yè)時(shí)，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)中超鏈接的樣式是各種各樣的，本節(jié)使用CSS樣式來(lái)美化超鏈接。

7.5.1 定義按鈕式超鏈接樣式

本案例是將超鏈接設(shè)計(jì)成按鈕的樣式，具體的CSS樣式請(qǐng)參考案例中的代碼以及其中的注釋。

【例7-6】（實(shí)例文件：ch07\Chap7.6.html）按鈕式鏈接樣式。

相關(guān)的代碼實(shí)例請(qǐng)參考Chap7.6.html文件，在IE瀏覽器中運(yùn)行的結(jié)果如圖7-10所示。

7.5.2 定義立體超鏈接樣式

對(duì)于鏈接樣式，把超鏈接的外觀設(shè)計(jì)成立體的，給人一種忍不住想點(diǎn)擊的感覺(jué)。本案例是通過(guò)設(shè)計(jì)邊框的不同顏色來(lái)實(shí)現(xiàn)的。

【例7-7】（實(shí)例文件：ch07\Chap7.7.html）立體鏈接樣式。

相關(guān)的代碼實(shí)例請(qǐng)參考Chap7.7.html文件，在IE瀏覽器中運(yùn)行的結(jié)果如圖7-11所示。

7.5.3 定義文章中的超鏈接樣式

在瀏覽一些網(wǎng)頁(yè)時(shí)，有時(shí)會(huì)出現(xiàn)不一樣顏色字體的文字，這些文字都可以超鏈接。本案例在詩(shī)歌中的一些關(guān)鍵詞上加了超鏈接，并美化了超鏈接的樣式。

【例7-8】（實(shí)例文件：ch07\Chap7.8.html）定義文章中的超鏈接。

相關(guān)的代碼實(shí)例請(qǐng)參考Chap7.8.html文件，在IE瀏覽器中運(yùn)行的結(jié)果如圖7-12所示。當(dāng)把鼠標(biāo)指針懸浮到“李清照”超鏈接上時(shí)，樣式變化效果如圖7-13所示。

7.5.4 定義圖像交換超鏈接樣式

在瀏覽頁(yè)面時(shí)，有時(shí)當(dāng)把鼠標(biāo)指針懸浮到超鏈接上面時(shí)，會(huì)發(fā)現(xiàn)換了一張背景圖片，和精靈圖很像。本案例是給超鏈接設(shè)置一張大的背景，通過(guò)background-position來(lái)定位圖片位置。

【例7-9】（實(shí)例文件：ch07\Chap7.9.html）圖片交換鏈接樣式。

相關(guān)的代碼實(shí)例請(qǐng)參考Chap7.9.html文件，在IE瀏覽器中運(yùn)行的結(jié)果如圖7-14和圖7-15所示。