在頁面佈局時,CSS是工作中不可或缺的部分,常聽別人講:HTML是一個人素顏的樣子,加了CSS後是一個人化妝以後的樣子。這句話通俗易懂,很好的詮釋了CSS與HTML之間的關係。
CSS中的屬性非常多,本篇主要講解的是CSS滑鼠樣式,也就是CSS cursor屬性,以及它的許多可選值,例如:cursor 手型就是用的cursor:pointer 這個屬性。
一、CSS cursor 基本語法
cursor屬性是什麼:指滑鼠指標放在一個元素邊界範圍內時所呈現的遊標形狀,它包括問號,小手等形狀。
使用時可以在任何你想要新增的標籤裡,插入style=cursor : 某個屬性值,也可以在CSS樣式中加入。
比如:
pointer,小手形狀
help,幫助形狀。
cursor的屬性值有十幾種可選值,在工作中根據需要選擇合適的值即可。
二、CSS cursor 屬性值
提示:由於電腦系統的不同,滑鼠的樣式會存在一定的差異。
舉例:
<!DOCTYPEhtml><html><head><style>div{height:30px;border:1pxsolidgreen;margin-top:10px;}.cell{cursor:cell;}.crosshair{cursor:crosshair;}.text{cursor :text ;}.vertical-text{cursor:vertical-text;}.alias{cursor:alias;}.copy{cursor:copy;}.move{cursor:move;}.no-drop{cursor:no-drop;} </style></head><body><divclass =cell>cursor:cell;</div><divclass=crosshair>cursor:crosshair;</div><divclass=text>cursor:text;</div><divclass=vertical-text>cursor:vertical-text; </div>< divclass=alias>cursor:alias;</div><divclass=copy>cursor:copy;</div><divclass=move>cursor:move;</div><divclass=no-drop>cursor:no-drop ;</div></body></html>
大家可以跑步看看,非常直覺。