HTML怎么设置超链接颜色？设置超链接颜色总结

猿友 2021-05-24 17:53:14 浏览数 (20967)

有细心的小伙伴可能会发现，我们在浏览网页时，不同状态下的链接显示的颜色是不一样的。比如百度，未访问时链接未深蓝色，鼠标滑到该链接时则显示为浅蓝色，当我点击该链接后，链接则变为紫色。那么 HTML 怎么设置超链接颜色？这篇文章告诉你。

定义链接样式的四个伪类：

：link，定义正常的链接样式；
：visited，定义已访问过的链接样式；
：hover，定义鼠标悬浮在链接上时的样式；
：active，定义鼠标点击链接时的样式。

让我们来看下具体如何使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML设置超链接颜色- 编程狮(w3cschool.cn)</title>
	<style type="text/css">
		a:link {
			color:pink;
			text-decoration:none;
		}
		a:visited {
			color:blue;
			text-decoration:none;
		}
		a:hover {
			color:red;
			text-decoration:none;
		}
		a:active {
			color:black;
			text-decoration:none;
		}
	</style>
</head>
<body>
<a href="https://www.w3cschool.cn/" target="_blank">w3cschool-编程狮</a>
</body>
</html>

在该例子中，原本链接显示为粉红色（pink），当鼠标覆盖在链接上时链接显示为红色（red），链接点击时为黑色（black），而访问过后的链接为蓝色。

需要注意的是，我们在定义时，需要主要他们的顺序，如果没有按照特定的顺序来设置，可能会使定义失效。定义链接的顺序为：

link、visited、hover、active。可以记为 LoVe HAte 原则。

对该功能感兴趣的同学们，可以参考上述代码自己进行练习。

以上就是文章“HTML 怎么设置超链接颜色？设置超链接颜色总结”的全部内容。想要学习更多 HTML 知识请前往 w3cschool。

推荐课程：HTML 入门微课、web 入门微课