今天我们接着分享关于超链接样式的内容。
上节我们知道了“a:hover”可以定义鼠标悬停超链接a时的样式。很多初学者都认为hover只限于a标签使用,如果你这样理解,就埋没了css一个功能强大的技巧了。“:hover”伪类是可以定义任何一个元素的鼠标悬停时的样式的。
语法:
元素:hover {属性:属性值;}
元素可以是任意的块元素和行内元素。
示例代码:
<html>
<head>
<title>hover伪类</title>
<style type="text/css">
div
{
width:200px;
height:80px;
border:1px solid black;
}
div:hover { background-color:green;}
span
{
}
span:hover { background-color:green;}
p
{
border:1px solid black;
}
p:hover { background-color:green;}
</style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
<p>段落</p>
</body>
</html>
鼠标样式:
在css中,有两种定义方式,一是浏览器鼠标样式,二是自定义鼠标样式。
语法:
cursor:属性值;
鼠标样式cursor的属性值 | |
属性值 | 说明 |
default | 默认值,白色箭头 |
pointer | 手 |
text | 文本光标 |
crosshair | 十字架 |
wait | 等待 |
help | 箭头带问号 |
move | 带方向的十字架箭头 |
e-resize | 左右扩展箭头 |
ne-resize | 右上左下扩展箭头 |
nw-resize | 左上右下扩展箭头 |
n-resize | 上下扩展箭头 |
se-resize | 左上右下扩展箭头 |
sw-resize | 左下右上扩展箭头 |
s-resize | 上下扩展箭头 |
w-resize | 左右扩展箭头 |
虽然我们看到cursor属性取值很多,但是在实际开发中,通常用到的也就是default和pointer两个属性值。
示例代码:
<html>
<head>
<title>鼠标样式</title>
<style type="text/css">
div
{
width:200px;
height:50px;
margin-bottom:20px;
border:1px solid black;
text-align:center;
background-color:green;
}
#d1 { cursor:default;}
#d2 { cursor:pointer;}
#d3 { cursor:text;}
#d4 { cursor:crosshair;}
#d5 { cursor:wait;}
#d6 { cursor:help;}
#d7 { cursor:move;}
</style>
</head>
<body>
<div id="d1">default</div>
<div id="d2">pointer</div>
<div id="d3">text</div>
<div id="d4">crosshair</div>
<div id="d5">wait</div>
<div id="d6">help</div>
<div id="d7">move</div>
</body>
</html>
自定义鼠标样式:
语法:
cursor:url("路径地址"),属性;
示例代码:
<html>
<head>
<title>自定义鼠标样式</title>
<style>
div
{
width:200px;
height:80px;
border:1px solid black;
}
#d1 { cursor:url("images/deault.cur"),default}
#d2 { cursor:url("images/pointer.cur"),pointer}
</style>
</head>
<body>
<div id="d1">default</div>
<div id="d2">pointer</div>
</body>
</html>
这个代码中的鼠标样式文件,需要大家自己去百度下载一下,放到相应的路径中,就可以看到效果了。使用自定义鼠标样式,可以打造出更加具有个性化的网站,美观大方。
本章总结:
去除超链接下划线,可以使用“text-decoration:none”;
超链接伪类:
a:link,未访问时的样式;
a:visited,访问后的样式;
a:hover,鼠标悬停的样式;
a:actived,鼠标单击激活的样式;
四个伪类的书序,必须是link、visited、hover、active,不然浏览器无法正常显示。参考记忆顺序,可以使用两个英文单词“love hate”。一般情况下,只需要两个状态即可,就是link和hover。
hover伪类:
我们可以使用:hover伪类来定义任何一个元素在鼠标悬停时的样式。
div:hover,p:hover,等等;
鼠标样式:
有两种方式,一种是浏览器鼠标样式,一种是自定义鼠标样式;