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 网页上的所有文字链接在浏览器中显示时没有下划线，当你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了. 

Css代码  

1. <style type="text/css">  
2. <!--  
3. a { color: #339966; text-decoration: none}  
4. a:hover { color: #FF3300; text-decoration: underline}  
5. -->  
6. </style>  

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

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

Css代码  

1. <style type="text/css">  
2. <!--  
3. a:link { text-decoration: none;color: blue}  
4. a:active { text-decoration:blink}  
5. a:hover { text-decoration:underline;color: red}   
6. a:visited { text-decoration: none;color: green}  
7. -->  
8. </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 设置多色样式 

Css代码  

1. <style type="text/css">  
2. <!--  
3.     a#example1a {  
4.     　　  text-decoration: none;  
5.     　　  background: url(images/diagonal.gif) repeat-x 100% 100%;  
6.     　　  white-space: nowrap;  
7.     　　  padding-bottom: 2px;  
8. 　　  }  
9.   
10. 　　a#example1b {  
11.     　　  text-decoration: none;  
12.     　　  white-space: nowrap;  
13.     　　  padding-bottom: 2px;  
14. 　　  }  
15.   
16. 　　a#example1b:hover {  
17. 　　  background: url(images/diagonal.gif) repeat-x 100% 100%;  
18. 　　  }  
19.   
20. 　　a#example2a {  
21.     　　  text-decoration: none;  
22.     　　  background: url(images/flower.gif) repeat-x 100% 100%;  
23.     　　  white-space: nowrap;  
24.     　　  padding-bottom: 10px;  
25. 　　  }  
26.   
27. 　　a#example2b {  
28.     　　  text-decoration: none;  
29.     　　  white-space: nowrap;  
30.     　　  padding-bottom: 10px;  
31. 　　  }  
32.   
33. 　　a#example2b:hover {  
34. 　　  background: url(images/flower.gif) repeat-x 100% 100%;  
35. 　　  }  
36. -->  
37. </style>  

Html代码  

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

4定义局部样式 

Css代码  

1. <style type="text/css">  
2. <!--  
3.   
4. /*全局*/  
5. a{text-decoration:underline;} /*有下划线*/  
6. a:hover{text-decoration:none;} /*鼠标滑过无划线*/  
7.   
8. /*局部的*/  
9. a.line_none{text-decoration:none;color:#cc000;} /*line_none样式名的超链接无下划线*/  
10. a.line_none:hover{text-decoration:underline;} /*鼠标滑过出现下划线*/  
11. -->  
12. </style>  

应用示例: 

Html代码  

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