10.超链接样式-CSS基础
一、超链接伪类
1.何为超链接伪类
在
CSS中，使用超链接伪类来定义超链接在鼠标点击的不同时期的样式。
（1）语法格式
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}① 伪类
伪类 | 说明 |
|---|---|
a:link | 定义a元素未访问时的样式。 |
a:visited | 定义a元素访问后的样式。 |
a:hover | 定义鼠标经过a元素时的样式。 |
a:active | 定义鼠标点击激活时的样式。 |
Ⅰ.定义顺序
定义这四个伪类时，必须按照
link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这4种样式。 这4种样式定义顺序不能改变。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接样式样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
/*先定义超链接未访问时的样式*/
a{
color:#66A9FE;
text-decoration: none; /*去除a标签中默认样式的下划线*/
}
/*再定义鼠标经过超链接时的样式*/
a:hover{
color:#FFD700;
text-decoration:underline; /*添加下划线*/
}
</style>
</head>
<body>
<div id="div1">
<a href="https://www.jianshu.com/p/b45241878b74" target="_blank">見贤思齊</a>
<!--target="_blank"是在新窗口打开链接。-->
</div>
</body>
</html>
超链接伪类示例1.jpg
2.深入了解超链接伪类
（1）实际开发
在实际开发中，不是每一个超链接都需要定义4种状态，我们只会用到两种状态：未访问时状态和鼠标经过状态（a:hover）。 而对于未访问时状态，直接针对
a元素定义即可，没必要使用a:link，所以我们只需要记住a:hover即可，日后也只会用到这一个。
二、深入了解:hover
1.适用于任何元素
:hover伪类不是只限于a元素，而是可以定义任何一个元素在鼠标经过时的样式。:hover的应用十分广泛，任何一个网站都会大量运用它，一定要好好掌握。
（1）示例
① 例1
为div设置伪类:hover
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接样式样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
/*先定义div未访问时的样式*/
#div1{
width: 400px;
height:20px;
color:#66A9FE;
text-align:center;
background-color: yellow;
}
/*再定义鼠标经过div时的样式*/
#div1:hover{
background-color: #AFEEEE;
}
</style>
</head>
<body>
<div id="div1">
古之立大事者，不惟有超世之材，亦必有坚忍不拔之志。
</div>
</body>
</html>
为div设置伪类hover.png
② 例2
为img设置伪类:hover
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接样式样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
img{
width: 200px;
height: 150px;
}
img:hover{
border:5px dashed aquamarine;
}
</style>
</head>
<body>
<img src="../img/panda.jpg" alt="是熊猫啊" title="是熊猫啊">
</body>
</html>
为img设置伪类hover.png
三、鼠标样式
1.浏览器鼠标样式
在
CSS中，使用cursor属性来定义鼠标样式。
（1）语法格式
cursor:取值;① cursor属性值
属性值 |
|---|
default（默认值） |
pointer |
text |
crosshair |
wait |
help |
move |
e-resize或w-resize |
ne-resize或sw-resize |
n-resize或s-resize |
在实际开发中，一般只会用到
default（默认值）、pointer、text这三个，其它的很少使用。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接样式样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
div{
width: 100px;
height: 25px;
text-align: center;
}
#div1{
cursor: default;
}
#div2{
cursor: pointer; /*当鼠标移动到元素上时，鼠标呈手状*/
}
</style>
</head>
<body>
<div id="div1">鼠标默认样式</div>
<div id="div2">鼠标手状样式</div>
</body>
</html>2.自定义鼠标样式
还可以使用
cursor属性来自定义鼠标样式。 使用自定义鼠标样式可以使网站更加个性、美观大方，更能匹配网页的风格。
（1）语法格式
cursor:url(图片地址),属性值;① 说明
图片地址即鼠标图片地址，鼠标图片后缀名一般都是
.cur，我们可以通过Photoshop制作。 而属性值一般是default（默认值）、pointer、text。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>超链接样式样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
div{
width: 100px;
height: 25px;
text-align: center;
}
#div1{
cursor: url(../img/favicon.ico),default; /*对默认样式进行自定义*/
}
#div2{
cursor: pointer; /*当鼠标移动到元素上时，鼠标呈手状*/
}
</style>
</head>
<body>
<div id="div1">鼠标默认样式</div>
<div id="div2">鼠标手状样式</div>
</body>
</html>