在HTML代码中如何把超链接(标签 a)的下划线去掉？

精华

小鱼爱猪 2016-11-02 10:21:41 浏览(56061) 回复(10) 赞(0)

去掉[超链接](http://www.w3cschool.cn/html/html-links.html)的下划线，需要用样式表[CSS](http://www.w3cschool.cn/css)来控制吗？

标签： html html5 css css3

回答(10)

裴火业呀666 精华 2016-11-02

在HTML代码中把超链接(标签 a)的下划线去掉的方法有很多

一、用CSS语法来控制超链接的形式、颜色变化

在源代码的<head>和</head>之间加上如下的CSS语法控制：

<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 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线

同样，如果讲none替换成overline则给超链接文字加上下划线，换成line-through给超链接文字加上删除线，blink则使文字在闪烁。

上面的链接效果为：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。

详情可在W3Cschool首页找到《CSS教程》参考其中的CSS 链接(link) http://www.w3cschool.cn/css/css-link.html

二、如何一次性去掉超链接下划线



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

仅仅在<head>与</head>中间加入<style>a{ TEXT-DECORATION:none }</style>这一句就去掉超链接下划线了（找到<head>和</head>这两句，样式表语句就加在它们中间。）

三、有的超链接需要下划线，有的不需要，该怎么办

如果大部分超链接不要下划线，就可以加入 <style> a{ TEXT-DECORATION:none }</style>这一句，然后在少数要下划线的超链接里使用这个方法，它就有下划线了： <a href=****><u>文字</a>。 ·如果大部分超链接都要下划线，就可以不要加入前面提到的这句。把它改为：<style>.n{ TEXT-DECORATION:none }</style>，注意：n前面有个点，它表示类选择符，然后在网页的超链接当中可以多次引用，就可单独去掉个别超链接了，例如：

<a class=n href=http://www.w3cschool.cn>W3Cschool编程入门教程</a> 
<a class=n href=http://123.w3cschool.cn>W3Cschool极客导航</a> 
<a class=n href=http://wiki.w3cschool.cn>W3Cschool编程百科</a>

3 0 分享 0 举报

裴火业呀666 精华 2016-11-02

四、如何让超链接去掉下划线，鼠标停留在上面时有下划线？

可以在<head>与</head>之间加上这样一句：<style>a{ TEXT-DECORATION:none}a:hover{TEXT-DECORATION:underline }</style>说明：a表示超链接，a:hover在样式表里属于伪类，表示鼠标悬停时候的状态。确定你的网页大部分超链接需要哪种效果。如下代码：

<style type="text/css"> 
a:link,a:visited{ 
 text-decoration:none;  /*超链接无下划线*/ 
} 
a:hover{ 
 text-decoration:underline;  /*鼠标放上去有下划线*/ 
} 
</style> 
<a href="#">超链接</a>