CSS:A标记样式

参考资料
1 巧妙利用CSS自定义网页下划线样式
http://www.west263.com/info/html/wangyezhizuo/css/20080225/40290.html
2 div css 下划线text-decoration
http://www.divcss5.com/jiqiao/j77.html
3 拒绝单调 让网页超链接拥有多姿多彩的下划线
http://www.wqxz.com/article/56/Article16486_1.htm
一 CSS代码
1 网页上的所有文字链接在浏览器中显示时没有下划线，当你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了.

<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-->
</style>

相关解释如下:
初始化页面A标记的着色(color: #000000,去下划线: text-decoration: none)
a { color: #000000; text-decoration: none}
当你把鼠标指向链接处，才会出现下划线: text-decoration: underline
a:hover { color: #FF3300; text-decoration: underline}

2未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色.

<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red} 
a:visited { text-decoration: none;color: green}
-->
</style>

相关解释如下:
text-decoration参数：
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线

<!--指正常的未被访问过的链接:文字无下划线，显示为蓝色 -->
a:link { text-decoration: none;color: blue}
<!--指正在点的链接 -->
a:active { text-decoration:blink}
<!--指鼠标在链接上: 链接文字显示为红色-->
a:hover { text-decoration:underline;color: red}
<!--指已经访问过的链接: 链接无下划线，显示为绿色-->
a:visited { text-decoration: none;color: green}

3 设置多色样式

<style type="text/css">
<!--
    a#example1a {
	　　  text-decoration: none;
	　　  background: url(images/diagonal.gif) repeat-x 100% 100%;
	　　  white-space: nowrap;
	　　  padding-bottom: 2px;
　　  }

　　a#example1b {
	　　  text-decoration: none;
	　　  white-space: nowrap;
	　　  padding-bottom: 2px;
　　  }

　　a#example1b:hover {
　　 	background: url(images/diagonal.gif) repeat-x 100% 100%;
　　  }

　　a#example2a {
	　　  text-decoration: none;
	　　  background: url(images/flower.gif) repeat-x 100% 100%;
	　　  white-space: nowrap;
	　　  padding-bottom: 10px;
　　  }

　　a#example2b {
	　　  text-decoration: none;
	　　  white-space: nowrap;
	　　  padding-bottom: 10px;
　　  }

　　a#example2b:hover {
　　  background: url(images/flower.gif) repeat-x 100% 100%;
　　  }
-->
</style>

<p>实例：</p>
<p> <a href="#" id="example1a">波纹线静态下划线</a> 
<a href="#" id="example1b">鼠标停留时出现的波纹线</a>。</p>
<p> <a href="#" id="example2a">花朵静态下划线</a> 
<a href="#" id="example2b">鼠标停留时出现的花朵下划线</a>。</p>

4定义局部样式

<style type="text/css">
<!--

/*全局*/
a{text-decoration:underline;} /*有下划线*/
a:hover{text-decoration:none;} /*鼠标滑过无划线*/

/*局部的*/
a.line_none{text-decoration:none;color:#cc000;} /*line_none样式名的超链接无下划线*/
a.line_none:hover{text-decoration:underline;} /*鼠标滑过出现下划线*/
-->
</style>

应用示例:

<a href="#">我是全局的超链接，所以有下划线</a>
</br></br>
<a href="#" class="line_none">我是局部局的超链接，我没有下划线</a>
</br></br></br></br>
<div class="none">我不是超链接，没有下划线</div>
<div class="line">我不是超链接，有下划线</div>