层叠样式表第2级 CSS2规范开发手册 - WEB前端开发 专注前端开发,关注用户体验

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 ] ] | inherit
初始值: auto
适用于: 所有元素
可否继承:
百分比: N/A
媒介: 视觉交互

    这一属性指定了指点设备应该显示怎样类型的光标。取值的含义如下:

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
表示程序正忙,需要用户等待。通常渲染为手表或沙漏。
help
光标下的对象有帮助内容。通常渲染为一个问号或一个气球。
<uri>
用户端从URI指定的资源处获得光标。如果用户端无法处理一系列光标中的第一个,那么它应尝试处理第二个,第三个,等等。如果用户端无法处理任何用户定义的光标,它必须使用列表最后的通用光标。

Example(s):

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 用户的颜色配置

    除了可以为文本,背景等指定预定义的颜色值之外,CSS2允许用户以将颜色集成到用户的图形环境里的方式指定颜色。因此,考虑到用户偏好的样式规则提供了如下的优势:

  1. 它们可以生成适合用户定义的外观和感受的页面。
  2. 它们生成的页面可能更具可理解,因为当前用户可能与某种残疾相关。

    为系统色彩定义的值试图详尽。如果系统并没有对应值,那么指定的值必须映射到最接近的系统属性或缺省颜色。

    下面的列表列出与CSS属性中颜色相关的值以及它们一般的含义。任何颜色属性(例如'color''background-color')可以用其中的一个名字。尽管它们对大小写不敏感,我们建议使用如下所示的混合大小写方式,以使这些名字更容易读懂。

ActiveBorder
活动窗口边框。
ActiveCaption
活动窗口标题。
AppWorkspace
MID窗口的背景颜色。
Background
桌面背景。
ButtonFace
三维显示元素的外观颜色。
ButtonHighlight
三维显示元素的深色阴影(适用于背着光源的边)。
ButtonShadow
三维显示元素的阴影。
ButtonText
按钮上的文本颜色。
CaptionText
标题、尺寸框以及滚动条箭头框中的文本。
GrayText
灰色(禁用)文本。如果当前显示驱动不支持灰色,将被设置为#000。
Highlight
控件中被选择的项目。
HighlightText
控件中被选择的文本。
InactiveBorder
不活动的窗口边框。
InactiveCaption
不活动的窗口标题。
InactiveCaptionText
不活动窗口标题文本颜色。
InfoBackground
控件提示的背景色。
InfoText
控件提示的文本颜色。
Menu
菜单背景。
MenuText
菜单文本。
Scrollbar
滚动条灰色区域。
ThreeDDarkShadow
3维显示元素的深色阴影。
ThreeDFace
3维显示元素的表面颜色。
ThreeDHighlight
3维显示元素的高亮颜色。
ThreeDLightShadow
3维显示元素的浅色阴影(适用于面向光源的那一边)。
ThreeDShadow
3维显示元素的深色阴影。
Window
窗口背景。
WindowFrame
窗口框架。
WindowText
窗口中文本。

Example(s):

    例如,要设置段落的前景和背景色与用户窗口的前景、背景色一致,可以这么写:

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

18.3 用户的字体设置

    和色彩一样,作者可以使用用户系统资源来指定字体。具体内容请参见'font'属性。

18.4 动态外廓:'outline'属性

    有些时候,样式表作者可能想在可视对象(如按钮,活动窗体域,图形地图等)周围创建外廓使它们突出显示。CSS2的外廓和边框的不同在于:

  1. 外廓不占用空间。
  2. 外廓不一定是矩形。

    外廓属性控制着这些动态外廓的样式。

'outline'
值: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
初始值: 参见各属性
适用于: 所有元素
可否继承:
百分比: N/A
媒介: 视觉交互
'outline-width'
值: <border-width> | inherit
初始值: medium
适用于: 所有元素
可否继承:
百分比: N/A
媒介: 视觉交互
'outline-style'
值: <border-style> | inherit
初始值: none
适用于: 所有元素
可否继承:
百分比: N/A
媒介: 视觉交互
'outline-color'
值: <color> | invert | inherit
初始值: invert
适用于: 所有元素
可否继承:
百分比: N/A
媒介: 视觉交互

    outline属性创建的外廓画在一个框“上面”,也就是说,外廓总是在顶上,不会影响该框或任何其它框的尺寸。因此,显示或不显示外廓不会影响流。

    外廓起画于边框边之外。

    外廓可能是非矩形的。例如,假定该元素被分割在好几行,那么外廓就至少是能要包含该元素所有框的外廓。和边框不同的是,外廓在线框的起讫端都不是开放的,它总是完全闭合的。

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

    'outline-style'属性接受值和'border-style'一样,但是'hidden'并不是一个合法的外廓样式。

    'outline-color'接受所有的颜色,还包括关键字'invert'。'invert'应该在屏幕上对像素点颜色进行一次反转。这个小技巧保证焦点框可见,而不管背景颜色是什么。

    'outline'属性是个快速属性,可以设置'outline-style''outline-width''outline-color'

    注意,外廓在各个边都一样。和边框不同,没有诸如'outline-top'或'outline-left'属性。

    本规范没有定义如何绘制多个互相覆盖的外廓,也没有定义如何绘制因在其它元素之后而有部分不可见的框的外廓。

    注意,由于焦点外廓并不影响格式化(也就是说,在框模型中并灭有它的空间),它可能会覆盖页面上的其它元素。

Example(s):

    下例中在BUTTON元素周围画出一个粗的外廓:

BUTTON { outline-width : thick }

    可以用脚本来动态的改变外廓的宽度,而不会引起流的变化。

18.4.1 外廓和焦点

    图形化的用户界面可以用元素周围的外廓来告诉用户页面上哪个元素获得了焦点。这些外廓是额外于任何边框的,而切换外廓的显示和不显示不会使文档发生流的变化。焦点是文档中用户交互的主题(例如,输入文本,选择一个按钮等)。用户端如果支持交互媒介组则必须跟踪焦点在何处,而且必须显示焦点。这个可以通过动态外廓和:focus伪类的联合使用完成。

Example(s):

    例如,要在一个元素获得焦点时在周围画一个粗黑实线外廓,而在它活动时画一个粗红实线外廓,可以用下面的规则:

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

18.5 放大

    CSS工作组认为放大文档或部分文档不应该通过样式表规定。用户端可以用不同的方式支持这样的放大(例如,更大的图形,更响的声音等)。

    在放大页面时,UA应该保留定位元素的关系。例如,一个漫画小品可能由带有覆盖其上的文本的图片构成。如果要放大该页面,用户端应该保持文本在漫画小品的气球中。