手揣网教程/网站教程/内容

cursor如何用？CSS中cursor属性的使用办法以及可选值的解析

网站教程2024-10-26 阅读
[摘要]在页面布局时，CSS是工作中必不可少的部分，常听别人讲：HTML是一个人素颜的样子，加了CSS后是一个人化妆以后的样子。这句话通俗易懂，很好的诠释了CSS与HTML之间的关系。CSS中的属性非常多，...
在页面布局时，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属性的用法，以及不同属性值代表的意思，初学者可以在编辑器中试试不同的值，看看有什么样的效果，希望可以帮助到你。
以上就是cursor怎么用？CSS中cursor属性的使用方法以及可选值的解析的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
  • 分享
    • 
				

    网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

    ……
    标签:cursor怎样用？CSS中cursor属性的运用办法以及可选值的解析
     
    相关阅读