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

最新推荐文章于 2024-04-22 16:58:34 发布

df0128

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量2.1k

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/df0128/article/details/45131623

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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为将链接的下划线去掉不显示；

优惠劵

df0128

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【学习】css之链接在不同状态下显示不同颜色

1.CSS对于链接有四种状态，分别为： a:link 未被点击前的状态 a:visited 已被点击后的状态 a:hover 鼠标放置与链接上时的状态 a:active 鼠标点击时的状态分别对几种状态进行设置则可以完成不同状态时的显示效果（通常为颜色效果）html代码：
复制链接

扫一扫