超链接是网页的根本元素之一,简直每个网页咱们都能够看到超链接。在之前讲 HTML 的时候就讲过,超链接会自带一些默认款式,例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不统一的款式,其实是超链接的伪类款式,伪类就是不依据名称、属性或者内容,而是依据标签处于某种行为或状态时的特色来润饰款式,也就是说超链接将依据不同的状态显示不同的款式。

去掉链接的下划线

首先,咱们晓得超链接自身是带有默认下划线的,然而个别咱们在网页中看到的超链接都是没有下划线的,那么要如何去掉超链接的下划线呢? 其实后面咱们讲文本款式的时候提到过,就是应用 text-decoration 属性。

示例:

上面是两个超链接:

<body>    <p><a href="#">一般的超链接</a></p>    <p><a href="#" class="no">去掉下划线的超链接</a></p></body>

咱们应用类选择器 no ,去掉其中一个链接的下划线:

.no{    text-decoration: none;}

在浏览器中的演示成果:

链接伪类

超链接有一个特点,就是能够依据它们所处的状态来设置不同的款式。

超链接的四种状态(伪类)如下所示:

伪类名称形容
a:link未点击拜访时超链接的款式
a:hover鼠标悬浮其上的超链接款式
a:visited单击拜访后的超链接款式
a:active点击拜访未开释的超链接款式

伪类款式的根本语法:

a:伪类名 {    属性:属性值;}
示例:

例如设置不同状态下超链接的字体色彩:

<a href="#">这是一个超链接</a>

CSS 款式代码:

a:link{ color: #F00; }   /* 未被拜访的链接 */a:visited {color:#00FF00;} /* 已被拜访的链接 */a:hover {color:#FF00FF;}   /* 鼠标指针挪动到链接上 */a:active {color: #ff7300;}  /* 正在被点击的链接 */

在浏览器中的演示成果:

下面讲到的四种超链接伪类,在设置款式时对程序有没有要求呢?当然有啦,在 CSS 设置超链接伪类的程序为:a:link 和 a:visited --> a:hover --> a:active

其中 a:hover 必须位于 a:linka:visited 之后,a:active 必须位于 a:hover 之后,如果设置程序不对,则款式可能不起作用。

设置鼠标指针形态

在浏览网页的时候,咱们通常能够看到鼠标的指针形态个别能够为箭头、手形、I字形等,这些成果都能够通过 CSS 中的 cursor 属性来设置。

cursor 属性的罕用属性值如下所示:

属性值形容
default默认光标,箭头
pointer超链接的指针,手型
wait批示程序正在忙
help批示可用的帮忙
text批示文本
crosshair鼠标出现十字状
示例:

举个例子,例如要设置当鼠标挪动到超链接上时,将鼠标指针变为十字状:

a:hover {    color: green;    cursor: crosshair;}  

在浏览器中的演示成果: