参考：http://www.w3school.com.cn/css/css_link.asp
- 链接的四种状态
① a:link - 普通的、未被访问的链接
② a:visited - 用户已访问的链接
③ a:hover - 鼠标指针位于链接的上方
④ a:active - 链接被点击的时刻
- 改变颜色实例
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
注意四种状态的设置顺序。
- 文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
- 背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
- 创建链接框
<!DOCTYPE html>
<html>
<head>
<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="/index.html" target="_blank">W3School</a>
</body>
</html>
效果：
