CSS超链接
2016-12-13 21:52
218 查看
使用CSS可以编排超链接的样式时,需要用到CSS的伪类pseudoclass。
常用的用于
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
例如:
用户需求是
1、超链接是加粗的蓝色Times New Roman字体,并且有下划线
2、当用户把鼠标悬停于超链接上或者单击时,字体变为红色
3、当用户单击后,字体变为灰色
常用的用于
<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>