网站建设中链接的知识

伪类是什么？

伪类（pseudo-class）令你能够在为HTML元素界说CSS特点的时候将条件和事件考虑在内。

咱们来看一个比如。正如你所知道的，在HTML里，链接是经过a元素来界说的。因此，在CSS里，咱们能够将a作为一个选择器（selector）：

a {color: blue;}

一个链接能够有不同的状况。例如，它能够是已访问过的，也能够是未访问过的。你能够经过伪类别离为访问过的链接和未访问过的链接设置不同的款式。

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

为未访问过的链接和已访问过的链接别离使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

咱们将逐个解释这四个伪类，并给出示例。

伪类：link

伪类:link用于阅读者从未访问过的链接。

在下面的示例代码中，咱们将未访问过的链接设为浅蓝色。

a:link {color: #6699CC;}

伪类： visited

伪类:visited用于阅读者已访问过的链接。比方，下面的代码将已访问过的链接设为深紫色：

a:visited {color: #660099;}

伪类： active

伪类:active用于活动的链接（即获得当时焦点的链接）。

下例将活动的链接设为具有黄色背景：

a:active {background-color: #FFFF00;}

伪类： hover

伪类:hover用于有鼠标悬停的链接。

这能制造出有趣的作用。例如，假如你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS能够这样写：

a:hover {color: orange;font-style: italic;}

例1：有鼠标悬停的链接的作用

为链接设置悬停作用十分盛行。所以，咱们将多看几个:hover伪类的比如。

例1a：字符距离

咱们在第5课学过，能够用letter-spacing特点来调整字符距离。现在为了获得特殊作用，咱们将它应用到链接上：

a:hover {letter-spacing: 10px;font-weight:bold;color:red;}

例1b：大写和小写

同样在第5课咱们学过，能够经过text-transform特点来转换字母的大小写。这也可用于为链接制造作用：

a:hover {text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;}

经过上面两个比如你会发现，咱们能够经过特点的组合创造出无数种作用。你能够创建自己的作用——试试吧！