CSS链接设置

最新推荐文章于 2021-12-09 16:12:10 发布

HZS_Song

最新推荐文章于 2021-12-09 16:12:10 发布

阅读量382

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41696334/article/details/104248528

版权

CSS链接设置

我们能够以不同的方式为链接设置样式。

设置连接的样式

能够设置链接样式的css属性有很多种（列如color，font-family，background等等）。
链接的特殊性在于能够根据他们所处的状态来设置它们的样式
链接的四种状态
- a:link - 普通的，未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻

a:link {
	color:#FF0000;/* 未被访问的链接 */
}	

a:visited {
	color:#00FF00;/* 已被访问的链接 */
}	

a:hover {
	color:#FF00FF;/* 鼠标指针移动到链接上*/
}
	
a:active {
	color:#0000FF;/* 正在被点击的链接 */
}

当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover必需位于a:link和a:visited之后
- a:active必需位于a:hover之后

常见的链接样式

文本修饰

text-decoration属性大多数用于去掉链接中的下划线：

a:link {
	text-decoration:none;
}

a:visited {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a:active {
	text-decoration:underline;
}

背景色

background-color属性规定链接的背景颜色

a:link {
	background-color:#B2FF99;
}

a:visited {
	background-color:#FFFF85;
}

a:hover {
	background-color:#FF704D;
}

a:active {
	background-color:#FF704D;
}

DEMO

<!DOCTYPE html>
<html>
	<head>
		<style>
			a:link,a:visited{
				display:block;
				font-weight:bold;
				font-size:14px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				color:#FFFFFF;
				background-color:#98bf21;
				width:120px;
				text-align:center;
				padding:4px;
				text-decoration:none;
			}

			a:hover,a:active{
				background-color:#7A991A;
			}
		</style>
	</head>
	<body>
		<a href="/index.html" target="_blank">武汉 加油！</a>
	</body>
</html>

👇运行结果👇

HZS_Song

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS链接设置

CSS链接设置我们能够以不同的方式为链接设置样式。设置连接的样式能够设置链接样式的css属性有很多种（列如color，font-family，background等等）。链接的特殊性在于能够根据他们所处的状态来设置它们的样式链接的四种状态a:link - 普通的，未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:activ...
复制链接

扫一扫