超链接A的样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>链接样式测试</title>
<style type="text/css">
<!--
/* 全局 */
body{ line-height:1.5; font-size:14px;}
a{ color:#2c850d; text-decoration:none;}
a:link{ color:#2c850d; text-decoration:none;}
a:visited{ color:#2c850d; text-decoration:none;}
a:hover{ color:#ff2020; text-decoration:underline;}
a:actived{ color:#2c850d; text-decoration:none;}
/* 第一种 */
.f_red a{ color:#cc0000; text-decoration:none;}
.f_red a:link{ color:#cc0000; text-decoration:none;}
.f_red a:visited{ color:#cc0000; text-decoration:none;}
.f_red a:hover{ color:#ff2020; text-decoration:underline;}
.f_red a:actived{ color:#cc0000; text-decoration:none;}
.f_black a{color:#000000; text-decoration:none;}
.f_black a:link{color:#000000; text-decoration:none;}
.f_black a:visited{color:#000000; text-decoration:none;}
.f_black a:hover{color:#999999; text-decoration:underline;}
.f_black a:actived{color:#000000; text-decoration:none;}
/* 第二种 */
a.f_orange{ color:#FF9A00; text-decoration:none;}
a.f_orange:link{ color:#FF9A00; text-decoration:none;}
a.f_orange:visited{ color:#FF9A00; text-decoration:none;}
a.f_orange:hover{ color:#cc0000; text-decoration:underline;}
a.f_orange:actived{ color:#FF9A00; text-decoration:none;}
a.f_green{color:#2c850d; text-decoration:none;}
a.f_green:link{color:#2c850d; text-decoration:none;}
a.f_green:visited{color:#2c850d; text-decoration:none;}
a.f_green:hover{color:#999999; text-decoration:underline;}
a.f_green:actived{color:#2c850d; text-decoration:none;}
/* 第三种 */
.f_blue:link{ color:#0000ff; text-decoration:none;}
.f_blue:visited{ color:#0000ff; text-decoration:none;}
.f_blue:hover{ color:#ff2020; text-decoration:underline;}
.f_blue:actived{ color:#0000ff; text-decoration:none;}
.f_black3:link{color:#000000; text-decoration:none;}
.f_black3:visited{color:#000000; text-decoration:none;}
.f_black3:hover{color:#999999; text-decoration:underline;}
.f_black3:actived{color:#000000; text-decoration:none;}
/* 第四种 */
.a f_gray:link{ color:#666666; text-decoration:none;}
.a f_gray:visited{ color:#66666; text-decoration:none;}
.a f_gray:hover{ color:#cc0000; text-decoration:underline;}
.a f_gray:actived{ color:#66666;text-decoration:none;}
-->
</style></head>
<body>
1.<a href="#">链接样式1</a><br /><br />
2.<a href="#" class="f_blue">链接样式2</a><br /><br />
3.<a href="#" class="f_black3 f_blue">链接样式3</a><br />
3.<a href="#" class="f_blue f_black3">链接样式3_2</a><br /><br />
4.<span class="f_red"><a href="#" class="f_black3 f_blue">链接样式4</a></span><br /><br />
5.<span class="f_black"><span class="f_red"><a href="#" class="f_black3 f_blue">链接样式5</a></span></span><br />
5.<span class="f_red"><span class="f_black"><a href="#" class="f_black3 f_blue">链接样式5_2</a></span></span><br /><br />
6.<span class="f_red"><span class="f_black"><a href="#" class="f_orange f_blue">链接样式6</a></span></span><br />
6.<span class="f_red"><span class="f_black"><a href="#" class="f_orange f_green">链接样式6_2</a></span></span><br />
6.<span class="f_red"><span class="f_black"><a href="#" class="f_green f_orange">链接样式6_3</a></span></span><br />
</body>
</html>
posted @ 2011-06-24 22:49  星火卓越  阅读(5673)  评论(0编辑  收藏  举报