css整理-02 颜色和字体

旧城冷巷雨未停 提交于 2019-12-25 23:24:11

颜色

命名颜色

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-sizefont-family必须存在并以此顺序作为font的最后两个值;
  • line-height作为font-size的补充,是一个可选的并以斜线分隔的值

系统字体

  • caption: 用于又标题的控件,如按钮
  • icon: 用于对图标加标签
  • menu: 用于菜单
  • message-box: 用于对话框
  • small-caption: 对小控件加标签
  • status-bar: 用于窗口状态条
  • 如果机器上不存在一种字体,用户代理会试图寻找接近的字体;
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!