一、超鏈接偽類
1.何為超鏈接偽類
在
CSS中，使用超鏈接偽類來定義超鏈接在鼠標點擊的不同時期的樣式。
（1）語法格式
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
① 偽類
| 偽類 | 說明 |
|---|---|
| a:link | 定義a元素未訪問時的樣式。 |
| a:visited | 定義a元素訪問后的樣式。 |
| a:hover | 定義鼠標經(jīng)過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標簽中默認樣式的下劃線*/
}
/*再定義鼠標經(jīng)過超鏈接時的樣式*/
a:hover{
color:#FFD700;
text-decoration:underline; /*添加下劃線*/
}
</style>
</head>
<body>
<div id="div1">
<a href="http://www.itdecent.cn/p/b45241878b74" target="_blank">見賢思齊</a>
<!--target="_blank"是在新窗口打開鏈接。-->
</div>
</body>
</html>
超鏈接偽類示例1.jpg
2.深入了解超鏈接偽類
（1）實際開發(fā)
在實際開發(fā)中，不是每一個超鏈接都需要定義4種狀態(tài)，我們只會用到兩種狀態(tài)：未訪問時狀態(tài)和鼠標經(jīng)過狀態(tài)（a:hover）。
而對于未訪問時狀態(tài)，直接針對
a元素定義即可，沒必要使用a:link，所以我們只需要記住a:hover即可，日后也只會用到這一個。
二、深入了解:hover
1.適用于任何元素
:hover偽類不是只限于a元素，而是可以定義任何一個元素在鼠標經(jīng)過時的樣式。
:hover的應(yīng)用十分廣泛，任何一個網(wǎng)站都會大量運用它，一定要好好掌握。
（1）示例
① 例1
為div設(shè)置偽類: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;
}
/*再定義鼠標經(jīng)過div時的樣式*/
#div1:hover{
background-color: #AFEEEE;
}
</style>
</head>
<body>
<div id="div1">
古之立大事者，不惟有超世之材，亦必有堅忍不拔之志。
</div>
</body>
</html>
為div設(shè)置偽類hover.png
② 例2
為img設(shè)置偽類: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設(shè)置偽類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 |
在實際開發(fā)中，一般只會用到
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; /*當(dāng)鼠標移動到元素上時，鼠標呈手狀*/
}
</style>
</head>
<body>
<div id="div1">鼠標默認樣式</div>
<div id="div2">鼠標手狀樣式</div>
</body>
</html>
2.自定義鼠標樣式
還可以使用
cursor屬性來自定義鼠標樣式。使用自定義鼠標樣式可以使網(wǎng)站更加個性、美觀大方，更能匹配網(wǎng)頁的風(fēng)格。
（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; /*當(dāng)鼠標移動到元素上時，鼠標呈手狀*/
}
</style>
</head>
<body>
<div id="div1">鼠標默認樣式</div>
<div id="div2">鼠標手狀樣式</div>
</body>
</html>
