第6课:超链接

CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。

你在前面几课学到的属性也可以应用到链接上(比如修改颜色、字体、添加下划线等)。但不同的是,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;
}

小结

在这一课,你学习了伪类,并且还运用了一些之前学到的属性。也许这已经令你对CSS的强大功能领略一二了。

在下一课,我们将向你介绍如何为特定元素或一组元素定义属性。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4974.html

(3)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午4:46
下一篇 2020年2月22日 下午8:12

99%的人还看了以下文章

  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    3.6K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    10.7K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    1.2K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.5K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.3K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    4.2K0

发表回复

登录后才能评论