網頁設計中給游標添加CSS樣式

來源:互聯網
上載者:User

  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.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>這例子通過body元素的style屬性給整個文檔添加一個游標,但頁面中的單個元素也有它們自己指定的游標,因此當使用者瀏覽頁面時,游標由頁面游標(來自body元素)轉變為單個元素的游標。列表B中的例子說明如何根據類或元素類型確定游標的式樣。

<
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.