用戶(hù)界面的另一個(gè)重要部分是光標(在CSS規范中稱(chēng)之為“指示設備”),它由鼠標、寫(xiě)字板、圖形書(shū)寫(xiě)板甚至光學(xué)讀取系統之類(lèi)的設備控制。在大多數web瀏覽器中,光標對于提供交互反饋很有用,例如,光標經(jīng)過(guò)一個(gè)超鏈接時(shí)會(huì )變成一只食指伸出的小手,這就是一個(gè)明顯的例子。
CSS2允許改變光標圖標,這說(shuō)明在設計網(wǎng)頁(yè)時(shí)創(chuàng )建一個(gè)類(lèi)似于操作系統中桌面應用的Web應用會(huì )容易得多。例如,經(jīng)過(guò)一個(gè)指向幫助文件的鏈接時(shí),光標可能會(huì )變成一個(gè)“幫助”圖標。
這是利用cursor屬性完成的。
cursor
值:[[<uri>,]*[ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se- resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]] | inherit
初始值:auto
應用于:所有元素
繼承性:有
計算值:對于<uri>值,為絕對值,否則,根據指定確定
在網(wǎng)站建設時(shí),默認值auto只表示用戶(hù)代理應當確定最適合當前上下文的光標圖標。這與default不同,后者要求圖標是操作系統的默認光標。默認光標通常是一個(gè)箭頭,不過(guò)也不一定,這取決于當前的計算環(huán)境。
值pointer會(huì )把光標圖標改為與移過(guò)超鏈接時(shí)的光標相同。甚至可以為HTML文檔描述這種行為:
a[href]{cursor: pointer;}
利用cursor,可以將任何元素定義為像鏈接一樣改變光標圖標。這可能會(huì )讓用戶(hù)糊涂,所以建議不要經(jīng)常這樣做。另一方面(可以這么說(shuō)),利用cursor可以更容易地利用非鏈接元素創(chuàng )建交互式、腳本驅動(dòng)的屏幕部件,然后適當地改變圖標。
注意:Windows平臺的Internet Explorer在IE6以前不能識別pointer,而是使用值hand將光標改變?yōu)椤爸甘臼帧眻D標。這兩個(gè)值IE6都能識別。對此常見(jiàn)的建議是按先后順序使用這兩個(gè)值,如下:#example {cursor: pointer; cursor: hand;}這并不會(huì )驗證是否確實(shí)這樣做,不過(guò)這樣可以在較新的瀏覽器和Explorer的較早版本中得到一致的結果?注意,這里的順序很重要:如果把這兩個(gè)值的順序倒過(guò)來(lái),就不要指望它還能正常工作。
在網(wǎng)頁(yè)設計時(shí),Web瀏覽領(lǐng)域中另一個(gè)很常見(jiàn)的光標圖標是tes^圖標,只要用戶(hù)能選擇文本,就會(huì )出現這個(gè)圖標。這往往是一個(gè)“I”光標,作為一個(gè)視覺(jué)提示,指示用戶(hù)可以拖動(dòng)-選擇光標下的內容。圖13-4顯示了一段已經(jīng)選中的文本的最后有一個(gè)文本圖標。
指示交互性的另一種辦法是使用值crosshair,顯然,crosshair會(huì )把光標圖標變?yōu)橐粋€(gè)十字符號。這往往是一對彼此呈直角交叉放置的短線(xiàn),其中一條垂直,另一條水平,看上去就像一個(gè)加號(+)。不過(guò),十字符號也可以類(lèi)似于乘號(或小寫(xiě)的“x”),甚至是手槍瞄準鏡內顯示的準星圖標。十字符號通常用于屏幕捕捉程序,如果用戶(hù)想準確地知道正在點(diǎn)擊哪一個(gè)像素,這就很有用。
當前文章標題:網(wǎng)頁(yè)設計時(shí)的指示和選擇光標
當前URL:http://amzcoolest.com/news/wzzz/3040.html