日期:2014-05-17  浏览次数:20782 次

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>