如何用CSS自定义鼠标显示的形状

2023-02-20 21:00:02html-css06

如何用CSS自定义鼠标显示的形状,第1张

语法：

取值：

auto:　默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll:　IE6.0有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize:　IE6.0有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair:　简单的十字线光标。

default:　客户端平台的默认光标。通常是一个箭头。

hand:　竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move:　十字箭头光标。用于标示对象可被移动。

help:　带有问号标记的箭头。用于标示有帮助信息存在。

no-drop:　IE6.0带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed:　IE6.0禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer:　IE6.0和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress:　IE6.0带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize:　IE6.0有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text:　用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text:　IE6.0用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait:　用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

url ( url ):　IE6.0用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

示例：

p { cursor: text}

a { cursor: pointer}

body { cursor: url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default}

cursor:pointer,鼠标划过，鼠标光标呈现为指示链接的指针（一只手），一下是cursor的参数详细：

url需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

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发展史

CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

CSS1.0

选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。

样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。

伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。

保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。

CSS2.0

选择器：css2提供了更多强大的选择器，用来定位HTML节点或者标记

符号名称

含义

示例

用于匹配任何标记

*{color：red}