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

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

a:link, a:visited{    

text-decoration:none;    

font-weight:bold;}

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

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

a:link, a:visited{    

text-decoration: none;    

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

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

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)畫GIF，然后使用以下CSS應(yīng)用它。

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

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

設(shè)置鏈接類型標(biāo)識(shí)

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

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

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

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

padding-right:l0px;}

盡管這個(gè)方法是有效的，但是它不太優(yōu)雅，因?yàn)楸仨毷止さ卦诿總€(gè)外部鏈接上添加類。有辦法讓CSS判斷鏈接是否是外部鏈接嗎？實(shí)際上，確實(shí)有辦法，這就是使用屬性選擇器。

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

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

padding-right: 10px;}

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

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

padding-right: 0;}

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

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

padding-right: l0px;}

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

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

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

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

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;}

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

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

padding-right: l0px;}

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