18 用户界面

目录

18.1 光标:'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
应用于: 所有元素
是否继承:
百分比: 不适用
媒体: 视觉, 交互式
计算值: 按指定,除了所有相对URL会被转换为绝对URL

此属性指定用于指点设备的光标类型。值具有以下含义:

auto
UA根据当前上下文决定要显示的光标。
crosshair
一个简单的十字光标(例如,类似于“+”符号的短线段)。
default
平台相关的默认光标。通常渲染为一个箭头。
pointer
光标是一个指示链接的指针。
move
指示某物将被移动。
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
指示某个边缘将被移动。例如,当从框的东南角开始移动时,使用'se-resize'光标。
text
指示可选择的文本。通常渲染为I形光标。
wait
指示程序正在忙碌,用户应等待。通常渲染为手表或沙漏。
progress
一个进度指示器。程序正在进行一些处理,但不同于'wait',用户仍然可以与程序交互。 通常渲染为旋转的沙滩球, 或者是带有手表或沙漏的箭头。
help
指示光标下的对象有帮助可用。通常渲染为问号或气球。
<uri>
用户代理从由URI指定的资源中检索光标。如果用户代理无法处理列表中的第一个光标,则应尝试处理第二个,依此类推。如果用户代理无法处理任何用户定义的光标,则必须使用列表末尾的通用光标。 光标的固有尺寸计算方法与背景图片相同,除了使用UA定义的矩形代替为'background-image'属性建立坐标系的矩形。 这个UA定义的矩形应基于UA操作系统上的典型光标的大小。如果生成的光标尺寸不适合此矩形,UA可以按比例缩小生成的光标,直到其适合矩形为止。

示例:


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

此示例将所有超链接(无论是否访问过)的光标设置为外部SVG光标。 不支持SVG光标的用户代理将跳过下一个值并尝试使用“hyper.cur”光标。 如果该光标格式也不受支持,UA将跳到下一个值并简单地渲染'pointer'光标。

18.2 系统颜色

注意。 在CSS3颜色模块中,系统颜色已被弃用 [CSS3COLOR]

除了能够为文本、背景等分配预定义的颜色值外,CSS2还引入了一组命名的颜色值,允许作者以一种将颜色与操作系统的图形环境集成的方式指定颜色。

对于没有对应值的系统,指定的值应映射到最接近的系统值或默认颜色。

以下列出了颜色相关CSS属性的附加值及其一般含义。任何颜色属性(例如'color''background-color')都可以采用以下名称之一。虽然这些名称不区分大小写,但建议使用下面显示的混合大小写,以使名称更易读。

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 }

18.3 字体的用户偏好

与颜色类似,作者可以通过利用用户的系统资源来指定字体。有关详细信息,请参阅'font'属性。

18.4 动态轮廓:'outline'属性

有时,样式表作者可能希望围绕按钮、活动表单字段、图像映射等视觉对象创建轮廓,使它们突出显示。CSS 2.2 中的轮廓与边框在以下方面有所不同:

  1. 轮廓不占用空间。
  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}

可以使用脚本动态更改轮廓的宽度,而不会引起回流。

18.4.1 轮廓与焦点

图形用户界面可能会在元素周围使用轮廓,以告诉用户页面上的哪个元素具有焦点。这些轮廓是对任何边框的补充,打开和关闭轮廓不应导致文档回流。焦点是文档中用户交互的主题(例如,用于输入文本、选择按钮等)。支持交互式媒体组的用户代理必须跟踪焦点的位置,并且还必须表示焦点。这可以通过结合使用动态轮廓和 :focus 伪类来实现。

示例:

例如,要在元素具有焦点时在其周围绘制一条粗黑线,并在其处于活动状态时绘制一条粗红线,可以使用以下规则:


:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 放大

CSS工作组认为,文档或文档部分的放大不应通过样式表来指定。用户代理可能会以不同的方式支持这种放大(例如,更大的图像,更响的声音等)。

在放大页面时,用户代理应保持定位元素之间的关系。例如,漫画可能由带有叠加文本元素的图像组成。当放大此页面时,用户代理应将文本保留在漫画气泡内。