css超链接样式
原创
一、超链接伪类简介
在所有浏览器中，超链接的样式如下：
我们可以看出链接在鼠标点击不同时期的样式是不一样的。
（1）默认情况：字体为蓝色，带有下划线；
（2）鼠标点击时：字体为红色，带有下划线；
（3）鼠标点击后：字体为紫色，带有下划线；
注：点击时，指的是点击超链接的一瞬间，字体是红色的。这个样式变化是一瞬间的事情。
1、如何去除超链接下划线
超链接默认情况下带有下划线，看起来挺难看的，而且用户体验也不好。在CSS中，一般使用“text-decoration:none”来去除超链接下划线，我们在“下划线、删除线和顶划线”这一节已经详细讲解了text-decoration属性。
语法：
text-decoration:none;
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>去掉超链接默认样式</title>
<style type="text/css">
.a2{text-decoration:none;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" class="a1">绿叶学习网</a><br/>
<a href="http://www.lvyestudy.com" class="a2">绿叶学习网</a>
</body>
</html>在浏览器预览效果如下：
分析：
由于第二个a标签应用了“text-decoration:none”，因此它的下划线被去掉了。
2、如何定义超链接伪类
在CSS中，我们使用超链接伪类来定义超链接在不同时期的不同样式。
语法：
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}说明：
表1 使用伪类定义动态超链接
属性 说明
a:link 定义a元素未访问时的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过显示的样式
a:active 定义鼠标单击激活时的样式定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变！
大家可能觉得比较难把这个样式顺序记忆。没关系，对于掌握俺有一个挺好的方法。“love hate”，看到了么，这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”，自然而然就写出来了。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;font-size:18px;}
a:link{color:white}
a:visited{color: purple; }
a:hover{color:yellow;text-decoration:underline;}
a:active{color:red;}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
在浏览器预览效果如下：
鼠标经过样式如下：
点击链接时样式如下：
注：点击链接是一瞬间的事情，大家请留意一下超链接的样式变化。
在此学习了CSS超链接伪类，我们可以使用CSS伪类向文本链接添加复杂而多样的样式。
3、深入了解超链接伪类
大家可能开始有疑问了，是不是每一个超链接都必须要定义4种状态的样式呢？答案是否定的。一般情况下，我们只用到2种状态：未访问状态和鼠标经过状态。大家仔细观察一下绿叶学习网的导航就知道了，绿叶导航也只是定义了这2种状态。
未访问状态，我们直接在a标签定义就行了，没必要使用“a:link”。
语法：
a{CSS样式}
a:hover{CSS样式}举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;color:purple}
a:hover{color:white}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
在浏览器预览效果如下：
鼠标经过时样式如下：
疑问
1、很多人觉得按照正常人思维来说，超链接样式的定义顺序应该是“未访问样式、鼠标经过样式、点击时样式、访问后样式”，但是为什么定义超链接样式必须要按照“未访问样式、访问后样式、鼠标经过样式、点击时样式”才能在浏览器中正常显示这4种样式呢？
这个问题是新手经常问到的问题，其实这是W3C官方规定的，也许官方的思维跟我们的不一样。规则这种东西嘛，一般都是官方定的，就像交通规则一样，我们只需要遵守就行了，没必要纠结为什么绿灯走而红灯停。
不过我们也有很好的记忆方法，大家不用担心。那就是“爱恨原则”。爱她，是因为超链接伪类让超链接变得更“美丽”；恨她，是因为顺序太难记。所以我们对她又爱又恨。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
