css整理－02 颜色和字体

颜色

命名颜色

RGB指定颜色

• 数值: 0-255
• 百分比
• 三元组：红绿蓝

16进制RGB

web安全颜色

• 在256色计算机系统上总能避免抖动的颜色
• 表示为rgb值20%和51的倍数
• web安全色的简写16进制是0,3,6,9,C,F

长度单位

绝对长度单位

• in, cm, mm, pt, pc
• 实际中几乎不使用

相对长度单位

• 印刷度量单位:em, ex,像素:px
• 度量的实际距离可能因为屏幕分辨率，可视区的宽度，用户选择等原因而改变
• 1个em定义为一种给定字体的font-size值; (实际上是高度值)
• ex指的是所用字体中小写x的高度；如果两段文本像素相同但字体不同，ex值也会不同

选择

• 最好的度量单位是相对长度单位，特别是em
• 大部分情况下｀1ex = 0.5em`
• 除了设置文本大小，对于元素的其他方面更适合像素，如边框，定位；

字体系列

特定字体系列

通用字体系列

• Serif: 字体成比例并且又上下短线
• Sans-serif: 字体成比例，没有上下短线
• Monospace: 字体不成比例,通常用于模拟打印机打出的文本
• Cursive: 不成比例，模范人手写的文本
• Fantasy： 无法用任何特征来定义

使用

• 直接使用通用字体，用户代理会选择一个特定字体
• 直接使用特定字体，但如果没有这个字体，则会使用默认字体
• 由于上面的原因，一般使用特殊字体加通用字体的格式: h1{font-family: Georgia, serif}
• 也可以指定多个特定字体按照顺序查找; (注意要加逗号，可能需要引号)

字体加粗

值:

normal, bold
相对值: lighter, bolder

原理

• 定义了100-900的关键字，这些数字没有固有的加粗度；一般400=normal, 700=bold;
• 如果将一个元素加粗设置为bolder,用户代理首先必须确定从父元素继承的font-weight;然后选一个值，它对应于比所继承的值更粗的一个字体加粗;
• 字体变细同上的原理

字体大小

• font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小;

绝对大小

• 值: xx-small, x-small, small, medium, large, x-large, xx-large
• 这些关键字并没有明确地定义，而是根据medium和缩放因子相对地定义的;

相对大小

• 值: larger, smaller
• 根据父元素继承和缩放因子变化，其大小不会限制在绝对大小范围内;

百分数和大小

风格和变形

font-style:

• italic是一个单独的字体风格，对每个字母的结构有一些小改动
• oblique则是正常竖直文本的倾斜版本
• 实际上，很少又浏览器复杂到足以区分它们

字体变形

• font-variant: small-caps: 大写字母的小型版本

font简写

• |font-style|font-variant|font-weight|font-size(/line-height)|font-family|
• 前三个值允许采用任何顺序，font-size和font-family必须存在并以此顺序作为font的最后两个值;
• line-height作为font-size的补充，是一个可选的并以斜线分隔的值

系统字体

• caption: 用于又标题的控件，如按钮
• icon: 用于对图标加标签
• menu: 用于菜单
• message-box: 用于对话框
• small-caption: 对小控件加标签
• status-bar: 用于窗口状态条
• 如果机器上不存在一种字体，用户代理会试图寻找接近的字体；