CSS2/ui

使用者界面（用户界面）

内容概要

光标：'cursor'属性

'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
适用元素：	所有元素
是否可继承：	是
百分比值：	无
适用媒体类型：	可视化媒体（visual）， 交互性媒体（interactive）
计算值：	规定，除任何相对url外，都要转换为绝对的url（译注：译者理解，此处出于严谨考虑，实际意义是能用相对url的可用相对url，不能用相对url的必须使用绝对url）

该属性指定了光标在显示设备上的的显示类型，其值有以下示意：

auto

由用户代理决定光标在当前上下文是何种类型。

crosshair

一个简单的十字（例如，横竖相割的两个短线，看起像“+”）。

default

所在平台的默认光标，常常将其渲染成一个箭头。

pointer

光标是一个指标（译注：指形光标），用来示意一个链接。

move

表示某个东西要移动。

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

表示某个（某些）边缘移动。例如值为'se-resize'的光标用于表示运动从元素框（box）东南角处开始（译注：东南角即右下角，原文用"south-east"，即：上北下南左西右东）。

test

表示文本可以被选择，常常将其渲染成一个“I”字形标。

wait

表示当前程序繁忙，需要用户等待。常常渲染成一只表或沙漏。

progress

一个进度的标识。程序正在执行某些加工、处理，但是不同于"wait"值，用户仍然可与程序交互。常常渲染成一个旋转的沙球、带有箭头的手表或带有箭头的沙漏。

help

光标下的对象可获得帮助。常常渲染成一个问号或者气球。

<uri>

用户代理从指定的URI检索光标文件。如果用户代理不能获取到光标列表中的第一个光标，会尝试获取第二个，以此类推。如果用户代理不能获取任何用户自定义的光标，则必须在光标列表末尾使用通用的光标（译注：防止所有用户自定义光标获取不到）。光标的尺寸会由指定的图像文件尺寸计算得出，除非用户代理定义了一个矩形坐标区域取代了光标文件建立的矩形区域，此时光标大小以这个矩形区域为准，如果光标尺寸超出这个矩形区域，用户代理会按比例缩放这个光标直至符合这个矩形尺寸范围。

:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

这个例子用外部的SVG格式光标文件给所有的链接设置光标样式（不论访问与否）。用户代理不支持SVG光标就会跳过它去找下一个“hyper.cur”光标文件。如果光标格式仍然不被支持，用户代理会继续跳过并用"pointer"值渲染光标样式。

系统颜色

注：这套系统颜色值已被CSS3颜色模块[CSS3COLOR]列为是不赞成使用的。

除了能够给文本、背景等赋予预定义的颜色值外，CSS2还推出一套命名的颜色值，允许作者（开发者）设置操作系统图形环境中对应颜色。

对于操作系统图形环境中没有对应的颜色值的，会映射成最接近的颜色值，或者一个默认颜色。

下面列出这些与颜色相关CSS属性值以及它们的意义。任何颜色属性（例如，"color"或"background-color"）都可以使用下列值中的一个。虽然他们是大小写敏感的，仍然建议在使用时采用如下所示的大小写混合方式，更便于阅读。 （译注：以Window系统为例，以下颜色值会根据系统主题的不同而改变，且很有可能与对应的颜色不一致。）

ActiveBorder

活动窗口边框颜色。

ActiveCaption

活动窗口标题栏颜色。

AppWorkspace

多文档界面的背景色。

Background

桌面背景色。

ButtonFace

三维显示元素的正面颜色。

ButtonHighlight

三维显示元素的突出位置（正面对光源时的边缘）的颜色。

ButtonShadow

三维显示元素的阴影颜色。

ButtonText

按钮上的文本颜色。

CaptionText

标题栏的文本颜色、缩放框颜色和滚动条箭头颜色。

GrayText

灰色的文本。如果当前显示设备不支持这个灰色将显示值为#000的黑色。

Highlight

选择多选框中选项时的背景色。

HighlightText

选择多选框中选项时的文本颜色。

InactiveBorder

不活动的窗口边框颜色。

InactiveCaption

不活动的窗口标题栏颜色。

InactiveCaptionText

不活动的窗口标题文字颜色。

InfoBackground

提示框的背景色。

InfoText

提示框的文本颜色。

Menu

菜单背景色。

MenuText

菜单文本颜色。

Scrollbar

滚动条灰色区域颜色。

ThreeDDarkShadow

三维显示元素的阴影颜色。

ThreeDFace

三维显示元素正面颜色。

ThreeDHighlight

三维显示元素的突出位置（正面对光源时的边缘）的颜色。

ThreeDLightShadow

三维显示元素中浅色部分（正面光源时的边缘颜色）。

ThreeDShadow

三维显示元素的阴影。

Window

窗口背景色。

WindowFrame

窗框颜色。

WindowText

窗口内文本颜色。

举例，要设置段落的前景色、背景色与用户窗口的前景色、背景色一样，这么写：

p { color: WindowText; background-color: Window }

用户预设字体

至于颜色，作者（开发者）可以给用户操作系统中的字体设置颜色。请参考“font”属性。

动态轮廓：‘outline’属性

有时，编写样式表的开发人员可能想要创建可视对象的轮廓，比如按钮的、激活的表单域的、图像区块的周围轮廓等等，使之看起来更明显。CSS2.1的outline不同于border体现在以下几个方面：

1、outline是不占空间的。

2、outline可以是非矩形（non-rectangular）。

outline属性控制轮廓的样式。

'outline'

取值：	[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]] | inherit
初始值：	见各自独立的属性
适用元素：	所有元素
是否可继承：	否
百分比值：	无
适用媒体类型：	可视化媒体（visual）， 交互性媒体（interactive）
计算值：	见各自独立的属性

'outline-width'

取值：	<border-width> | inherit
初始值：	medium
适用元素：	所有元素
是否可继承：	否
百分比值：	无
适用媒体类型：	可视化媒体（visual）， 交互性媒体（interactive）
计算值：	绝对长度；outline-style值为none时为0

'outline-style'

取值：	<border-style> | inherit
初始值：	none
适用元素：	所有元素
是否可继承：	否
百分比值：	无
适用媒体类型：	可视化媒体（visual）， 交互性媒体（interactive）
计算值：	根据规则指定（as specified ）

'outline-color'

取值：	<color> | invert | inherit
初始值：	invert
适用元素：	所有元素
是否可继承：	否
百分比值：	无
适用媒体类型：	可视化媒体（visual）， 交互性媒体（interactive）
计算值：	根据规则指定（as specified ）

outline属性绘制的轮廓是“超出”元素框（box）的，即总是在元素框上面，且不会影响元素框的大小和位置，也不会影响其他元素框。因此，显示或者不使用outline并不会导致回流（reflow）或溢出（overflow）。

outline可能绘制在元素边框的外边缘，刚刚好包围元素的边框。

outline可能是非矩形（non-rectangular）的。例如，如果元素跨行折断，outline将紧紧围绕这个元素的在各行的元素框。与border属性比，在一行内的元素框的起始点与结束点是没有开头的，但是总是尽可能的连接在一起。（译注：并不同于border，如果元素跨行且具有各个边框，在行尾border是不会有在行的右侧关闭的）

'outline-width'接受与'border-width'一样的属性值。

'outline-style'接受与'border-style'一样的属性值。除了'hidden'值外，'hidden'不是'outline-style'属性的值。

'outline-color'接受所有的color值，以及关键字'invert'。'invert'使屏幕上像素的颜色反向，这是一种使焦点元素边界突出的常见方式。不受前景色与背景的影响。

与标准一直的用户代理（Conformant UAs）所在平台的屏幕像素不支持颜色反向可以忽略'invert'值。如果用户代理不支持'invert'值，那么'outline-color'属性的初始值就是'color'属性的值，类似于'border-top-color'属性的初始值。

'outline'属性是简写属性，用来设置'outline-style'、'outline-width'和'outline-color'。

注：outline的所有边儿是相同的。与border比，outline没有'outline-top'或'outline-left'属性。

本规范没有定义如何绘制多个重叠的outline，也没有定义outline的一部分被其他元素框（box）遮挡的情况下如何绘制。

注：由于outline不影响布局（即不占用盒模型的空间），它可以很好地重叠在页面的其他元素上。

下面是一个给BUTTON元素绘制粗轮廓（thick outline）的例子：

button { outline : thick solid }

用脚本动态改变outline的宽度不会引起回流（reflow）。

轮廓和焦点

图形用户界面（Graphical user interfaces ）可以用outline属性围绕某元素，用来提示用户在页面上的这个元素具有焦点。这些除border外的轮廓（译注：从语义讲，border也算是一种轮廓，只不过这里特别强调了一下，指的outline。译者认为这句很多余。），在切换元素是否使用它们时并不会引起回流（reflow）。在页面中的焦点是用户交互的对象（例如正在录入的文本、选择一个按钮等等），用户代理支持的交互媒体类型，必须保留焦点元素的线条轨迹，必须使焦点元素具有焦点的特征。可以使用:focus伪类实现动态轮廓。

例如，在元素获得焦点时绘制一条黑色的粗线环绕该元素，在激活时绘制一条红色的粗线，可以用如下规则：

:focus { outline: thick solid black }

:active { outline: thick solid red }

放大

CSS工作组认为不应通过样式表指定文档或文档一部分的放大方式。用户代理可以以不同的方式支持放大（例如，较大的图像，较大的声音，等）。

放大一个页面时，用户代理需保持元素间的定位关系。例如一个展示漫画的页面，可能文本与图像重叠，当放大这个页面时，用户代理需要让文本保持在对话框（balloon）中。（译注：大多数漫画中的对话框都类似一个气球，尾端指向说话的人物。balloon指的就是对话框）