如何用css为超链接设置不同样式

如何用css为超链接设置不同样式

css设置超链接的样式可以使用伪类来实现，使用link来设置正常链接的样式，visited设置访问过的链接样式，hover设置鼠标悬浮时的样式，active设置鼠标点击时的样式。

（推荐学习：CSS视频教程）

比如

<style type="text/css"> 
a.topcs:link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
}
a.topcs:visited {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
}
a.topcs:hover {
    font-size: 12px;
    color: #FF0000;
    text-decoration: none;
}
a.news:link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
}
a.news:visited {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
}
a.news:hover {
    font-size: 12px;
    color: #FF0000;
    text-decoration: none;
}
</style>

调用：

 <a href="1.html" class="news">1</a>
 <a href="2.html" class="topcs">1</a>

效果：

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

以上就是如何用css为超链接设置不同样式的详细内容，更多请关注html中文网其它相关文章！