如何用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>

效果:

1.jpg

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

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

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏