CSS链接属性：为链接设置样式
CSS 链接
我们能够以不同的方法为链接设置样式。
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
实例
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：
背景色
background-color 属性规定链接的背景色：
更多链接样式
高级 - 创建链接框
我们能够以不同的方法为链接设置样式。
能够设置链接样式的 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 之后
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
背景色
background-color 属性规定链接的背景色：
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.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: "微软雅黑";}
a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>
<p><b><a class="one" href="#">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="#">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="#">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="#">这个链接改变字体</a></b></p>
<p><b><a class="five" href="#">这个链接改变文本的装饰</a></b></p>
</body>
</html>
高级 - 创建链接框
<!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="http://www.hulumiao.cn/" target="_blank">HuluMiao</a>
</body>
</html>
注释：本实例演示了更高级的示例，结合了若干种 CSS 属性，来把链接显示为方框。 2016-07-27 2066人浏览
评论