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

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>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页