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

来源：互联网发布：网络大电影计划编辑：程序博客网时间：2024/06/05 01:52

一、伪类

伪类用于向某些选择器添加特殊的效果。类就是工程师加的，比如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;        }

2 0