在之前的HTML学习中我们知道超链接标签<a>，对于超链接反映给客户端的肯定不只是单一的一行字的链接，小编这篇文章就来先说一下CSS对超链接的美化功能。
1.伪类
在介绍操作前先说一个概念，伪类：根据用户不同状态会有不同的样式，<a>标签就是一个很好的伪类例子，客户端在触碰超链接时当然有交互才会更加美观，这里CSS对超链接的美化实现了相应功能。超链接有自己的伪类表述不具有继承性。
本次以一个导航条的例子来描述介绍超链接美化
2.CSS中a标签4种特有属性
1.a:link （加入样式后表示：在某超链接未被访问时的样式）
2.a:visited （加入样式后表示：在被访问后刷新界面超链接的样式）
3.a:hover （加入样式后表示：在鼠标悬停时超链接的样式）
4.a:active （加入样式后表示：在鼠标点击的那一瞬间超链接的样式）
需要注意的是这4种表述在描述时可以不全写但绝不能有顺序的颠倒（就是说可以有的不表述根据需要但是不能串位把后面的属性写到前面人的前面）
3.例子实践举例
假如现在我们需要做一个导航条
并在鼠标触碰时会有这样的交互效果
代码如下
<style type="text/css">
*{
margin:0;
padding:0; //清除页面原有的边距
}
.nva{
width:960px;
height:50px;
margin:100px auto; //该步只是为了让盒子在屏幕中居中方便观看
border:1px solid red;
}//定义主盒子框架
ul{
list-style:none;
} //去除li标签前小圆点
div ul li{
float:left;
height:50px;
width:120px;
text-align:center;
line-height: 50px;
} //使li标签左浮动并且在盒子中居中
div ul li a{
display:block; //让a标签转换为块级元素
width:120px;
height:50px;
}
div ul li a:link,div ul li a:visited{
text-decoration:none; //去除下划线
background-color: purple;
color:white;
} //这边因为想点击前后一样所以放在一起写
div ul li a:hover{
background-color: orange;
} //鼠标悬停时背景颜色变橙
</style>
<body>
<div class="nva">
<ul>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
<li><a href="#">网址导航</a></li>
</ul>
</div>
</body>这样就实现了对超链接标签的美化效果
补充：在link和visited一样时可以直接将样式写到对a的描述中去这样可以省略代码。