我们能够以不同的方法为链接设置样式。
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态
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:hover 必须位于a:link和 a:visited之后
a:active必须位于a:hover之后
例子:
1:向链接添加不同的样式
<head> <meta charset="UTF-8"> <title>链接</title> <style type="text/css"> a:link { color: #00FFFF; font-size: 10px; text-decoration: none; } a:visited { color: #FF0000; font-size:25px; text-decoration: underline; } a:hover { color: blue; font-size: 30px; text-decoration: underline; background-color: gray; } a:active { color: orange; font-size: 20px; text-decoration: none; background-color: purple; } </style> </head> <body> <p><b><a class="one" href="http://www/baidu.com">百度一下</a></b></p> </body>
高级 - 创建链接框
<head> <meta charset="UTF-8"> <title>链接</title> <style type="text/css"> a:link ,a:visited{ /*把标签a设置为块级元素*/ display: block; width: 120px; font-weight: bold; font-size: 14px; background-color: #98bf21; font-family: "french script mt"; color: #ffffff; 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>