Value: | [ [<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 |
Initial: | auto |
Applies to: | 所有元素 |
Inherited: | yes |
Percentages: | N/A |
Media: | visual, interactive |
Computed value: | 除了把所有相对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.1中轮廓与border的区别如下:
outline属性控制这些动态轮廓的样式
Value: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
Initial: | 见单独的各个属性 |
Applies to: | 所有元素 |
Inherited: | no |
Percentages: | N/A |
Media: | visual, interactive |
Computed value: | 见单独的各个属性 |
Value: | <border-width> | inherit |
Initial: | medium |
Applies to: | 所有元素 |
Inherited: | no |
Percentages: | N/A |
Media: | visual, interactive |
Computed value: | 绝对长度,如果outline style为'none'的话就是'0' |
Value: | <border-style> | inherit |
Initial: | none |
Applies to: | 所有元素 |
Inherited: | no |
Percentages: | N/A |
Media: | visual, interactive |
Computed value: | 与指定值相同 |
Value: | <color> | invert | inherit |
Initial: | invert |
Applies to: | 所有元素 |
Inherited: | no |
Percentages: | N/A |
Media: | visual, interactive |
Computed value: | 与指定值相同 |
用outline属性创建的轮廓被绘制在盒“上面”,即,轮廓总是位于上面,并且不会影响该盒或其它盒的位置与尺寸。因此,显示或者抑制轮廓不会导致重排(reflow)或者溢出
轮廓会从边框边界外面开始绘制
轮廓可以不是矩形的。例如,如果元素被拆分到了多行,轮廓是能把元素的所有盒包住的最小轮廓。与边框相比,轮廓在行框的开始处或者结束处不是断开的,而是总会尽量完全连接起来
'outline-width'属性与'border-width'接受相同的值
'outline-style'属性与'border-style'接受相同的值,但'hidden'不是一个合法的轮廓样式
'outline-color'接受所有的颜色和关键字'invert'。'invert'用来对屏幕上的像素进行反色。这是一种用来确保焦点边框可见的常见技巧,无论背景色是什么
不支持屏幕像素反色的平台上的(与CSS规范)一致的UA可以忽略'invert'值。如果UA不支持'invert'值,那么'outline-color'属性的初始值为'color'属性的值,与'border-top-color'属性的初始值类似
'outline'属性是一个简写属性,一次性设置'outline-style','outline-width'和'outline-color'
注意 所有方向的轮廓都一样。与border相比,不存在'outline-top'或者'outline-left'属性
本规范没有定义如何绘制多个重叠的轮廓,或者如何为被遮挡在其它元素后面的部分盒绘制轮廓
注意 因为轮廓不影响格式化(即,盒模型中没给它留任何空间),它可能会与页面上的其它元素重叠
一个在BUTTON元素周围绘制粗轮廓的示例:
button { outline : thick solid}
用脚本可以动态改变轮廓的宽度,而不会引起重排(reflow)
图形用户界面可能会用围绕着元素的轮廓来告诉用户页面中的哪些元素具有焦点。这些轮廓不是任何边框,并且开启轮廓和取消轮廓不应该导致文档重排(reflow)。焦点是一份文档中用户交互的对象(例如,对于输入文本,选中按钮等等)。支持的互动媒体组的用户代理必须跟踪焦点位置,并且还必须表现出焦点。这可以通过动态轮廓结合:focus伪类来实现
例如,为了在元素具有焦点时,在它周围绘制一条粗黑线,在它处于激活状态时绘制一条粗红线,可以用下列规则:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSS工作组认为对文档的放大或者部分放大不应该通过样式表来指定。用户代理可以用不同的方式来支持这种放大(例如,更大的图片,更大的声音,等等)
在放大一个页面时,UA应该保持定位的(positioned)元素之间的关系。例如,一个漫画可能由图片和覆盖在上面的文本元素组成。在放大该页面时,用户代理应该保持文本位于漫画对话框(balloon)中