第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布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    2.0K0
  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    1.6K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    2.0K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    2.4K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    9.4K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0

发表回复

登录后才能评论