我的位置: 首页  >   揭秘CSS  >   6.1.1 动态超链接

6.1.1 动态超链接

编辑:比特教程网    时间:2018-10-12 16:00    


6.1 链接的样式

在HTML中,通过 a 元素来定义超链接,并通过 a 元素的 href 属性来定义链接的目标地址。

<a href = "http://www.byte.online">比特教程网</a>

默认情况下,超链接是蓝色字体并带有下划线,被访问后,链接文本会变为紫色并且也带有下划线。并且,默认的链接样式平淡无奇,通过CSS,可以设置超链接的各种属性,如字体、颜色、背景等,并结合链接伪类,便可以实现各种各样的动态链接效果。

对链接应用样式最容易,也是最简单的方式,就是使用元素选择器。如,以下规则是所有的锚文本都显示为红色,并去掉链接的下划线。

a  {
   color: red;
   text-decoration: none;
}

但是,这样定义链接之后,页面上的所有链接都变成了红色,也无法区分哪些链接是已经访问过的,哪些是没有被访问过的。

为了避免这个问题,CSS提供了链接伪类选择器,用来寻找处于不同状态的链接。:link伪类选择器寻找未被访问过的链接,:visitd 伪类选择器寻找已被访问过的链接。所以,下面代码中,所有没有被访问过的链接将是红色,所有被访问过的路径将是紫色。

a:link  {
   color: blue;
}
a:visited  {
   color: purple;
}

这时,就可以为链接应用 :hover 和 :active 这两个动态伪类选择器。:hover寻找鼠标悬停的元素,:active 寻找被激活的元素,对于链接,激活发生在鼠标已经按下、还没有释放的时候。

a:hover,  a:active  {
   color: red;
}

另外,动态伪类选择器也可以连在一起使用,以创造更丰富的样式,如定义已被访问链接的悬停效果。

a:visited:hover {
   color: #888;
}

为了尽可能提高页面的可访问性,在定义鼠标悬停状态时,最好为链接定义 :focus 伪类选择器,以便用户通过键盘移动到链接上时,链接的样式与鼠标悬停时的样式相同。:focus 伪类选择器,会寻找获得焦点的元素。

a:hover,  a:focus,  a:active  {
   color: red;
}

默认情况下,浏览器会为链接添加下划线,而人们常常习惯于去掉未访问和已访问链接的下划线,当悬停、获得焦点、激活时,再为链接添加下划线。

a:link,  a:visited {
   text-decoration: none;
}
a:hover,  a:focus,  a:active  {
   text-decoration: underline;
}

定义链接样式时,选择器的顺序非常重要,如果上面的顺序反过来,悬停和激活的样式就不起作用了。根据样式层叠规则,当两个规则具有相同的特殊性时,后定义的规则会覆盖先定义的规则,所以,a:link 和 a:visited 样式将覆盖 a:hover,a:focus,a:active 样式。

于是,为了确保不会发生这种情况,一定要按照 LVFHA 的顺序定义链接的样式,即按照link(L)、visited(V)、focus(F)、hover(H)、active(A)的书写顺序。也有人提议使用LVHFA 的顺序,这也是可行的。



上一节:6.1 链接的样式

下一节:6.1.2 按钮式链接