在所有浏览器中,超链接的样式如下:
我们可以看出链接在鼠标点击不同时期的样式是不一样的。
(1)默认情况:字体为蓝色,带有下划线;
(2)鼠标点击时:字体为红色,带有下划线;
(3)鼠标点击后:字体为紫色,带有下划线;
注:点击时,指的是点击超链接的一瞬间,字体是红色的。这个样式变化是一瞬间的事情。
超链接默认情况下带有下划线,看起来挺难看的,而且用户体验也不好。在CSS中,一般使用“text-decoration:none”来去除超链接下划线,我们在“下划线、删除线和顶划线”这一节已经详细讲解了text-decoration属性。
语法:
text-decoration:none;
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>去掉超链接默认样式</title>
<style type="text/css">
.a2{text-decoration:none;}
</style>
</head>
<body>
<a href="http://www.lvyestudy.com" class="a1">绿叶学习网</a><br/>
<a href="http://www.lvyestudy.com" class="a2">绿叶学习网</a>
</body>
</html>
在浏览器预览效果如下:
分析:
由于第二个a标签应用了“text-decoration:none”,因此它的下划线被去掉了。
在CSS中,我们使用超链接伪类来定义超链接在不同时期的不同样式。
语法:
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}
说明:
表1 使用伪类定义动态超链接
属性 说明
a:link 定义a元素未访问时的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过显示的样式
a:active 定义鼠标单击激活时的样式
定义这四个伪类,必须按照“link、visited、hover、active”的顺序进行,不然浏览器可能无法正常显示这4种样式。请记住,这4种样式定义顺序不能改变!
大家可能觉得比较难把这个样式顺序记忆。没关系,对于掌握俺有一个挺好的方法。“love hate”,看到了么,这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”,自然而然就写出来了。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
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;}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
在浏览器预览效果如下:
鼠标经过样式如下:
点击链接时样式如下:
注:点击链接是一瞬间的事情,大家请留意一下超链接的样式变化。
在此学习了CSS超链接伪类,我们可以使用CSS伪类向文本链接添加复杂而多样的样式。
大家可能开始有疑问了,是不是每一个超链接都必须要定义4种状态的样式呢?答案是否定的。一般情况下,我们只用到2种状态:未访问状态和鼠标经过状态。大家仔细观察一下绿叶学习网的导航就知道了,绿叶导航也只是定义了这2种状态。
未访问状态,我们直接在a标签定义就行了,没必要使用“a:link”。
语法:
a{CSS样式}
a:hover{CSS样式}
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超链接伪类</title>
<style type="text/css">
#div1
{
width:100px;
height:30px;
line-height:30px;
border:1px solid #CCCCCC;
text-align:center;
background-color: #40B20F;
}
a{text-decoration:none;color:purple}
a:hover{color:white}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</div>
</body>
</html>
在浏览器预览效果如下:
鼠标经过时样式如下:
疑问
1、很多人觉得按照正常人思维来说,超链接样式的定义顺序应该是“未访问样式、鼠标经过样式、点击时样式、访问后样式”,但是为什么定义超链接样式必须要按照“未访问样式、访问后样式、鼠标经过样式、点击时样式”才能在浏览器中正常显示这4种样式呢?
这个问题是新手经常问到的问题,其实这是W3C官方规定的,也许官方的思维跟我们的不一样。规则这种东西嘛,一般都是官方定的,就像交通规则一样,我们只需要遵守就行了,没必要纠结为什么绿灯走而红灯停。
不过我们也有很好的记忆方法,大家不用担心。那就是“爱恨原则”。爱她,是因为超链接伪类让超链接变得更“美丽”;恨她,是因为顺序太难记。所以我们对她又爱又恨。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。