CSS样式表基础(九)
13、CSS 链接
链接的四种状态:
- a:link —— 普通的、未被访问的链接
- a:visited —— 用户已访问的链接
- a:hover —— 鼠标指针位于链接的上方
- a:active —— 链接被点击的时刻
当为链接的不同状态设置样式时,请按照以下次序规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
例:
<html>
<head>
<style>
a:link { color: #f00; text-decoration: none; }
a:hover { color: #f0f; text-decoration: underline; }
a:visited { color: #0f0; }
a:active { color: #00f; }
</style>
</head>
<body>
<a href="www.baidu.com" target="_blank">这是一个链接。</a>
</body>
</html>a:link { color: #f00; text-decoration: none; }:颜色设为红色#f00,故刚生成网页时链接就是红色的,“text-decoration: none;”表示无下划线。
a:hover { color: #f0f; text-decoration: underline; }:当鼠标放置在链接上,链接颜色设为粉色#f0f,“text-decoration: underline;”表示有下划线。
a:visited { color: #0f0; }:访问过(已经点击过的)链接颜色为绿色#0f0。
a:active { color: #00f; }正在点击链接的那一时刻,链接变成蓝色#00f。
九号公司成长空间 1人发布