如何用CSS为链接设置不同样式-小驴中国内参

链接可以看作是一个文本，在网页设计中，运营不同的链接样式可以做出更美观与符合用户体验的效果，如果看作一个互动的模块，那么在访客的不同点击状态下也是不同的样式，下面，小驴中国前端开发网就跟大家分享一下如何用CSS为链接设置不同样式。感谢小驴中国官网提供CSS样式链接学习教程：donkeychina.com

1、链接样式。

对于链接来说，我们可以为这些链接设置不同的样式。

普通的链接样式：

a:link {color:#FF0000;}

访问过的链接样式：

a:visited {color:#00FF00;}

2、链接样式互动。

在实际的使用当中，我们可以让链接与鼠标互动起来。

a:hover {color:#FF00FF;}

当鼠标移动到链接上面的时候，这个链接样式就有了改变。

a:active {color:#0000FF;}

这是链接被点击了之后的新样式。

3、创建复杂链接框。

我们的网页上的链接有时是以一个漂亮 的链接框的形式出现。我们可以详细的定义一下。字体、形状、外框、边距、对齐

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

实例代码：

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A991A;

}

小驴中国

运行效果：

4、其他链接样式。

我们对于链接在点击前后的样式的改变，不仅仅局限于颜色，它也可以在文本上作一些变化，比如下划线。CSS链接样式 www.donkeychina.com

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

链接在点击后它的背景色发生变化。

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}