第6课：超链接

江山如画 • 2020年2月22日下午4:51 • 网页制作 • 阅读 2862

你在前面几课学到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

伪类是什么？

伪类（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;
}

通过上面两个例子你会发现，我们可以通过属性的组合创造出无数种效果。你可以创建自己的效果——试试吧！

例2：去掉链接的下划线

如何去掉链接的下划线是一个常见的问题。

关于是否去掉链接的下划线，你必须仔细考虑清楚，因为这有可能严重降低网站的易用性（usability）。人们已经习惯于兰色有下划线的链接了，他们看到它就知道那是可以点击的。甚至连我母亲都知道这一点！如果你去掉链接的下划线或修改链接的字体颜色的话，这很有可能会令用户感到困惑、并因此不能充分享用你网站上的内容。

尽管如此，去掉链接的下划线是非常容易的。你肯定记得我们在第5课学过text-decoration属性，它可用于决定是否给文本添加下划线。要去掉下划线，只要把text-decoration属性的值设为none就行了。

a {
    text-decoration:none;
}

除此以外，text-decoration属性也可以与其它属性一起应用在伪类上。

a:link {
 color: blue;
 text-decoration: none;
}

a:visited {
 color: purple;
 text-decoration: none;
}

a:active {
 background-color: yellow;
 text-decoration: none;
}

a:hover {
 color: red;
 text-decoration: none;
}