值和单位

关键字、字符串和其他文本值

  1. CSS3 三个 global keywords:inherit、initial、unset
  2. inherit 也可设置默认不继承的属性
  3. initial 设置为默认值,属性没有默认值时设置为用户代理设置的值
  4. unset 当属性可继承时行为与 inherit 相同,非继承属性时行为与 initial 相同
  5. IE 11 不支持它们,也不支持 all
  6. 属性 all 的值只能使用 global keywords
  7. 字符串值,使用单引号或双引号包起来的直接引用的值,可用 \ 在行末断行,真的要插入换行符使用 \A
  8. url值使用相对地址时,相对的是样式文件的位置,url和左括号之间不能插入空格
  9. images:一般是 url 值,或者 image-set(),或者 gradients 渐变图片
  10. 有些属性接受标识符值,用户自定义的 identifier

数值和百分比

  1. 整数值 +- 符号,一些属性超出取值范围的时候,取距离最近的值,z-index 没有严格范围 ±1,073,741,824 (±230)
  2. 数值,包含整数值和浮点值,超出范围时一些属性会失效,一些会同整数值行为
  3. 百分比一般是相对于其他值的值,任何接受百分比值的属性将定义对允许的百分比值范围的任何限制,还将定义相对计算百分比的方式。
  4. 分数值,标签 fr,用于 Grid Layout

距离

度量长度,长度都由正/负的数值加上标签(缩写的长度单位),0 不需要跟随单位

  1. 绝对长度单位
  2. in、cm、mm、q(1cm = 40q)、pt(1in = 72pt)、pc(1pc = 12pt)、px(1/96 in defined in css)
  3. CSS 2.1 / 3 建议 96 ppi,多数显示器高于此数值,打印设备假定 96px 为1inch
  4. 分辨率单位,用于 Media query 和 响应式设计
  5. dpi 每英寸点数,打印纸点、LED 屋里像素、电子墨水显示器 Kindle
  6. dpcm 同上,每厘米点数
  7. dppx 每个 CSS px 单位的点数,CSS3 约定比率 1dppx 等于 96dpi
  8. 相对长度单位
  9. em,相对于本元素 font-size 的值,当设置 font-size 属性时,em 是相对于父元素的 font-size;名称来源于小写字母 m 的宽度, 但 CSS 中并不精确等于
  10. ex,小写字母 x 的高度,不同字体有不同的 x 高度
  11. rem,基于根元素 font-size 值,基于绝对 px 而非相对字体大小 ,html {font-size: 75%;} 得到值12px 而非 75%(假设默认 font-size 是 16px);支持 initial 关键字的浏览器中,如果根元素没有设置字体大小,font-size: 1rem 等于 font-size: initial
  12. Viewport 相对单位, CSS3 中新增,依据视口尺寸百分之一
  13. vw、vh、vmin、vmax(视口宽高中较小或较大的一个)

计算值

  1. calc() 可进行简单四则运算,可以使用括号
  2. 可使用在这些值类型允许使用的地方:长度、频率、角度、时间、百分比、数值、整数
  3. + - 号两边必须使用同样的值类型,* 号一边必须是数值,/ 号右侧必须是数值,不能 0 除
  4. + - 号两边必须有空格, * / 非必须
  5. 规范要求用户代理必须支持最少 20 terms

属性值

  1. attr() 少数 CSS 属性允许使用当前元素 HTML 属性的值:p::before {content: "[" attr(id) "]";}
  2. input[type="text"] {width: attr(maxlength em);}
  3. 2016 年底还都不支持

颜色

  1. 命名颜色, 16 to 148 in CSS Color Module Level 4 base on X11 RGB
  2. RGB 和 RGBa 颜色
    1. rgb(R, G, B) 取值 0 - 255、0% - 100%,超出范围取上下限,浮点数值四舍五入为 0 - 255 整数
    2. Rgba(R, G, B, a),a 取值 0 - 1,超出范围无效或重置为上下限,不能使用百分比
    3. 十六进制 RGB
    4. 十六进制 RGBa,2017 年底 Firefox 和 Safari 支持, Chrome 和 Opera 试验性实现
  3. HSL 和 HSLa 颜色:CSS3 新增, H 色调 0 - 360、 S 饱和 0 - 100%、 L 亮度 0 - 100%
  4. 颜色关键字,可使用在任何允许使用颜色值的地方
    1. transparent 完全透明颜色,背景颜色默认值,常用于定义渐变
    2. currentColor 当前元素 color 属性的值

角度

  1. 数值 + 单位:deg 360角度、grad 400一圈、rad 弧度 2π、turn 一圈

时间和频率

  1. 数值 + s/ms
  2. 数值 + Hz/kHz 忽略大小写

位置

  1. 取值顺序
    [
      [ left | center | right | top | bottom | <percentage> | <length> ] |
      [ left | center | right | <percentage> | <length> ]
      [ top | center | bottom | <percentage> | <length> ] |
      [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
      [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
    ]
    
  2. 如果只声明一个值,第二个值默认设置为 center
  3. 如果声明两个值且第一个值为长度或百分比,则第一个值 always 被当做水平值
  4. 如果声明四个值,必须有两个值是长度或百分比,每个值前面有一个关键字,right 10px bottom 30px 表示从右边向左 10px 和 从底边向上 30px
  5. 如果定义三个值,与四个值一样,最后一个值默认为 0

自定义值

  1. 以 – 开始, 区分大小写
  2. 可以 scope 覆盖
  3. 记得使用 @supports() 验证哦
  4. 浏览器支持尚不确定
    @supports (color: var(--custom)) {
     /* variable-dependent styles go here */
     }
     @supports (--custom: value) {
     /* alternate query pattern */
     }
    html {
     --gutter: 3ch;
     --offset: 1;
     }