|
去過哪里?
別忘了加上a:visited聲明,幫助使用者看出他們?cè)?jīng)去過的地方.所有一般CSS規(guī)則都能用在偽類上,為瀏覽過的鏈接指定獨(dú)特的樣式:顏色,邊框,背景等等.
CSS規(guī)則就像這樣:
a:visited {
color: purple;
}
上面這段聲明能將訪問過的鏈接的顏色改為紫色,最小限度的提醒使用者:他們已經(jīng)看過這個(gè)鏈接了,這種效果十分重要就算只像這個(gè)例子做一點(diǎn)小改動(dòng)也行.
鼠標(biāo)經(jīng)過
同樣的,我們也能使用:hover這個(gè)偽類在鼠標(biāo)滑過鏈接時(shí)加上威力無窮的效果.可以使顏色改變,加上邊線,背景顏色或圖片等等,有無窮的可能性.
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}
上面兩個(gè)聲明會(huì)把連接變成綠色,加上點(diǎn)狀邊線,但是在鼠標(biāo)移過鏈接時(shí),鏈接會(huì)變成藍(lán)色,邊線也會(huì)變成實(shí)線(同時(shí)也變成藍(lán)色).
這是個(gè)簡(jiǎn)單的示例,只要試著組合不同的CSS規(guī)則應(yīng)用在連接,鼠標(biāo)移動(dòng)效果上,你不必用上javascript或是額外的標(biāo)簽也能設(shè)計(jì)出輕巧的鼠標(biāo)滑過效果.
啟動(dòng)狀態(tài)
:active 這個(gè)偽類代表的是鼠標(biāo)按鍵按下時(shí)鏈接的樣式.你能在此使用相同的規(guī)則:改變顏色,文字裝飾,背景等等,舉例來說,如果你讓鏈接在點(diǎn)擊時(shí)變成紅色,就能以視覺提醒使用者:他們選擇前往這個(gè)特定的頁面,而且也實(shí)際點(diǎn)擊了這個(gè)鏈接.
以下的聲明能夠辦到這件事:
a:active {
color: red;
}
令人又愛又恨的鏈接(LoVe/HAte)
為了讓之前提到的四個(gè)偽類能正常運(yùn)作,排列的順序變得十分重要,以防他們的設(shè)定值彼此覆蓋.
LoVe / HAte 是個(gè)記住正確聲明順序的口訣(http://www.mezzoblue.com/css/cribsheet/):
a:link (L)
a:visited (V)
a:hover (H)
a:active (A)
當(dāng)然,你可以自創(chuàng)口訣,只要能幫助記憶就行, Love Vegetables? Have Asparagus! (愛吃素菜嗎?來點(diǎn)蘆筍吧)
作為示例,以下是四個(gè)先前的例子,依照正確的順序組合成完整套件結(jié)果:
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:visited {
color: purple;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}
a:active {
color: red;
}
起錨
在我們開始航向下個(gè)章節(jié)前,讓我們回顧一下本章討論過的內(nèi)容.我們觀察了在頁面上建立錨點(diǎn)的四種不同方式,而我們認(rèn)為后兩種比較好.現(xiàn)在你已經(jīng)具備足夠的知識(shí),能根據(jù)讀者群的差異,為下一個(gè)項(xiàng)目選擇合適的方法.
接著我們討論title屬性,以及它能如何提供額外的鏈接信息給使用者,提升易用性,視覺讀者和失明的聆聽者都能夠獲得title屬性所帶來的好處.
最后,我們探討使用css的偽類為鏈接加上樣式的方法.只要你有充足的想象力,再為四個(gè)不同鏈接狀態(tài)加上一些聲明,不必用上javascript與多余的標(biāo)簽也能做出豐富的互動(dòng)效果.
是時(shí)候收錨揚(yáng)帆了,讓我們...抱歉,回歸正題.
下文：Chapter 8 再談清單
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2824215-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2008/5883.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——錨點(diǎn) [4] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 5 頁 標(biāo)記語言——錨點(diǎn) [5]
