首页 > 网页设计

CSS定义链接样式

发布时间:2010-07-17 22:50:41 来源:星知苑 作者:星之宇

a:link 定义正常链接的样式;
a:visited 定义已访问过链接的样式;
a:hover 定义鼠标悬浮在链接上时的样式;
a:active 定义鼠标点击链接时的样式。
链接定义的顺序:link visited hover active[break]

例如:
a:link {color:#FF0000;text-decoration:underline;}
a:visited {color:#00FF00;text-decoration:none;}
a:hover {color:#000000;text-decoration:none;}
a:active {color:#FFFFFF;text-decoration:none;}
示例中定义的链接颜色是红色,访问过后的链接是绿色,鼠标悬浮在链接上时是黑色,点击时的颜色是白色。

如果正常链接和已访问过的链接样式相同,鼠标悬浮和点击时的样式相同,也可以将它们合并起来定义
a:link,a:visited {color:#FF0000;text-decoration:underline;}
a:hover,a:active {color:#000000;text-decoration:none;}

定义局部链接样式
#sidebar a:link {color:#FF0000;text-decoration:underline;}
#sidebar a:visited {color:#00FF00;text-decoration:none;}
#sidebar a:hover {color:#000000;text-decoration:none;}
#sidebar a:active {color:#FFFFFF;text-decoration:none;}
调用方法:

<div id="sidebar"><a href="http://www.myxzy.com" target="_blank">星知苑</a></div> 

class的定义方法和id相同,只要将#sidebar改为.sidebar就行了。

一个一个定义
a.redlink a:link,a.redlink a:visiteid {color:#FF0000;text-decoration:none;}
a.redlink a:hover,a.redlink a:active {color:#000000;text-decoration:underline;background:#FFFFFF;}
调用方法:

<div><a class="redlink" href="http://www.myxzy.com" target="_blank">星知苑</a></div>

相关合集

  • 射击打僵尸的手机游戏
射击打僵尸的手机游戏

简介:自从生化危机的诞生以来就有着很多的关于类似打丧尸的射击游戏的不断的出生,也是相当的多的玩家最喜欢的游戏的类型相对来说是很棒的不仅是声效的那种震撼的场面,更是不缺乏那种让玩家有惊喜的惊悚等夹杂在里面的各种游戏的欢乐,小编自己也是非常的喜欢这类的游戏,这里就有很多的好玩不腻的这类游戏的推荐。