18 用户界面

内容

18.1 光标:'cursor'属性

'cursor'
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之外,与指定值相同

该属性指定了指针设备显示的光标类型。值含义如下:

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型标(I-beam)
wait
暗示程序正忙,用户应该等待。通常渲染成一个钟表或者沙漏
progress
一个进度指示器。程序正在执行某些处理,但与'wait'的区别在于用户仍然可以与程序交互。通常渲染成一个旋转的沙滩球,或者一个带有钟表或沙漏的箭头
help
通过鼠标下方的对象可以获得帮助。通常渲染成一个问号或者气球
<uri>
用户代理从URI指定的资源中获取光标。如果用户代理无法处理光标列表中的第一个光标,它应该尝试处理第二个,等等。如果用户代理无法处理所有用户定义的(user-defined)光标,它必须使用列表末尾的通用光标。除了用一个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
三维显示元素的表面色(face color)
ButtonHighlight
三维显示元素的高亮色(对于背对光源的边)
ButtonShadow
三维显示元素的阴影色
ButtonText
按钮上的文本颜色
CaptionText
标题,尺寸框(size box)和滚动条箭头框中的文本颜色
GrayText
变灰的(禁用的)文本。如果当前显示驱动不支持灰色的话,该颜色会被设置为#000
Highlight
控件中被选中的项的颜色
HighlightText
控件中被选中项的文本颜色
InactiveBorder
非活动窗口边框颜色
InactiveCaption
非活动窗口标题颜色
InactiveCaptionText
非活动标题中文本的颜色
InfoBackground
提示控件的背景色
InfoText
提示控件的文本颜色
Menu
菜单背景色
MenuText
菜单中的文本颜色
Scrollbar
滚动条灰色区域的颜色
ThreeDDarkShadow
三维显示元素的深色阴影颜色
ThreeDFace
三维显示元素的表面颜色(face color)
ThreeDHighlight
三维显示元素的高亮颜色
ThreeDLightShadow
三维显示元素的浅色(对于面向光源的边)
ThreeDShadow
三维显示元素的深色阴影颜色
Window
窗口背景色
WindowFrame
窗口框架的颜色
WindowText
窗口中的文本颜色

示例:

例如,为了把一个段落的前景色和背景色设置得与用户窗口的前景色和背景色相同,这样写:


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

18.3 用户偏好的字体

像颜色一样,编写者也可以通过一种利用用户系统资源的方式来指定字体。详情请查看'font'属性

18.4 动态轮廓:'outline'属性

有时,为了让可视化对象,例如按钮,活动表单域,图像映射等等凸显出来,样式表编写者可能想在它们周围创建轮廓。CSS 2.1中轮廓与border的区别如下:

  1. 轮廓不占空间
  2. 轮廓可以不是矩形的

outline属性控制这些动态轮廓的样式

'outline'
Value:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Initial:  见单独的各个属性
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual, interactive
Computed value:  见单独的各个属性
'outline-width'
Value:  <border-width> | inherit
Initial:  medium
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual, interactive
Computed value:  绝对长度,如果outline style为'none'的话就是'0'
'outline-style'
Value:  <border-style> | inherit
Initial:  none
Applies to:  所有元素
Inherited:  no
Percentages:  N/A
Media:  visual, interactive
Computed value:  与指定值相同
'outline-color'
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)

18.4.1 轮廓与焦点

图形用户界面可能会用围绕着元素的轮廓来告诉用户页面中的哪些元素具有焦点。这些轮廓不是任何边框,并且开启轮廓和取消轮廓不应该导致文档重排(reflow)。焦点是一份文档中用户交互的对象(例如,对于输入文本,选中按钮等等)。支持的互动媒体组的用户代理必须跟踪焦点位置,并且还必须表现出焦点。这可以通过动态轮廓结合:focus伪类来实现

示例:

例如,为了在元素具有焦点时,在它周围绘制一条粗黑线,在它处于激活状态时绘制一条粗红线,可以用下列规则:


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

18.5 放大

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

在放大一个页面时,UA应该保持定位的(positioned)元素之间的关系。例如,一个漫画可能由图片和覆盖在上面的文本元素组成。在放大该页面时,用户代理应该保持文本位于漫画对话框(balloon)中