第十三章 用户界面样式

第十三章 用户界面样式

1.系统字体和颜色

系统字体：

a.widget {font: caption}

1.使用系统字体时，本身就是缩写形式，所以打破了font的缩写规则

2.如果想使用系统字体的加粗形式，可以如a.widget {font: caption; font-weight:bold} 不过这里的顺序不能颠倒

3.可以使用的关键字：

caption：由标题控件使用的字体样式，如按钮和下拉控件。

icon：由操作系统图标标签使用的字体样式，如文件和文件夹图标

menu：下拉菜单和菜单列表中使用的字体样式

message-box：对话框文本使用的字体样式

small-caption：标题小控件的标签使用的字体样式

status-bar：窗口状态条中文本使用的字体样式

如果不能确定指定的系统字体，用户代理会使用一组近似的字体样式，如无法使用caption时，用small-caption代替。

系统颜色：建议不使用

2.光标 cursor

值：<uri> default auto pointer crosshair move e-resize

ne-resize nw-resize n-resize se-resize sw-resize

s-resize w-resize text wait help progress inherit

初始值：auto

应用于：所有元素

继承性：有

计算值：对于<uri>为绝对uri，否则根据制定确定。

说明：使用uri时也要留“退路“，如 a.external{cursor: url(global.cur), pointer}

注意之间要用逗号隔开。

3.轮廓

1.元素轮廓的样式，宽度和颜色4边都必须相同，所以不像border一样，可以使用4个值，分别用在4个边上。

2.可以与border同时存在，绘制在border外。

outline-style

值：none dotted dashed solid double groove ridge inset outset inherit

初始值：none

应用于：所有元素

继承性：无

outline-width

值：thin medium thick <length> inherit

初始值：medium

应用于：所有元素

继承性：无

计算值：绝对长度，如果轮廓样式是none，则为0

outline-color

值：<color> invert inherit

初始值：invert（或用户代理的特定值）

应用于：所有元素

继承性：无

说明：invert：与文档中大部分颜色尽量区别。

缩写 outline

值：<outline-color> <outline-style> <outline-width> inherit

初始值：对简写属性未定义

应用于：所有元素

继承性：无