您的位置:首页 > Web前端 > CSS

CSS超链接

2016-12-13 21:52 218 查看
使用CSS可以编排超链接的样式时,需要用到CSS的伪类pseudoclass。

常用的用于
<a>
标签的公共伪类是link、visited、hover、active。

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

例如:

用户需求是

1、超链接是加粗的蓝色Times New Roman字体,并且有下划线

2、当用户把鼠标悬停于超链接上或者单击时,字体变为红色

3、当用户单击后,字体变为灰色

<style type="text/css">
a{
font-family:Times New Roman,Verdana;
<!--font-famlily设置字体系列,可以设置多个值,当用户系统上第一个字体不可用时,会尝试使用后面的字体。-->
text-decoration:underline;
}
a:link{
color:#4169E1;
}
a:hover{
color:#FF0000;}
a:visited{
color:#D3D3D3;}
</style>


<p><a href="#top">回到顶部</a></p>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: