從易用性和可訪(fǎng)問(wèn)性的角度分析，通過(guò)顏色之外的某些方式讓鏈接區別于其他內容是很重要的。這是因為有視覺(jué)障礙的人很難區分對比不強烈的顏色，尤其是在文本比較小的情況下。例如，有色盲癥的人無(wú)法區分具有相似亮度或飽和度的某些顏色。因此，網(wǎng)頁(yè)設計時(shí)鏈接在默認情況下會(huì )加上下劃線(xiàn)。

在網(wǎng)站建設時(shí)，下劃線(xiàn)會(huì )讓頁(yè)面看上去比較亂。如果決定去掉鏈接的下劃線(xiàn)，那么可以讓鏈接顯示為粗體。這樣頁(yè)面看起來(lái)沒(méi)那么亂，而鏈接仍然醒目。

a:link, a:visited{    

text-decoration:none;    

font-weight:bold;}

當鼠標停留在鏈接上或激活鏈接時(shí)，可以重新應用下劃線(xiàn)，從而增強其交互狀態(tài)。a:hover, a:active{    text-decoration:underline;}也可以使用邊框創(chuàng )建不太影響美觀(guān)的下劃線(xiàn)。

【示例】在下面示例中，取消默認的下劃線(xiàn)，將它替換為不太刺眼的點(diǎn)線(xiàn)。當鼠標停留在鏈接上或激活鏈接時(shí)，這條線(xiàn)變成實(shí)線(xiàn)，從而為用戶(hù)提供視覺(jué)反饋。

a:link, a:visited{    

text-decoration: none;    

border-bottom: 1px dotted #000;}a:hover,a:active{    border-bottom-style:solid;}

通過(guò)使用圖像創(chuàng )建鏈接下劃線(xiàn)，可以產(chǎn)生非常有意思的效果。例如，創(chuàng )建了一個(gè)非常簡(jiǎn)單的下劃線(xiàn)圖像，它由點(diǎn)線(xiàn)組成，可以使用以下代碼將這個(gè)圖像應用于鏈接。

a:link, a:visited{color:#f00;font-weight:bold;    

text-decoration: none;    

background:url(images/dashed1.gif) left bottom repeat-x;}

這種方式并不限于link和visited樣式。在下面示例中，為hover和active狀態(tài)創(chuàng )建了一個(gè)動(dòng)畫(huà)GIF，然后使用以下CSS應用它。

a:hover, a:active{    background-image:url(images/underline1-hovez.gif);

當鼠標停留在鏈接上或單擊鏈接時(shí)，點(diǎn)線(xiàn)從左到右滾動(dòng)出現，這就產(chǎn)生了一種有意思的效果。并非所有瀏覽器都支持背景圖像動(dòng)畫(huà)，但是不支持這個(gè)特性的瀏覽器常常會(huì )顯示動(dòng)畫(huà)的第一幀，這確保效果在老式瀏覽器中可以平穩退化。當然使用動(dòng)畫(huà)要小心，因為它會(huì )對某些用戶(hù)造成可訪(fǎng)問(wèn)性問(wèn)題。

設置鏈接類(lèi)型標識

在很多網(wǎng)站中，很難看出鏈接是指向網(wǎng)站中另一個(gè)頁(yè)面，還是指向另一個(gè)站點(diǎn)。為了解決這個(gè)問(wèn)題，在網(wǎng)頁(yè)設計時(shí)，許多站點(diǎn)在新窗口中打開(kāi)外部鏈接。但是，這不是好辦法，最好的解決方案是讓外部鏈接看起來(lái)不一樣，讓用戶(hù)自己選擇是離開(kāi)當前站點(diǎn)，還是在新窗口或新的標簽頁(yè)中打開(kāi)這個(gè)鏈接。

在制作網(wǎng)頁(yè)時(shí)，可以在外部鏈接旁邊加一個(gè)小圖標，而且對于離站鏈接的圖標已經(jīng)出現了一種約定：一個(gè)框加一個(gè)箭頭。實(shí)現這種效果最容易的方法是在所有外部鏈接上加一個(gè)類(lèi)，然后將圖標作為背景圖像應用。

【示例】在下面的示例中，給鏈接設置少量的右填充，從而給圖標留出空間，然后將圖標作為背景圖像應用于鏈接的右上角。

.external{    background：url(images/externalLink.gif) no-repeat right top;    

padding-right:l0px;}

盡管這個(gè)方法是有效的，但是它不太優(yōu)雅，因為必須手工地在每個(gè)外部鏈接上添加類(lèi)。有辦法讓CSS判斷鏈接是否是外部鏈接嗎？實(shí)際上，確實(shí)有辦法，這就是使用屬性選擇器。

屬性選擇器允許根據特定屬性是否存在或屬性值來(lái)尋找元素。CSS3擴展了它的功能，提供了子字符串匹配屬性選擇器。顧名思義，這些選擇器允許通過(guò)對屬性值的一部分和指定的文本進(jìn)行匹配來(lái)尋找元素。CSS3還沒(méi)有成為正式的規范，所以使用這些高級選擇器可能會(huì )使代碼失效。但是，許多符合標準的瀏覽器（如Firefox和Safad）已經(jīng)支持這些CSS3選擇器了，所以從最終規范中去掉它們的可能性是很小的。這種技術(shù)的工作方式是使用[att^=val]屬性選擇器尋找以文本http:開(kāi)頭的所有鏈接。

a[href^="http:"] {    background: url(images/externalLink.gif) no-repeat right top;    

padding-right: 10px;}

這應該會(huì )突出顯示所有外部鏈接。但是也會(huì )選中使用絕對URL而不是相對URL的內部鏈接。為了避免這個(gè)問(wèn)題，需要重新設置指向網(wǎng)站內部的所有鏈接，刪除它們的外部鏈接圖標。方法是匹配指向自己網(wǎng)站域名的鏈接，刪除外部鏈接圖標，重新設置右填充。

a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"]{    background-image:none;    

padding-right: 0;}

大多數符合標準的瀏覽器都支持這種技術(shù)，而老式瀏覽器（如IE 6及更低版本）會(huì )忽略它。還可以擴展這種技術(shù)，如對郵件鏈接也進(jìn)行突出顯示。在下面的示例中，在所有mailto鏈接上添加一個(gè)小的郵件圖標。

a[href^="mailto:"] {     background: url(images/email.png) no-repeat right top;     

padding-right: l0px;}

甚至可以突出顯示非標準的協(xié)議，如用小的圖標突出顯示。

a[href^="aim:"] {        background: url(images/im.png) no-repeat right top;        

padding-right: l0px;}<a href="aim:goim?screenname=andybudd">鏈接內容</a>

突出顯示可下載的文檔和提要另一種不好的常見(jiàn)情況是，單擊一個(gè)鏈接，本以為會(huì )進(jìn)入另一個(gè)頁(yè)面，卻開(kāi)始下載一個(gè)PDF或Word文檔。幸運的是，CSS也可以幫助區分這些類(lèi)型的鏈接。這要使用[att$=val]屬性選擇器，它尋找以特定值（如.pdf或.doc）結尾的屬性。

a[href$=".pdf"] {    background: url(images/PdfLink.gif) no-repeat right top;   

padding-right: l0px;}a[href$=".doc"]{    background: url(images/wordLink.gif) no-repeat right top;    

padding-right: l0px;}

采用與前面示例相似的方式，可以用不同的圖標突出顯示W(wǎng)ord和PDF文檔。這樣訪(fǎng)問(wèn)者就知道它們是文檔下載，而不是鏈接到另一個(gè)頁(yè)面的鏈接。為了避免可能發(fā)生的混淆，讀者還可以通過(guò)類(lèi)似的方法用RSS圖標突出顯示鏈接的RSS提要。

a[href$=".rss"], a[href$=".rdf"] {    background: url(images/feedLink.gif) no-repeat right top;   

padding-right: l0px;}

通過(guò)提醒用戶(hù)注意離站鏈接或可下載的文檔，讓他們明確地了解在單擊鏈接時(shí)會(huì )發(fā)生的情況，避免了不必要的取消操作和煩惱。