CSS允許你控制網(wǎng)頁(yè)外觀和布局的各個(gè)方面――包括字體、頁(yè)邊空白和光標(biāo)。不錯(cuò)，從CSS 2.1開(kāi)始，你就可以方便地控制用戶瀏覽網(wǎng)頁(yè)時(shí)使用的光標(biāo)。
標(biāo)準(zhǔn)的CSS光標(biāo)呈箭頭狀，一般來(lái)說(shuō)，它都能滿足一個(gè)網(wǎng)頁(yè)或網(wǎng)站的需求，但有些時(shí)候你可能需要使用其它的光標(biāo)。在這些情況下，CSS標(biāo)準(zhǔn)提供了眾多選項(xiàng)。
CSS光標(biāo)類(lèi)型
下表概括說(shuō)明了CSS標(biāo)準(zhǔn)中的一些光標(biāo)類(lèi)型。
默認(rèn)光標(biāo)：使用標(biāo)準(zhǔn)的箭頭。
手狀光標(biāo)：光標(biāo)呈手形，食指伸出。
指針狀光標(biāo)：與手狀光標(biāo)相同。
十字線光標(biāo)：使用十字光標(biāo)（一個(gè)加號(hào)）。
移動(dòng)光標(biāo)：使用十字光標(biāo)，每條線末端是一個(gè)箭頭。這和Windows中移動(dòng)窗口時(shí)使用的光標(biāo)相同。
文本光標(biāo)：使用I形光標(biāo)（大寫(xiě)字母I）。
等待光標(biāo)：光標(biāo)呈沙漏狀。
幫助光標(biāo)：使用問(wèn)號(hào)光標(biāo)。
e-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向東方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的水平線。
w-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向西方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的水平線。
ne-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向東北方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的對(duì)角線。
nw-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向西北方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的對(duì)角線。
se-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向東南方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的對(duì)角線。
s-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向南方或下方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的垂直線。
sw-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向西南方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的對(duì)角線。
n-resize：標(biāo)準(zhǔn)將這個(gè)光標(biāo)定義為一個(gè)指向北方或上方的箭頭，但在多數(shù)瀏覽器中，顯示的光標(biāo)為一條兩端帶箭頭的垂直線。
進(jìn)展光標(biāo)：光標(biāo)呈沙漏狀。
禁止光標(biāo)：光標(biāo)是一個(gè)里面帶對(duì)角線的圓。
不可拖動(dòng)光標(biāo)：光標(biāo)呈手形，右邊帶禁止光標(biāo)。
垂直文本光標(biāo)：光標(biāo)呈水平I形。
三角方向光標(biāo)：光標(biāo)為四個(gè)箭頭，中間使用一個(gè)圓點(diǎn)。
顏色調(diào)整光標(biāo)：兩條平行垂直線上畫(huà)一條水平箭頭，就像微軟Excel中調(diào)整列大小的光標(biāo)。
行調(diào)整光標(biāo)：兩條平等水平線上畫(huà)一條垂直箭頭，就像微軟Excel中調(diào)整行大小的光標(biāo)。
url(uri)：這種光標(biāo)允許你使用作為rui提交的外部文件中定義的定制光標(biāo)。
我們可以使用上表中的值，以及一個(gè)元素的光標(biāo)屬性。下面的一行代碼說(shuō)明如何使用一個(gè)HTML元素的style屬性。
style=”cursor: hand;”
和其它CSS屬性一樣，你可以為整個(gè)頁(yè)面或頁(yè)面中的單個(gè)元素定義一個(gè)光標(biāo)。列表A中的HTML實(shí)例對(duì)各種頁(yè)面元素使用一個(gè)不同的光標(biāo)。
<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.news.com/” mce_href=”http://www.news.com/” style=”cursor: wait;”>Read the news</a>
<br><br>
<a href=”http://www.techrepublic.com/” mce_href=”http://www.techrepublic.com/” style=”cursor: help;”>TR</a>
</body>
</html>
這例子通過(guò)body元素的style屬性給整個(gè)文檔添加一個(gè)光標(biāo)，但頁(yè)面中的單個(gè)元素也有它們自己指定的光標(biāo)，因此當(dāng)用戶瀏覽頁(yè)面時(shí)，光標(biāo)由頁(yè)面光標(biāo)（來(lái)自body元素）轉(zhuǎn)變?yōu)閱蝹€(gè)元素的光標(biāo)。列表B中的例子說(shuō)明如何根據(jù)類(lèi)或元素類(lèi)型確定光標(biāo)的式樣。
<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.news.com/” mce_href=”http://www.news.com/”>Read the news</a>
<br><br>
<a href=”http://www.techrepublic.com/” mce_href=”http://www.techrepublic.com/”>TR</a>
</body>
</html>
不要過(guò)度使用CSS光標(biāo)
雖然前面的例子只是為了說(shuō)明光標(biāo)的用法，但它也表明在一個(gè)頁(yè)面中使用各種光標(biāo)可能會(huì)令人迷惑。用戶希望網(wǎng)站按預(yù)計(jì)的方式運(yùn)行，因此很少使用預(yù)備光標(biāo)。
當(dāng)用戶接近一個(gè)幫助按鈕或鏈接時(shí)使用幫助值，是使用光標(biāo)類(lèi)型而非默認(rèn)光標(biāo)的典型例子。盡管你可以使用標(biāo)準(zhǔn)值，但你也可以使用一個(gè)定制光標(biāo)。
通過(guò)CSS應(yīng)用光標(biāo)的一個(gè)重要因素是默認(rèn)指針總是有效。瀏覽器支持始于Netscape 4和IE 6，但你還是應(yīng)該進(jìn)行徹底的測(cè)試。如果你利用一個(gè)用戶的瀏覽器并不支持的光標(biāo)值，這點(diǎn)就顯得十分重要。在這種情況下，頁(yè)面將顯示默認(rèn)光標(biāo)，使得用戶體驗(yàn)不會(huì)受到影響。
通過(guò)JavaScript應(yīng)用CSS光標(biāo)屬性
通過(guò)JavaScript，使用以下語(yǔ)法，可以方便的訪問(wèn)和應(yīng)用一個(gè)元素的光標(biāo)屬性：
element.style.cursor=”cursor_value”;
你可以在頁(yè)面中使用這個(gè)語(yǔ)法和其它JavaScript中的各種有效事件。列表C中的例子對(duì)頁(yè)面中的最后一個(gè)鏈接使用onFocus事件，并對(duì)頁(yè)面的body部分使用onSelectStart事件（當(dāng)用戶用鼠標(biāo)在選中頁(yè)面上的某個(gè)內(nèi)容時(shí)）。當(dāng)事件如JavaScript定義的那樣運(yùn)行時(shí)，即會(huì)顯示某些光標(biāo)。
<html>
<head>
<title>Using the CSS cursor property</title>
<style type=”text/css”>
body {cursor: all-scroll;}
p
.headers
</style>
</head>
<body onSelectStart=”this.style.cursor=’not-allowed’; return false;”>
<h1 class=”headers”>Title of the page</h1>
<h2 class=”headers”>Subtitle</h2>
<p>Some text goes here.</p>
<a href=”http://www.news.com/” mce_href=”http://www.news.com/”>Read the news</a>
<br><br>
<a href=”http://www.techrepublic.com/” mce_href=”http://www.techrepublic.com/” onFocus=”this.style.cursor=’text’; return
false;”>TR</a>
</body>
</html>
更多選項(xiàng)
CSS為Web應(yīng)用程序開(kāi)發(fā)提供眾多選項(xiàng)。開(kāi)發(fā)者可以通過(guò)CSS、標(biāo)準(zhǔn)HTML、JavaScript或組合這些標(biāo)準(zhǔn)控制頁(yè)面元素。如CSS標(biāo)準(zhǔn)定義的那樣，控制光標(biāo)只是一個(gè)易于控制的選項(xiàng)，但你也不能過(guò)度使用它。
Tony Patton擁有豐富的Java、VB、Lotus及XML認(rèn)證方面知識(shí)，是一個(gè)專(zhuān)業(yè)的應(yīng)用程序開(kāi)發(fā)人員。
