在HTML代碼中如何把超鏈接(標(biāo)簽 a)的下劃線去掉？

精華

小魚愛豬 2016-11-02 10:21:41 瀏覽(56360) 回復(fù)(10) 贊(0)

去掉[超鏈接](http://o2fo.com/html/html-links.html)的下劃線，需要用樣式表[CSS](http://o2fo.com/css)來控制嗎？

標(biāo)簽： html html5 css css3

回答(10)

裴火業(yè)呀666 精華 2016-11-02

在HTML代碼中把超鏈接(標(biāo)簽 a)的下劃線去掉的方法有很多

一、用CSS語(yǔ)法來控制超鏈接的形式、顏色變化

在源代碼的<head>和</head>之間加上如下的CSS語(yǔ)法控制：

<style type="text/css">
　　 <!--
　　 a:link { text-decoration: none;color: blue}
　　 a:active { text-decoration:blink}
　　 a:hover { text-decoration:underline;color: red} 
　　 a:visited { text-decoration: none;color: green}
　　 -－> 
</style>

其中：

a:link 指正常的未被訪問過的鏈接；
a:active 指正在點(diǎn)的鏈接；
a:hover 指鼠標(biāo)在鏈接上；
a:visited 指已經(jīng)訪問過的鏈接；
text-decoration是文字修飾效果的意思；
none參數(shù)表示超鏈接文字不顯示下劃線；
underline參數(shù)表示超鏈接的文字有下劃線

同樣，如果講none替換成overline則給超鏈接文字加上下劃線，換成line-through給超鏈接文字加上刪除線，blink則使文字在閃爍。

上面的鏈接效果為：未被點(diǎn)擊時(shí)超鏈接文字無下劃線，顯示為藍(lán)色；當(dāng)鼠標(biāo)在鏈接上時(shí)有下劃線，鏈接文字顯示為紅色；當(dāng)點(diǎn)擊鏈接后，鏈接無下劃線，顯示為綠色。

詳情可在W3Cschool首頁(yè)找到《CSS教程》參考其中的CSS 鏈接(link) http://o2fo.com/css/css-link.html

二、如何一次性去掉超鏈接下劃線



<html> 
<head> 
<style>a{TEXT-DECORATION:none}</style> 
</head><body>

僅僅在<head>與</head>中間加入<style>a{ TEXT-DECORATION:none }</style>這一句就去掉超鏈接下劃線了（找到<head>和</head>這兩句，樣式表語(yǔ)句就加在它們中間。）

三、有的超鏈接需要下劃線，有的不需要，該怎么辦

如果大部分超鏈接不要下劃線，就可以加入 <style> a{ TEXT-DECORATION:none }</style>這一句，然后在少數(shù)要下劃線的超鏈接里使用這個(gè)方法，它就有下劃線了： <a href=****><u>文字</a>。 ·如果大部分超鏈接都要下劃線，就可以不要加入前面提到的這句。把它改為：<style>.n{ TEXT-DECORATION:none }</style>，注意：n前面有個(gè)點(diǎn)，它表示類選擇符，然后在網(wǎng)頁(yè)的超鏈接當(dāng)中可以多次引用，就可單獨(dú)去掉個(gè)別超鏈接了，例如：

<a class=n href=http://o2fo.com>W3Cschool編程入門教程</a> 
<a class=n href=http://123.w3cschool.cn>W3Cschool極客導(dǎo)航</a> 
<a class=n href=http://wiki.w3cschool.cn>W3Cschool編程百科</a>

3 0 分享 0 舉報(bào)

裴火業(yè)呀666 精華 2016-11-02

四、如何讓超鏈接去掉下劃線，鼠標(biāo)停留在上面時(shí)有下劃線？

可以在<head>與</head>之間加上這樣一句：<style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>說明：a表示超鏈接，a:hover在樣式表里屬于偽類，表示鼠標(biāo)懸停時(shí)候的狀態(tài)。確定你的網(wǎng)頁(yè)大部分超鏈接需要哪種效果。如下代碼：

<style type="text/css"> 
a:link,a:visited{ 
 text-decoration:none;  /*超鏈接無下劃線*/ 
} 
a:hover{ 
 text-decoration:underline;  /*鼠標(biāo)放上去有下劃線*/ 
} 
</style> 
<a href="#">超鏈接</a>