Css 用户接口

鼠标指针cursors：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转换为绝对地址

这个属性指定了对于指向性设备的cursor的类型。他的值有如下含义：

  • auto

    UA基于当前内容决定cursor显示。

  • crosshair

    呈现为十字线。

  • default

    设备决定的默认的cursor。

  • pointer

    呈现为指示链接的指针。

  • move

    指出什么东西可以移动。

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

    指出一些边可以移动。例如，se-resize这个cursor当从一个盒子的东南角开始移动时使用。

  • text

    指出文本可以被选择。通常渲染为I型。

  • wait

    指出当前程序正在忙，请用户稍等。通常渲染为一个手表或者沙漏。

  • progress

    一个进度指示器。当前程序正在执行一些处理，但是和wait不同的是用户还可以和程序交互。通常渲染为旋转的沙滩球，或者一个箭头和表或者沙漏。

  • help

    当cursor下的对象是可用的帮助。通常渲染为问号或者气球。

  • __<统一资源标识符uri>__

    用户代理通过URI指定的资源接收这个cursor。如果用户代理不能处理cursor列表的第一个cursor，那么应该尝试第二个等等。如果用户代理不能处理任何的用户自定义cursor，他必须使用使用列表最后的那个通用的cursor。cursor固有的尺寸以背景图的计算方式计算，除了用户代理定义的矩形代替为了background-image建立的坐标系的矩形。这个用户代理自定义的矩形应该基于用户代理的操作系统的标准的cursor的尺寸。如果结果cursor的尺寸不适合这个矩形，用户代理可以等比缩放结果cursor直至适合这个矩形。

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

这个例子设置了所有的超链接的cursor是一个外链的SVG cursor。用户代理如果不支持SVG cursor的话，就跳到下一个值且接受使用hyper.cur这个cursor。如果那个cursor依旧不能支持，用户代理会跳到下一个值，也就是简单的渲染pointer状的cursor。

系统颜色

为了能指定文本、背景等等的预定义好的颜色值，CSS2引进了一组命名颜色值，允许作者用将他们集成到操作系统的图形环境中的方式来指定颜色。

对于没有的类似值的系统，指定的值应该映射到最接近的系统值上或者默认值。

下边的列表是为了颜色相关的CSS属性和他们的一般意义而附加的值。任何的颜色属性都能选择下边的名字中的一个。尽管这些是不区分大小写的，建议使用如下的混合大写形式来使得名字更易读。

  • 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

和颜色一样，作者可以通过使用用户系统资源的方式指定字体font。

动态轮廓outline：outline属性

有时，样式表作者可能想绕着可见对象（按钮，活动表单项，图像地图等）创建轮廓使得他们凸显出来。CSS2.1的outline和border的区别如下：

  1. outline不占据空间。

  2. outlink可以不是矩形。

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

  • outline

    值： [ <’outline-color’>   <’outline-style’>   <’outline-width’> ] inherit

    初始化： 参见单独的属性

    应用在： 所有元素

    可继承： 不可以

    百分比： 不可用

    媒介： 可见媒介，交互式媒介

    计算值： 参见单独的属性

  • outline-width

    值： <边框宽border-width> | inherit

    初始化： medium

    应用在： 所有元素

    可继承： 不可以

    百分比： 不可用

    媒介： 可见媒介，交互式媒介

    计算值： 绝对长度；如果outline的样式是none的话就是0

  • outline-style

    值： <边框样式border-style> | inherit

    初始化： none

    应用在： 所有元素

    可继承： 不可以

    百分比： 不可用

    媒介： 可见媒介，交互式媒介

    计算值： 和指定值一样

  • outline-color

    值： <颜色color> | invert | inherit

    初始化： invert

    应用在： 所有元素

    可继承： 不可以

    百分比： 不可用

    媒介： 可见媒介，交互式媒介

    计算值： 和指定值一样

用outline属性创建的outline绘制在盒“之上”（outline总是在上边），且不会影响盒的定位和尺寸。因此，显示或者抑制outline不会引起回流reflow或者溢出。

outline可以仅在border边界外开始绘制。

outline可以不是矩形。例如，如果这个元素跨越了好几行，outline就会绕着所有元素的盒的最小的outline。对比border，outline不会在行盒开始或者结束的位置打开，但是如果可能的话总是相连的。

outline-width属性接收的值和border-width的一样。

outline-style属性接收的值和border-style的一样，除了对于outline来说hidden是非法的。

outline-color属性接收所有的颜色，和关键词invert一样。invert是期望和屏幕上像素的颜色值相反的。这是为了确保无论背景是什么颜色的焦点border是可见的通用的窍门。

对于不支持反转屏幕上的像素颜色的设备来说，UA可以忽略invert值。如果UA不支持invert值，那outline-color的初始值就是color属性的值，和border-top-color属性的初始值类似。

outline属性是一个简写属性，且设置了’outline-style’, ‘outline-width’, and ‘outline-color’三个值。

本规范没有定义多个重叠的outline如何绘制，或者对于部分遮盖在其他元素后边的盒来说怎样绘制outline。

这里有一个在BUTTON元素周围绘制thick厚厚的outline轮廓的例子：

button { outline : thick solid}

脚本可以用于动态改变outline的宽，不会引起回流。

outline轮廓和focus焦点

图形用户界面可以在元素周围使用outline来告诉用户在页面上的那个元素是有焦点的。这些outlines除去任何的borders，且切换outline显示或者关闭不应该引起文档的回流。焦点是在一个文档中用户交互的主题。用户代理支持交互式媒介组必须记录焦点在哪且也必须表现焦点focus。这可以通过使用动态outline和:focus伪类结合来做。

例如，为了当一个元素有焦点的时候再其周围绘制一个厚厚的黑色线，且当其激活时变成厚厚的红色的线，可以使用如下规则：

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

放大Magnification

CSS工作组认为放大一个文档或者文档的一部分不应该通过样式表指定。用户代理可以用不同的方式支持这样的放大。

当放大一个页面的时候，用户代理应该保留定位元素之间的关系。例如，一组图像和叠加文本元素组成的漫画。当放大一个页面时，用户代理应该保持文本在漫画放大区域里边。

发布于: 2014年 08月 19日