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

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

<!DOCTYPE html>

<html>

<head>

<title>超链接大全</title>

</head>

<body>

<div>

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

</div>

</body>

</html>

效果图：

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

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

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

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

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

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

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

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

链接初始样式

先修改超链接初始样式 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 上划线样式

效果图：

链接访问后样式

第二次修改a：visited样式：

a:visited{

font-size:23px;

color:#F08;

text-decoration: none;

}

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

鼠标放到链接上样式

添加 a:hover

a:hover{

font-size: 66px;

color: #6F6;

font-family: "HeiTi";

text-decoration: overline;

}

效果图：

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

链接被按下时样式

添加 a:active

a:active{

font-size: 100px;

color: #6F6;

text-decoration: line-through;

}

效果图：

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

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

修改样式顺序

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 之后，才是有效的。

HTML5 | 实用Tips - 4 - 超链接样式大全相关推荐

《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞图书编号: 9787302261834 图书格式: PDF 出版社: 清华大学出版社出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
html 样式大全,2017最新css样式大全
2017最新css样式大全 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网 ...
CSS样式大全（网络收集整理）
CSS样式大全(网络收集整理字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
Web--Css样式大全
一. 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: ...
HTML5实用知识点
本文讲解HTML5实用知识点新增的表单type Canvas使用 SVG使用 Audio使用 Video使用网页缓存文件缓存后台worker Server-Sent Events 定位拖放功 ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
html标签缺省(自带)样式大全
html标签默认样式整理作者:佚名来源:互联网时间:07-30 16:54:48 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 ...
C#日期函数所有样式大全
C#日期函数所有样式大全 DateTime dt = DateTime.Now; // Label1.Text = dt.ToString();//2005-11-5 13:21:25 // ...

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

HTML5 | 实用Tips - 4 - 超链接样式大全相关推荐

最新文章

热门文章