網(wǎng)頁(yè)設(shè)計(jì)中如何定義下劃線(xiàn)樣式

  • 2019-08-16 11:11:14
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.iy5y368.cn

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

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

a:link, a:visited{    

text-decoration:none;    

font-weight:bold;}

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

【示例】在下面示例中,取消默認(rèn)的下劃線(xiàn),將它替換為不太刺眼的點(diǎn)線(xiàn)。當(dāng)鼠標(biāo)停留在鏈接上或激活鏈接時(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è)圖像應(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)畫(huà)GIF,然后使用以下CSS應(yīng)用它。

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

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

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

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

制作網(wǎng)頁(yè)時(shí),可以在外部鏈接旁邊加一個(gè)小圖標(biāo),而且對(duì)于離站鏈接的圖標(biāo)已經(jīng)出現(xiàn)了一種約定:一個(gè)框加一個(gè)箭頭。實(shí)現(xiàn)這種效果最容易的方法是在所有外部鏈接上加一個(gè)類(lèi),然后將圖標(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è)外部鏈接上添加類(lèi)。有辦法讓CSS判斷鏈接是否是外部鏈接嗎?實(shí)際上,確實(shí)有辦法,這就是使用屬性選擇器。

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

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

padding-right: 10px;}

這應(yīng)該會(huì)突出顯示所有外部鏈接。但是也會(huì)選中使用絕對(duì)URL而不是相對(duì)URL的內(nèi)部鏈接。為了避免這個(gè)問(wèn)題,需要重新設(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ù),如對(duì)郵件鏈接也進(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>

突出顯示可下載的文檔和提要另一種不好的常見(jiàn)情況是,單擊一個(gè)鏈接,本以為會(huì)進(jìn)入另一個(gè)頁(yè)面,卻開(kāi)始下載一個(gè)PDF或Word文檔。幸運(yùn)的是,CSS也可以幫助區(qū)分這些類(lèi)型的鏈接。這要使用[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文檔。這樣訪(fǎng)問(wèn)者就知道它們是文檔下載,而不是鏈接到另一個(gè)頁(yè)面的鏈接。為了避免可能發(fā)生的混淆,讀者還可以通過(guò)類(lèi)似的方法用RSS圖標(biāo)突出顯示鏈接的RSS提要。

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

padding-right: l0px;}

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


當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中如何定義下劃線(xiàn)樣式

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3076.html

上一篇:網(wǎng)頁(yè)設(shè)計(jì)時(shí)的框架合成

下一篇:網(wǎng)頁(yè)設(shè)計(jì)中的模擬按鈕樣式

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號(hào))