博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第六课 链接学习
阅读量:4547 次
发布时间:2019-06-08

本文共 1934 字,大约阅读时间需要 6 分钟。

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

伪类是什么?

伪类(pseudo-class)令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。

我们来看一个例子。正如你所知道的,在HTML里,链接是通过a元素来定义的。因此,在CSS里,我们可以将a作为一个选择器(selector):

a {		color: blue;	}

一个链接可以有不同的状态。例如,它可以是已访问过的,也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {		color: blue;	}	a:visited {		color: red;	}

为未访问过的链接和已访问过的链接分别使用伪类a:linka: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:字符间距

我们在学过,可以用letter-spacing属性来调整字符间距。现在为了取得特殊效果,我们将它应用到链接上:

a:hover {		letter-spacing: 10px;		font-weight:bold;		color:red;	}

例1b:大写和小写

同样在我们学过,可以通过text-transform属性来转换字母的大小写。这也可用于为链接制造效果:

a:hover {		text-transform: uppercase;		font-weight:bold;		color:blue;		background-color:yellow;	}

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

例2:去掉链接的下划线

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

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

尽管如此,去掉链接的下划线是非常容易的。你肯定记得我们在学过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;	}

转载于:https://www.cnblogs.com/jason-shang/p/3258415.html

你可能感兴趣的文章
高性能、高流量Java Web站点打造的22条建议
查看>>
常见的内存使用不当的情况
查看>>
国外搜索引擎+视频网站
查看>>
又开始写博客了
查看>>
day_7:代理使用
查看>>
mac 下 brew 安装 wine
查看>>
Kubernetes-v1.12.0基于kubeadm部署
查看>>
返回一个整数数组最大子数组的和
查看>>
Java System 类详解 - in, out, err
查看>>
BMP 储存个人理解
查看>>
机器人技术课堂笔记-zjj2016.11.10
查看>>
HTMl5的sessionStorage和localStorage(转)
查看>>
网络是怎样连接的-路由器的包转发操作(上)
查看>>
WPF - EventSetter
查看>>
Superblock mount time is in the future(转载)
查看>>
.Net开源框架列表
查看>>
hadoop 基础, HDFS(块, 元数据)
查看>>
RabbitMQ学习之集群部署
查看>>
Codeforces 1109D. Sasha and Interesting Fact from Graph Theory
查看>>
ASP.NET的URL过滤
查看>>