CSS之——伪类选择器设置超链接样式和创建按钮式超链接(学习笔记)

一、使用CSS伪类别来设置超链接样式

链接的四种状态:

a:link             普通的,未访问的链接

a:visited:       用户已访问的链接

a:hover         鼠标指针位于链接的上方

a:active:        链接被点击的时候

二、创建按钮式超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用CSS伪类来设置超链接样式</title>
<style type="text/css">
body {
	margin: 20px;
}
a {
	font-family:Arial;
	margin:5px;
}
a:link,a:visited{
	color: #A62020;
	padding: 4px 10px;
	background-color: #DDD;
	text-decoration: none;
	border-top: 1px solid #EEE;
	border-left:1px solid #EEE;
	border-bottom: 1px solid #717171;
	border-right:1px  solid #717171;
}
a:hover{
	color:#821818;
	padding: 5px 8px 3px 12px;
	border-top: 1px solid #717171;
	border-left: 1px solid #717171;
	border-bottom: 1px solid #EEE;
	border-right:1px solid #EEE;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_39941298/article/details/81179595