在页面布局时,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>
大家可以运行看看,非常直观。