首页 > 网页设计

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>

相关合集

  • 手机实用工具app推荐
手机实用工具app推荐

简介:手机真的就是生活中的最大的实用之处就是有多种工具相当的方便,基本上你拥有手机就拥有了多种小工具不管是在办公的时候还是生活中都是绝对的用得到的各种小工具,都是将是成为你手机必备的软件给你的各种带来很多的便利,这里有超多的软件都是很实用的有工具箱大全还有各种卓面小组件等等应用办公生活两不误。