话题 首页 > HTML5教程 > HTML5教程话题列表 > 详情

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

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

去掉超链接的下划线,需要用样式表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>
裴火业呀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>
传奇人生 2016-11-11

在css样式中,把a元素写成text-decoration:none;即可

例如:

a{text-decoration:none;font-size:14px;}

桂子旭 2017-02-27

选择a标签的css,{text-decoration:none;}

一笔荒芜 2018-05-31

我也不清楚,坐等大神,火钳刘明!!!

1144100656 2018-05-31

留名留名!!!,同样的问题,看看咋结局!!!

1152696398 2018-05-31

有同样等问题咋解决,只能慢慢等大神啦.留名留名。。

海海520 2018-07-04

a :link , a :visited { text-decoration :none; /超链接无下划线/ }

a :hover { text-decoration :underline; /鼠标放上去有下划线/ }

学号:860669 2018-12-01

在css样式中写a{text-decoration:none;}

友情岁月9420 2019-06-28

a :link , a :visited { text-decoration :none; /超链接无下划线/ }

a :hover { text-decoration :underline; /鼠标放上去有下划线/ }

这个不错

要回复,请先登录 或者注册
二维码
建议反馈
二维码