第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%的人还看了以下文章

  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    9310
  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。  js全屏和退出全屏代码|www.125jz.com全屏显示退出全屏 还可以根据注释,实现整个网页进入全屏,还是指定某块区域全屏(根据区域ID指定),快来试试吧。

    2019年2月15日
    3.0K0
  • 第12课:高度和宽度

    到目前为止,我们还没有在元素尺寸方面给予关注。在这一课,我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度,即在水平方向上的尺寸。 下面是一个简单的例子,它为我们提供了一个可以容纳文本的盒子: div.box {width: 200px;bord…

    2020年2月25日
    1.5K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    2.9K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.3K0
  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    3.4K0

发表回复

登录后才能评论