|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
CSS同意你把持网页表面和结构的各个方面――包含字体、页边空缺和光标。不错，从CSS2.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>UsingtheCSScursorproperty</title>
</head>
<bodystyle="cursor:all-scroll;">
<h1style="cursor:hand;">Titleofthepage</h1>
<h2style="cursor:crosshair;">Subtitle</h2>
<pstyle="cursor:move;">Sometextgoeshere.</p>
<ahref="http://www.news.com/"mce_href="http://www.news.com/"style="cursor:wait;">Readthenews</a>
<br><br>
<ahref="http://www.techrepublic.com/"mce_href="http://www.techrepublic.com/"style="cursor:help;">TR</a>
</body>
</html>
这例子经由过程body元素的style属性给全部文档增加一个光标，但页面中的单个元素也有它们本人指定的光标，因而当用户扫瞄页面时，光标由页面光标（来自body元素）变化为单个元素的光标。列表B中的例子申明怎样依据类或元素范例断定光标的式样。
<html>
<head>
<title>UsingtheCSScursorproperty</title>
<styletype="text/css">
body{cursor:all-scroll;}
p
a
.headers
</style>
</head>
<body>
<h1class="headers">Titleofthepage</h1>
<h2class="headers">Subtitle</h2>
<p>Sometextgoeshere.</p>
<ahref="http://www.news.com/"mce_href="http://www.news.com/">Readthenews</a>
<br><br>
<ahref="http://www.techrepublic.com/"mce_href="http://www.techrepublic.com/">TR</a>
</body>
</html>
不要过分利用CSS光标
固然后面的例子只是为了申明光标的用法，但它也标明在一个页面中利用各类光标大概会使人利诱。用户但愿网站按估计的体例运转，因而很少利用准备光标。
当用户靠近一个匡助按钮或链接时利用匡助值，是利用光标范例而非默许光标的典范例子。只管你可使用尺度值，但你也能够利用一个定制光标。
经由过程CSS使用光标的一个主要要素是默许指针老是无效。扫瞄器撑持始于Netscape4和IE6，但你仍是应当举行完全的测试。假如你使用一个用户的扫瞄器其实不撑持的光标值，这点就显得非常主要。在这类情形下，页面将显现默许光标，使得用户体验不会遭到影响。
经由过程JavaScript使用CSS光标属性
经由过程JavaScript，利用以下语法，能够便利的会见和使用一个元素的光标属性：
element.style.cursor="cursor_value";
你能够在页面中利用这个语法和别的JavaScript中的各类无效事务。列表C中的例子对页面中的最初一个链接利用onFocus事务，并对页面的body部分利用onSelectStart事务（当用户用鼠标在选中页面上的某个内容时）。当事务如JavaScript界说的那样运转时，即会显现某些光标。
<html>
<head>
<title>UsingtheCSScursorproperty</title>
<styletype="text/css">
body{cursor:all-scroll;}
p
.headers
</style>
</head>
<bodyonSelectStart="this.style.cursor=not-allowed;returnfalse;">
<h1class="headers">Titleofthepage</h1>
<h2class="headers">Subtitle</h2>
<p>Sometextgoeshere.</p>
<ahref="http://www.news.com/"mce_href="http://www.news.com/">Readthenews</a>
<br><br>
<ahref="http://www.techrepublic.com/"mce_href="http://www.techrepublic.com/">TR</a>
</body>
</html>
更多选项
CSS为Web使用程序开辟供应浩瀚选项。开辟者能够经由过程CSS、尺度HTML、JavaScript或组合这些尺度把持页面元素。如CSS尺度界说的那样，把持光标只是一个易于把持的选项，但你也不克不及过分利用它。
TonyPatton具有丰厚的Java、VB、Lotus及XML认证方面常识，是一个专业的使用程序开辟职员。
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:17:30
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜