CSS学习笔记12：伪类和超链接的美化

最新推荐文章于 2023-11-02 10:53:56 发布

编程大学姐远春儿

最新推荐文章于 2023-11-02 10:53:56 发布

阅读量1.7k

点赞数 5

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/sinat_34647836/article/details/55194432

版权

前端基础专栏收录该内容

19 篇文章 4 订阅

订阅专栏

一、伪类

伪类用于向某些选择器添加特殊的效果。类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”，同一个标签，根据用户的某种状态不同，有不同的样式。
a标签有4种伪类：

a:link{
    color:red;
    }
a:visited{
     color:orange;
    }
a:hover{
    color:green;
    }
a:active{
    color:black;
    }

:link 是英语“链接”的意思，表示，用户没有点击过这个链接的样式。。
:visited 是英语“访问过的”的意思，表示用户访问过了这个链接的样式。。
:hover是英语“悬停”的意思，表示用户鼠标悬停的时候链接的样式。。
:active 是英语“激活”的意思，表示用户用鼠标点击这个链接不动此刻的样式。

如图：
这里写图片描述

注意：
在css中，这四种伪类必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

二、超级链接的美化

a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。我们用a标签描述盒子，用伪类描述文字的样式、背景。
需要注意的是，一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。
CSS代码：

<style type="text/css">
    a{
        display: block;
        width: 120px;
        height: 40px;
        }
    a:link , a:visited{
        text-decoration: none;
        background-color: yellowgreen;
        color:white;
        }
    a:hover{
        background-color: purple;
        font-weight: bold;
        color:yellow;
        }
</style>

HTML代码：

<body>
    <a href="http://write.blog.csdn.net/postlist/0/all/draft">博客</a>
</body>

网页效果：
（1）未点击

这里写图片描述
（2）悬浮

这里写图片描述

注意：

所有的a不继承text、font这些东西。因为a自己有一个伪类的权重。
a:link、a:visited 简写在a标签选择器里面。也就是说，a标签涵盖了link、visited的状态。

上述CSS代码等价于：

    a{
        display: block;
        width: 120px;
        height: 40px;
        text-decoration: none;
        background-color: yellowgreen;
        color:white;
        }
    a:hover{
        background-color: purple;
        font-weight: bold;
        color:yellow;
        }