第七章：链接.docx

本文格式为Word版，下载可任意编辑第七章：链接 第七章：链接 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; 实例：有鼠标停的链接的效果 为链接设置悬停效果非常流行。所以，我们将多看几个:hover伪类的例子。 我们在第5课学过，可以用letter-spacing属性来调整字符间距。现在为了取得特别效果，我们将它应用到链接上： a:hover letter-spacing: 10px; font-weight:bold; color:red; 实例：大写和小写 同样在第5课我们学过，可以通过text-transform属性来转换字母的大小写。这也可用于为链接制造效果： a:hover text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; 通过上面两个例子你会发觉，我们可以通过属性的组合制造出很多种效果。 例2：去掉链接的下划线 如何去掉链接的下划线是一个常见的问题。 假如你去掉链接的下划线或修改链接的字体颜色的话，这很有可能会令用户感到困惑、并因此不能充共享用你网站上的内容。 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; 小结 在这一课，你学习了伪类，并且还运用了一些之前学到的属性。或许这已经令你对CSS的强大功能领会一二了。 在下一课，我们将向你介绍如何为特定元素或一组元素定义属性。 第 5 页 共 5 页