HTML5 |
您所在的位置:网站首页 › 鼠标点击时的超链接样式 › HTML5 |
在 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 之后,才是有效的。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |