HTML5 | 实用Tips - 4 - 超链接样式大全

在 007 、 017 我们只是简单使用了，href 的超链接功能，这次详细介绍下所有用法

我先从 W3c - CSS 手册，把官方伪类样式说明给你看下：

 

​

就是四种：

1.a:link

设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。

也就是html a锚文本标签的内容初始样式。

2.a:hover

设置对象在其鼠标悬停时的样式表属性。

也就是鼠标刚刚经过a标签并停留在A链接上时样式。

3.a:active

设置A对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。

4.a:visited

设置a对象在其链接地址已被访问过时的样式表属性。

也就是html a超链接文本被点击访问过后的CSS样式效果。

常用的都是通过 Css 样式来控制上面 4 种超链接样式，中文看着很费劲吧。。。

英文简单易懂：link、hover、active、visted

废话不多说，先上一段代码：

吹尽天下之水，凡开卷有益

效果图：

 

​

这就完成了一个最简单的超链接，很简单。

为了和 047 - H5布局入门总结（36 - 46）形成统一风格，特意添加 div 区块，其实不写一样。

稍微解释下 target 属性，也有四个参数：

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

设置页面打开超链接的情况，按需使用即可。

 

​

1

链接初始样式

先修改超链接初始样式 a：link

a:link {

font-size:33px;

font-family: "NSimSun";

text-decoration: none;

}

最后一个 text-decoration 是用来修改超链接下划线滴，实际开发常常none

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式

text-decoration:underline 下划线样式

text-decoration:line-through 删除线样式-贯穿线样式

text-decoration:overline 上划线样式

效果图：

 

​

 

​

2

链接访问后样式

第二次修改a：visited样式：

a:visited{

font-size:23px;

color:#F08;

text-decoration: none;

}

点击完超链接，原始超链接效果变为：

 

​

 

​

3

鼠标放到链接上样式

添加 a:hover

a:hover{

font-size: 66px;

color: #6F6;

font-family: "HeiTi";

text-decoration: overline;

}

效果图：

 

​

放到 hover 样式，咱们用过，不做细说～

 

​

4

链接被按下时样式

添加 a:active

a:active{

font-size: 100px;

color: #6F6;

text-decoration: line-through;

}

效果图：

 

​

注意，下按，就是按下鼠标左键不松开的效果

一松开左键，则将执行跳转。

 

​

5

修改样式顺序

a:hover{

font-size: 66px;

color: #6F6;

font-family: "HeiTi";

text-decoration: overline;

}

a:link{

color: #000;

font-size:33px;

font-family: "NSimSun";

text-decoration: none;

}

a:visited{

font-size:333px;

background-color:#F08;

text-decoration: none;

}

a:active{

font-size: 100px;

color: #6F6;

text-decoration: line-through;

}

效果图：

 

​

发现 hover 就不好使了！

Why？

很简单伪类选择有顺序要求：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。