名称: | cursor |
---|---|
值: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
初始值: | auto |
应用于: | 所有元素 |
是否继承: | 是 |
百分比: | 不适用 |
媒体: | 视觉, 交互式 |
计算值: | 按指定,除了所有相对URL会被转换为绝对URL |
此属性指定用于指点设备的光标类型。值具有以下含义:
:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
此示例将所有超链接(无论是否访问过)的光标设置为外部SVG光标。 不支持SVG光标的用户代理将跳过下一个值并尝试使用“hyper.cur”光标。 如果该光标格式也不受支持,UA将跳到下一个值并简单地渲染'pointer'光标。
注意。 在CSS3颜色模块中,系统颜色已被弃用 [CSS3COLOR]。
除了能够为文本、背景等分配预定义的颜色值外,CSS2还引入了一组命名的颜色值,允许作者以一种将颜色与操作系统的图形环境集成的方式指定颜色。
对于没有对应值的系统,指定的值应映射到最接近的系统值或默认颜色。
以下列出了颜色相关CSS属性的附加值及其一般含义。任何颜色属性(例如'color'或'background-color')都可以采用以下名称之一。虽然这些名称不区分大小写,但建议使用下面显示的混合大小写,以使名称更易读。
例如,要将段落的前景色和背景色设置为与用户窗口的前景色和背景色相同,请编写如下代码:
p { color: WindowText; background-color: Window }
与颜色类似,作者可以通过利用用户的系统资源来指定字体。有关详细信息,请参阅'font'属性。
有时,样式表作者可能希望围绕按钮、活动表单字段、图像映射等视觉对象创建轮廓,使它们突出显示。CSS 2.2 中的轮廓与边框在以下方面有所不同:
轮廓属性控制这些动态轮廓的样式。
名称: | outline |
---|---|
值: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
初始值: | 见各个属性 |
应用于: | 所有元素 |
是否继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉, 交互式 |
计算值: | 见各个属性 |
名称: | outline-width |
---|---|
值: | <border-width> | inherit |
初始值: | medium |
应用于: | 所有元素 |
是否继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉, 交互式 |
计算值: | 绝对长度;如果轮廓样式为'none',则为'0' |
名称: | outline-style |
---|---|
值: | <border-style> | inherit |
初始值: | none |
应用于: | 所有元素 |
是否继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉, 交互式 |
计算值: | 按指定 |
名称: | outline-color |
---|---|
值: | <color> | invert | inherit |
初始值: | invert |
应用于: | 所有元素 |
是否继承: | 否 |
百分比: | 不适用 |
媒体: | 视觉, 交互式 |
计算值: | 按指定 |
使用轮廓属性创建的轮廓是在“盒子”之上绘制的,即轮廓始终在顶部,并且不会影响盒子的大小或位置,也不会影响任何其他盒子。因此,显示或隐藏轮廓不会导致回流或溢出。
轮廓可能会从边框边缘之外开始绘制。
轮廓可能是非矩形的。例如,如果元素跨越了多行,轮廓将是包含所有元素框的最小轮廓。与边框不同,轮廓在行框的起始或结束处不会打开,而是尽可能完全连接。
'outline-width'属性接受与'border-width'相同的值。
'outline-style'属性接受与'border-style'相同的值,不同之处在于'hidden'不是合法的轮廓样式。
'outline-color'接受所有颜色以及关键词'invert'。'Invert'预期在屏幕上的像素执行颜色反转。这是确保焦点边框可见的常用技巧,无论背景颜色如何。
合规的UA可以在不支持屏幕像素颜色反转的平台上忽略'invert'值。如果UA不支持'invert'值,则'outline-color'属性的初始值为'color'属性的值,类似于'border-top-color'属性的初始值。
'outline'属性 是一个简写属性,并设置'outline-style','outline-width',和'outline-color'的所有三个值。
注意。 轮廓在所有侧面都是相同的。与边框不同,没有'outline-top'或'outline-left'属性。
本规范未定义如何绘制多个重叠的轮廓,或如何绘制部分被其他元素遮挡的盒子的轮廓。
注意。 由于轮廓不影响格式化(即,盒模型中不会为其留出空间),因此它可能会与页面上的其他元素重叠。
这是一个在BUTTON元素周围绘制粗轮廓的示例:
button { outline : thick solid}
可以使用脚本动态更改轮廓的宽度,而不会引起回流。
图形用户界面可能会在元素周围使用轮廓,以告诉用户页面上的哪个元素具有焦点。这些轮廓是对任何边框的补充,打开和关闭轮廓不应导致文档回流。焦点是文档中用户交互的主题(例如,用于输入文本、选择按钮等)。支持交互式媒体组的用户代理必须跟踪焦点的位置,并且还必须表示焦点。这可以通过结合使用动态轮廓和 :focus 伪类来实现。
例如,要在元素具有焦点时在其周围绘制一条粗黑线,并在其处于活动状态时绘制一条粗红线,可以使用以下规则:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSS工作组认为,文档或文档部分的放大不应通过样式表来指定。用户代理可能会以不同的方式支持这种放大(例如,更大的图像,更响的声音等)。
在放大页面时,用户代理应保持定位元素之间的关系。例如,漫画可能由带有叠加文本元素的图像组成。当放大此页面时,用户代理应将文本保留在漫画气泡内。