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

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

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

HTML5 | 实用Tips - 4 - 超链接样式大全_第1张图片

 

就是四种:

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;

}

效果图:

HTML5 | 实用Tips - 4 - 超链接样式大全_第2张图片

 

放到 hover 样式,咱们用过,不做细说~

 

4

链接被按下时样式

添加 a:active

a:active{

font-size: 100px;

color: #6F6;

text-decoration: line-through;

}

效果图:

HTML5 | 实用Tips - 4 - 超链接样式大全_第3张图片

 

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

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

 

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;

}

效果图:

HTML5 | 实用Tips - 4 - 超链接样式大全_第4张图片

 

发现 hover 就不好使了!

Why?

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

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

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

你可能感兴趣的:(HTML5 | 实用Tips - 4 - 超链接样式大全)