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

一、伪类

伪类用于向某些选择器添加特殊的效果。类就是工程师加的,比如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学习笔记12:伪类和超链接的美化_第1张图片

  • 注意:
    在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;
        }

你可能感兴趣的:(前端基础)