您的位置：首页 > Web前端 > CSS

【学习】css之链接在不同状态下显示不同颜色

2015-04-19 19:15 323 查看

1.CSS对于链接有四种状态，分别为：

a:link 未被点击前的状态

a:visited 已被点击后的状态

a:hover 鼠标放置与链接上时的状态

a:active 鼠标点击时的状态

分别对几种状态进行设置则可以完成不同状态时的显示效果（通常为颜色效果）

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
<a href="www.baidu.com">百度</a>
</html>

css代码

a:link{
color:#FF0000
text-decoration:none
 }
 a:visited{
color:#00FF00
}
a:hover{
color:#0000FF
}
a:active{
color:#0000FF
}

如此实现的效果为未被点击时为红色，

已经点击后则显示绿色；

鼠标放上去和点击时则显示为蓝色；

并且text-decoration:none为将链接的下划线去掉不显示；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航