web前端学习（十六）——CSS3链接属性（a:XXX）的相关设置

★★光亭★★

已于 2024-04-24 11:25:11 修改

阅读量9k

点赞数 2

分类专栏： # 【HTML+CSS+JavaScript】文章标签：前端学习 css3

于 2021-01-25 13:22:09 首次发布

本文链接：https://blog.csdn.net/weixin_43823808/article/details/113108370

版权

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章 56 订阅

订阅专栏

1.CSS链接

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

2.a:link、a:visited、a:hover、a:active属性

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

以下的这些实例，只是放上一张大概的截图，至于这个链接的四种属性特征均已在代码中实现，大家可以自行在编辑器中运行查看结果。

实例一：（链接的字体颜色）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			a:link {color: #000000;}/*未访问时，链接的样式*/
			a:visited {color: #0000FF;}/*访问过之后，链接的样式*/
			a:hover {color: #FF0000;}/*鼠标放在链接上，链接的样式*/
			a:active {color: #7FFF00;}/*鼠标点击链接不松，链接的样式*/
		</style>
	</head>
	
	<body>
		<p>
			<b><a href="https://www.jd.com" target="_blank">这是一个链接</a></b>
		</p>
		<p>
			<b>注意：</b>
			a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br />
			<b>注意：</b>
			a:active 必须设置在 a:hover 之后。
		</p>
	</body>
</html>

实例二：（链接的文本修饰）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			a:link {text-decoration: none;}/*设置链接的文本修饰，默认没有下划线*/
			a:visited {text-decoration: none;}
			a:hover {text-decoration: underline;}/*鼠标移动到链接上、点击链接时，显示下划线*/
			a:active {text-decoration: underline;}
		</style>
	</head>
	
	<body>
		<p>
			<b><a href="https://www.jd.com" target="_blank">这是一个链接</a></b>
		</p>
		<p>
			<b>注意：</b>
			a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br />
			<b>注意：</b>
			a:active 必须设置在 a:hover 之后。
		</p>
	</body>
</html>

实例三：（链接的背景颜色）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			a:link {background-color: #00FFFF;}
			a:visited {background-color: #0000FF;}
			a:hover {background-color: #FF0000;}
			a:active {background-color: #8A2BE2}
		</style>
	</head>
	
	<body>
		<p>
			<b><a href="https://www.1688.com" target="_blank">这是一个链接</a></b>
		</p>
		<p>
			<b>注意：</b>
			a:hover 必须设置在 a:link 和 a:visited 之后，只有严格排序才可以看到效果。<br />
			<b>注意：</b>
			a:active 必须设置在 a:hover 之后。
		</p>
	</body>
</html>

实例四：（设置多种样式的链接）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			a.one:link {color: #0000FF;}
			a.one:visited {color: #FF0000;}
			a.one:hover {color: #8A2BE2;}
			
			a.two:link {color: #0000FF;}
			a.two:visited {color: #FF0000;}
			a.two:hover {font-size: 36px;}
			
			a.three:link {color: #0000FF;}
			a.three:visited {color: #FF0000;}
			a.three:hover {background-color: #8A2BE2;}
			
			a.four:link {color: #0000FF;}
			a.four:visited {color: #FF0000;}
			a.four:hover {font-family: "楷体", serif;}
			
			a.five:link {color: #0000FF; text-decoration: none;}
			a.five:visited {color: #FF0000; text-decoration: none;}
			a.five:hover {text-decoration: underline;}
		</style>
	</head>
	
	<body>
		<p><b><a class="one" href="https://www.huawei.com" target="_blank">这个链接改变字体颜色</a></b></p>
		<p><b><a class="two" href="https://www.mi.com" target="_blank">这个链接改变字体大小</a></b></p>
		<p><b><a class="three" href="https://www.heytap.com" target="_blank">这个链接改变背景颜色</a></b></p>
		<p><b><a class="four" href="https://shop.vivo.com.cn" target="_blank">这个链接改变字体类型</a></b></p>
		<p><b><a class="five" href="https://www.tmall.com" target="_blank">这个链接改变文字修饰</a></b></p>
	</body>
</html>