• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

7.2 超链接伪类

一、超链接伪类简介

在所有浏览器中,超链接的样式如下:

超链接样式

我们可以看出链接在鼠标点击不同时期的样式是不一样的。

  • (1)默认情况:字体为蓝色,带有下划线;
  • (2)鼠标点击时:字体为红色,带有下划线;
  • (3)鼠标点击后:字体为紫色,带有下划线;

注:点击时,指的是点击超链接的一瞬间,字体是红色的。这个样式变化是一瞬间的事情。

1、如何去除超链接下划线

超链接默认情况下带有下划线,看起来挺难看的,而且用户体验也不好。在CSS中,一般使用“text-decoration:none”来去除超链接下划线,我们在“下划线、删除线和顶划线”这一节已经详细讲解了text-decoration属性

语法:

text-decoration:none;

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>去掉超链接默认样式</title>
    <style type="text/css">
        .a2{text-decoration:none;}
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com" class="a1">绿叶学习网</a><br/>
    <a href="http://www.lvyestudy.com" class="a2">绿叶学习网</a>
</body>
</html>

在浏览器预览效果如下:

去掉超链接默认样式

分析:

由于第二个a标签应用了“text-decoration:none”,因此它的下划线被去掉了。

2、如何定义超链接伪类

在CSS中,我们使用超链接伪类来定义超链接在不同时期的不同样式。

语法:

 
    a:link{CSS样式}
    a:visited{CSS样式}
    a:hover{CSS样式}
    a:actived{CSS样式}

说明:

表1 使用伪类定义动态超链接
属性 说明
a:link 定义a元素未访问时的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过显示的样式
a:active 定义鼠标单击激活时的样式

定义这四个伪类,必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。请记住,这4种样式定义顺序不能改变!

大家可能觉得比较难把这个样式顺序记忆。没关系,对于掌握俺有一个挺好的方法。“love hate”,看到了么,这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”,自然而然就写出来了。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>超链接伪类</title>
    <style type="text/css">
        #div1
        {
            width:100px;
            height:30px;
            line-height:30px;
            border:1px solid #CCCCCC;
            text-align:center;
            background-color: #40B20F;
        }
        a{text-decoration:none;font-size:18px;}
        a:link{color:white}
        a:visited{color: purple; }
        a:hover{color:yellow;text-decoration:underline;}
        a:active{color:red;}
    </style>
</head>
<body>
    <div id="div1">
        <a href="http://www.lvyestudy.com">绿叶学习网</a>
    </div>
</body>
</html>

在浏览器预览效果如下:

超链接伪类

鼠标经过样式如下:

鼠标经过样式

点击链接时样式如下:

点击链接时样式

注:点击链接是一瞬间的事情,大家请留意一下超链接的样式变化。

在此学习了CSS超链接伪类,我们可以使用CSS伪类向文本链接添加复杂而多样的样式。

3、深入了解超链接伪类

大家可能开始有疑问了,是不是每一个超链接都必须要定义4种状态的样式呢?答案是否定的。一般情况下,我们只用到2种状态:未访问状态和鼠标经过状态。大家仔细观察一下绿叶学习网的导航就知道了,绿叶导航也只是定义了这2种状态。

未访问状态,我们直接在a标签定义就行了,没必要使用“a:link”。

语法:

 
a{CSS样式}
a:hover{CSS样式}

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>超链接伪类</title>
    <style type="text/css">
         #div1
        {
            width:100px;
            height:30px;
            line-height:30px;
            border:1px solid #CCCCCC;
            text-align:center;
            background-color: #40B20F;
        }
        a{text-decoration:none;color:purple}
        a:hover{color:white}
    </style>
</head>
<body>
    <div id="div1">
        <a href="http://www.lvyestudy.com">绿叶学习网</a>
    </div>
</body>
</html>

在浏览器预览效果如下:

:hover伪类

鼠标经过时样式如下:

:hover伪类

疑问

1、很多人觉得按照正常人思维来说,超链接样式的定义顺序应该是“未访问样式、鼠标经过样式、点击时样式、访问后样式”,但是为什么定义超链接样式必须要按照“未访问样式、访问后样式、鼠标经过样式、点击时样式”才能在浏览器中正常显示这4种样式呢?

这个问题是新手经常问到的问题,其实这是W3C官方规定的,也许官方的思维跟我们的不一样。规则这种东西嘛,一般都是官方定的,就像交通规则一样,我们只需要遵守就行了,没必要纠结为什么绿灯走而红灯停。

不过我们也有很好的记忆方法,大家不用担心。那就是“爱恨原则”。爱她,是因为超链接伪类让超链接变得更“美丽”;恨她,是因为顺序太难记。所以我们对她又爱又恨。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部