知识：CSS方便地控制用户浏览网页时使用的光标
2008-02-23 08:42:46来源：互联网 阅读 ()
CSS允许你控制网页外观和布局的各个方面——包括字体、页边空白和光标。不错，从CSS 2.1开始，你就可以方便地控制用户浏览网页时使用的光标。
标准的CSS光标呈箭头状，一般来说，它都能满足一个网页或网站的需求，但有些时候你可能需要使用其它的光标。在这些情况下，CSS标准提供了众多选项。
CSS光标类型
下表概括说明了CSS标准中的一些光标类型。
- 默认光标：使用标准的箭头。
- 手状光标：光标呈手形，食指伸出。
- 指针状光标：与手状光标相同。
- 十字线光标：使用十字光标（一个加号）。
- 移动光标：使用十字光标，每条线末端是一个箭头。这和Windows中移动窗口时使用的光标相同。
- 文本光标：使用I形光标（大写字母I）。
- 等待光标：光标呈沙漏状。
- 帮助光标：使用问号光标。
- e-resize：标准将这个光标定义为一个指向东方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的水平线。
- w-resize：标准将这个光标定义为一个指向西方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的水平线。
- ne-resize：标准将这个光标定义为一个指向东北方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的对角线。
- nw-resize：标准将这个光标定义为一个指向西北方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的对角线。
- se-resize：标准将这个光标定义为一个指向东南方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的对角线。
- s-resize：标准将这个光标定义为一个指向南方或下方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的垂直线。
- sw-resize：标准将这个光标定义为一个指向西南方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的对角线。
- n-resize：标准将这个光标定义为一个指向北方或上方的箭头，但在多数浏览器中，显示的光标为一条两端带箭头的垂直线。
- 进展光标：光标呈沙漏状。
- 禁止光标：光标是一个里面带对角线的圆。
- 不可拖动光标：光标呈手形，右边带禁止光标。
- 垂直文本光标：光标呈水平I形。
- 三角方向光标：光标为四个箭头，中间使用一个圆点。
- 颜色调整光标：两条平行垂直线上画一条水平箭头，就像微软Excel中调整列大小的光标。
- 行调整光标：两条平等水平线上画一条垂直箭头，就像微软Excel中调整行大小的光标。
- url(uri)：这种光标允许你使用作为rui提交的外部文件中定义的定制光标。
我们可以使用上表中的值，以及一个元素的光标属性。下面的一行代码说明如何使用一个HTML元素的style属性。
style="cursor: hand;"
和其它CSS属性一样，你可以为整个页面或页面中的单个元素定义一个光标。列表A中的HTML实例对各种页面元素使用一个不同的光标。
<html><head>
<title>Using the CSS cursor property</title>
</head>
<body style="cursor: all-scroll;">
<h1 style="cursor: hand;">Title of the page</h1>
<h2 style="cursor: crosshair;">Subtitle</h2>
<p style="cursor: move;">Some text goes here.</p>
<a href="http://www.163.com/" mce_href="http://www.163.com/" style="cursor: wait;">Read the 163</a>
<br><br>
<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/" style="cursor: help;">WEBJX</a>
</body></html>
这例子通过body元素的style属性给整个文档添加一个光标，但页面中的单个元素也有它们自己指定的光标，因此当用户浏览页面时，光标由页面光标（来自body元素）转变为单个元素的光标。列表B中的例子说明如何根据类或元素类型确定光标的式样。
<html><head>
<title>Using the CSS cursor property</title>
<style type="text/css">
body {cursor: all-scroll;}
p
a
.headers
</style></head>
<body>
<h1 class="headers">Title of the page</h1>
<h2 class="headers">Subtitle</h2>
<p>Some text goes here.</p>
<a href="http://www.163.com/" mce_href="http://www.163.com/">Read the 163</a>
<br><br>
<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/">WEBJX</a>
</body></html>
不要过度使用CSS光标
虽然前面的例子只是为了说明光标的用法，但它也表明在一个页面中使用各种光标可能会令人迷惑。用户希望网站按预计的方式运行，因此很少使用预备光标。
当用户接近一个帮助按钮或链接时使用帮助值，是使用光标类型而非默认光标的典型例子。尽管你可以使用标准值，但你也可以使用一个定制光标。
通过CSS应用光标的一个重要因素是默认指针总是有效。浏览器支持始于Netscape 4和IE 6，但你还是应该进行彻底的测试。如果你利用一个用户的浏览器并不支持的光标值，这点就显得十分重要。在这种情况下，页面将显示默认光标，使得用户体验不会受到影响。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
