第十三章 用户界面样式

第十三章 用户界面样式

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
初始值：对简写属性未定义
应用于：所有元素
继承性：无