從易用性和可訪問性的角度分析，通過顏色之外的某些方式讓鏈接區(qū)別于其他內(nèi)容是很重要的。這是因為有視覺障礙的人很難區(qū)分對比不強烈的顏色，尤其是在文本比較小的情況下。例如，有色盲癥的人無法區(qū)分具有相似亮度或飽和度的某些顏色。因此，網(wǎng)頁設計時鏈接在默認情況下會加上下劃線。
在網(wǎng)站建設時，下劃線會讓頁面看上去比較亂。如果決定去掉鏈接的下劃線，那么可以讓鏈接顯示為粗體。這樣頁面看起來沒那么亂，而鏈接仍然醒目。
a:link, a:visited{
text-decoration:none;
font-weight:bold;}
當鼠標停留在鏈接上或激活鏈接時，可以重新應用下劃線，從而增強其交互狀態(tài)。a:hover, a:active{ text-decoration:underline;}也可以使用邊框創(chuàng)建不太影響美觀的下劃線。
【示例】在下面示例中，取消默認的下劃線，將它替換為不太刺眼的點線。當鼠標停留在鏈接上或激活鏈接時，這條線變成實線，從而為用戶提供視覺反饋。
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)建了一個非常簡單的下劃線圖像，它由點線組成，可以使用以下代碼將這個圖像應用于鏈接。
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)建了一個動畫GIF，然后使用以下CSS應用它。
a:hover, a:active{ background-image:url(images/underline1-hovez.gif);
當鼠標停留在鏈接上或單擊鏈接時，點線從左到右滾動出現(xiàn)，這就產(chǎn)生了一種有意思的效果。并非所有瀏覽器都支持背景圖像動畫，但是不支持這個特性的瀏覽器常常會顯示動畫的第一幀，這確保效果在老式瀏覽器中可以平穩(wěn)退化。當然使用動畫要小心，因為它會對某些用戶造成可訪問性問題。
在很多網(wǎng)站中，很難看出鏈接是指向網(wǎng)站中另一個頁面，還是指向另一個站點。為了解決這個問題，在網(wǎng)頁設計時，許多站點在新窗口中打開外部鏈接。但是，這不是好辦法，最好的解決方案是讓外部鏈接看起來不一樣，讓用戶自己選擇是離開當前站點，還是在新窗口或新的標簽頁中打開這個鏈接。
在制作網(wǎng)頁時，可以在外部鏈接旁邊加一個小圖標，而且對于離站鏈接的圖標已經(jīng)出現(xiàn)了一種約定：一個框加一個箭頭。實現(xiàn)這種效果最容易的方法是在所有外部鏈接上加一個類，然后將圖標作為背景圖像應用。
【示例】在下面的示例中，給鏈接設置少量的右填充，從而給圖標留出空間，然后將圖標作為背景圖像應用于鏈接的右上角。
.external{ background：url(images/externalLink.gif) no-repeat right top;
padding-right:l0px;}
盡管這個方法是有效的，但是它不太優(yōu)雅，因為必須手工地在每個外部鏈接上添加類。有辦法讓CSS判斷鏈接是否是外部鏈接嗎？實際上，確實有辦法，這就是使用屬性選擇器。
屬性選擇器允許根據(jù)特定屬性是否存在或?qū)傩灾祦韺ふ以亍SS3擴展了它的功能，提供了子字符串匹配屬性選擇器。顧名思義，這些選擇器允許通過對屬性值的一部分和指定的文本進行匹配來尋找元素。CSS3還沒有成為正式的規(guī)范，所以使用這些高級選擇器可能會使代碼失效。但是，許多符合標準的瀏覽器（如Firefox和Safad）已經(jīng)支持這些CSS3選擇器了，所以從最終規(guī)范中去掉它們的可能性是很小的。這種技術的工作方式是使用[att^=val]屬性選擇器尋找以文本http:開頭的所有鏈接。
a[href^="http:"] { background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;}
這應該會突出顯示所有外部鏈接。但是也會選中使用絕對URL而不是相對URL的內(nèi)部鏈接。為了避免這個問題，需要重新設置指向網(wǎng)站內(nèi)部的所有鏈接，刪除它們的外部鏈接圖標。方法是匹配指向自己網(wǎng)站域名的鏈接，刪除外部鏈接圖標，重新設置右填充。
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"]{ background-image:none;
padding-right: 0;}
大多數(shù)符合標準的瀏覽器都支持這種技術，而老式瀏覽器（如IE 6及更低版本）會忽略它。還可以擴展這種技術，如對郵件鏈接也進行突出顯示。在下面的示例中，在所有mailto鏈接上添加一個小的郵件圖標。
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">鏈接內(nèi)容</a>
突出顯示可下載的文檔和提要另一種不好的常見情況是，單擊一個鏈接，本以為會進入另一個頁面，卻開始下載一個PDF或Word文檔。幸運的是，CSS也可以幫助區(qū)分這些類型的鏈接。這要使用[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ā)生的混淆，讀者還可以通過類似的方法用RSS圖標突出顯示鏈接的RSS提要。
a[href$=".rss"], a[href$=".rdf"] { background: url(images/feedLink.gif) no-repeat right top;
padding-right: l0px;}
通過提醒用戶注意離站鏈接或可下載的文檔，讓他們明確地了解在單擊鏈接時會發(fā)生的情況，避免了不必要的取消操作和煩惱。
當前文章標題：網(wǎng)頁設計中如何定義下劃線樣式
當前URL：http://www.gtalker.cn/news/wzzz/3076.html
上一篇：網(wǎng)頁設計時的框架合成
