首页 > html > faq > 1.html css链接样式设置

1.html css链接样式设置

1 html css样式a标签属性介绍

html页面可以通过css设置a标签的属性,可以控制链接颜色和下划线.

1.1 a标签的3种状态

  • a:link 未访问的连接
  • a:hover 鼠标悬停的连接
  • a:visited 访问过的连接

1.2 html css样式设置链接颜色

  • 设置a标签默认链接样式
a {
    color: #000000;
}
  • 设置a标签鼠标悬停链接样式
a:hover {
    color: red;
}
  • 设置a标签点击过的链接样式
a:visited {
    color: #3c763d;
}

1.3 html css设置链接点击后颜色不变

css样式中color属性设置链接的颜色.可以通过这个属性设置来设置各个状态链接的颜色值.将a:link, a:hover, a:visited设置同样的颜色,可以达到点击连接后不变色的效果.color可以直接设置RGB颜色值或者颜色名. 例:

a,
a:link,
a:hover,
a:visited {
    color: red;
}

示例代码:

<html>
<body>
<style>
a,
a:link,
a:hover,
a:visited {
    color: red;
}
</style>
<a href="http://dashidan.com">大屎蛋教程网</a>
</body>
</html>

2 html css设置链接不显示下划线

通过设置css样式中a标签属性"text-decoration:none;"去掉链接下划线.设置如果想所有状态下的链接都不带下划线.需要将"a,a:link,a:hover,a:visited"这四个状态都设置.示例代码:

<body>
<style>
a,
a:link,
a:hover,
a:visited {
    text-decoration: none;
}
</style>
<a href="http://dashidan.com">大屎蛋教程网</a>
</body>
转载请保留原文链接.