去掉a标签的下划线

html-css027

去掉a标签的下划线,第1张

a标签是超链接,它会有下划线。下面,我们来看看如何去掉a标签的下划线吧。

代码,可以看到链接下方有下划线,如下图所示:

<a href="https://www.sogou.com/">souGo</a>

写一个样式表,如下图所示:

<style type="text/css"></style>

然后写超链接样式,如下图所示:

<style type="text/css">

a{

text-decoration:none

}

</style>

显示结果

结果看到超链接下划线已经去掉了,如下图所示:

总代码:

<html>

<body>

<head>

<style type="text/css">

a{

text-decoration:none;

}

</style>

<a href="https://www.sogou.com/">souGo</a>

</head>

</body>

</html>

一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:

总: a 表示所有状态下的连接 如 a{color:red}

① a:link:未访问链接 ,如 a:link {color:blue}

② a:visited:已访问链接 ,如 a:visited{color:blue}

③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:active{color:blue}

④ a:hover:鼠标移到链接上时 ,如 a:hover {color:blue}

亲,超链接(也就是<a></a>标签)默认会在在元素下面显示一条下划线,要取消下划线,可以设置a标签的css属性text-decoration为none就可以去掉下划线了:比如

<style>

#aA{

text-decoration:none

}

</style>

<a href='javascript' id='aA'>不显示下划线</a>