一、CSS 链接
1.链接的CSS属性：
**1、color**
**2、 font-family**
**3、 background**
2.链接的四种状态：
**1、a:link - 普通的、未被访问的链接**
**2、a:visited - 用户已访问的链接**
**3、a:hover - 鼠标指针位于链接的上方**
**4、a:active - 链接被点击的时刻**
注意：
**1、a:hover 必须位于 a:link 和 a:visited 之后**
**2、a:active 必须位于 a:hover 之后**
二、CSS 链接样式
(1)链接的四种状态
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
注意：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
-->
<html>
<head>
<meta charset="UTF-8">
<title>链接的四种状态</title>
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com/" target="_blank">百度一下</a></b></p>
<p><b>注释：</b>a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>a:active 必须位于 a:hover 之后！！</p>
</body>
</body>
</html>
(2) 链接背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接背景色</title>
<style>
a:link {background-color:#B2FF99;} /* 未被访问的链接 */
a:visited {background-color:#FFFF85;} /* 已被访问的链接 */
a:hover {background-color:#FF704D;} /* 鼠标指针移动到链接上 */
a:active {background-color:#FF704D;} /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com/" target="_blank">百度一下</a></b></p>
<p><b>注释：</b>a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>a:active 必须位于 a:hover 之后！！</p>
</body>
</html>
(3) 文本修饰
①取出下划线
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：
-->
<html>
<head>
<meta charset="UTF-8">
<title>链接文本修饰</title>
<style>
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="http://www.baidu.com/" target="_blank">百度一下</a></b></p>
<p><b>注释：</b>a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>a:active 必须位于 a:hover 之后！！</p>
</body>
</html>
② 文字格式
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：文本修饰
-->
<html>
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<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="http://www.baidu.com/" target="_blank">百度一下</a>
</body>
</html>
网友评论