第十三章 用户界面样式
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
初始值:对简写属性未定义
应用于:所有元素
继承性:无
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
初始值:对简写属性未定义
应用于:所有元素
继承性:无