今天我们分享关于超链接样式的内容。在浏览器中,超链接的样式有默认样式、点击后样式、鼠标悬停样式和激活样式四种状态。超链接默认情况下是带有下划线的,看起来很丑,用户体验不好,前面我们说到了text-decoration:none可以去除下划线。表示四种访问状态,可以使用超链接的伪类来定义。语法:
a:link {属性:属性值}a:visited {属性:属性值}a:hover {属性:属性值}a:actived {属性:属性值}
超链接伪类 |
属性 |
说明 |
a:link |
定义a元素未访问时的样式 |
a:visited |
定义a元素访问后的样式 |
a:hover |
定义鼠标悬停其上时的样式 |
a:actived |
定义鼠标单击激活时的样式 |
定义这四个伪类,必须按照顺序进行,依次为link、visited、hover和active,否则浏览器无法正常显示样式。请大家注意此点。示例代码:
超链接伪类 #div1 { width:200px; height:30px; line-height:30px; border: 1px solid #cccccc; text-align:center; background-color:#40b20f; } a { text-decoration:none; font-size:18px;} a:link { color:white;} a:visited { color:purple;} a:hover { color:yellow; text-decoration:underline;} a:active { color:red;}
baidu
常用超链接伪类:初学者会有疑问,是不是每一个超链接都必须定义4中状态样式才可以?答案是否定的。一般情况下,我们只需要定义常用的两种状态,未访问状态和鼠标悬停状态。未访问状态,可以直接使用a标签代替就可以了。语法:
a {属性:属性值;}a:hover {属性:属性值;}
示例代码:
超链接伪类 #d1 { width:200px; height:40px; line-height:40px; border: 1px solid #cccccc; text-align:center; background-color: #40b20f; } a { text-decoration:none; color:purple;} a:hover { color:white;}
按照正常人的思维来说,超链接样式的定义顺序应该是“未访问时样式,鼠标悬停时样式,点击时样式和访问后样式”,但是为什么定义超链接的样式必须按照“未访问时,访问后,鼠标悬停时,点击时”才能在浏览器中正常显示。这是原因是如此定义顺序,是W3C官方组织定义的顺序,要求按照标准执行就可以了。就像交通信号灯规定,红灯停绿灯行是一个道理,有标准就按照标准执行就可以了,不用纠结太多。