CSS中如何使用cursor屬性

這篇文章給大家分享的是有關CSS中如何使用cursor屬性的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

在頁面布局時，CSS是工作中必不可少的部分，常聽別人講：HTML是一個人素顏的樣子，加了CSS后是一個人化妝以后的樣子。這句話通俗易懂，很好的詮釋了CSS與HTML之間的關系。CSS中的屬性非常多，今天就著重講一個屬性，即CSS cursor屬性，以及它的很多可選值，比如：cursor 手型 就是用的 cursor:pointer 這個屬性。

cursor怎么用？

一、CSS cursor 基本語法

cursor屬性是什么：指鼠標指針放在一個元素邊界范圍內時所呈現的光標形狀，它包括問號，小手等形狀。
使用時可以在任何你想要添加的標簽里，插入style="cursor : 某屬性值" ，也可以在CSS樣式中添加。

比如：<p style="cursor:pointer">pointer，小手形狀</p>  ， <a href="#" style="cursor:help">help，幫助形狀</a> 。

cursor的屬性值有十幾種可選值，在工作中根據需要選擇合適的值即可。

二、CSS cursor 屬性值

1、最常用的cursor：pointer，光標呈現小手形狀。

<p style="cursor:pointer">pointer</p>

2、cursor:help，問號光標

<p style="cursor:help;">pointer</p>

3、cursor:crosshair，十字架光標

<p style="cursor:crosshair;">pointer</p>

就詳細介紹常用的這幾個，其他的屬性值都是一樣的寫法，只要改一改屬性值就行，具體有哪些值，他們都代表什么意思，請看下面。

default ：默認光標，通常是一個箭頭
auto ：默認，瀏覽器設置的光標
crosshair ：光標表示十字線
pointer ：光標表示指示鏈接的指針（一只手）
move： 光標表示對象可被移動
e-resize： 光標表示矩形框的邊緣可被向右移動
ne-resize：光標表示矩形框的邊緣可被向上及向右移動
nw-resize：光標表示矩形框的邊緣可被向上及向左移動
n-resize： 光標表示矩形框的邊緣可被向上移動
se-resize：光標表示矩形框的邊緣可被向下及向右移動
sw-resize：光標表示矩形框的邊緣可被向下及向左移動
s-resize： 光標表示矩形框的邊緣可被向下移動
w-resize：光標表示矩形框的邊緣可被向左移動
text ：光標表示文本
wait ：光標表示程序正忙（通常是一只表或沙漏）
help： 光標表示幫助（通常是一個問號）

感謝各位的閱讀！關于CSS中如何使用cursor屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！