CSS 笔记

# 值定义语法

对于某一个 CSS 属性允许取哪些值的问题，CSS 规范中通过 CSS 属性值定义语法来限定 CSS 属性合法取值，这种语法包含：

  • 关键字
  • 数据类型
  • 符号
    • 字面符号
    • 组合符号
    • 数量符号

# 关键字

  • 全局关键字 inherit, initial, unset, revert
  • 局部关键字 auto, none 等

# 数据类型

  • <和>之间的文字表示值的类型。如<color>,<length>.

# 字面符号

  • , 并列分隔符。用于分隔多个并列值，或分隔函数参数值
  • / 缩写分隔符。用于在 CSS 缩写中分隔类型相同但属于不同 CSS 属性的值，以及用在部分 CSS 函数中

# / 的使用

使用 / 进行分隔的地方，斜杠前后的数据类型一定是相同或部分相同的，不使用斜杠就无法区分。

例如：

  • background 后： background-position / background-size

  • font 后： font-size / line-height

# 值组合方式

  • 空格。以空格分隔的两个或多个关键字，必须以给定的顺序使用。
  • |. 以竖线分隔两个或多个备选值，必取其中一个值，且只能取一个。
  • ||. 以双竖线分隔的值，表示既可以取其中一个值，也可以同时取两个值，顺序任意。
  • &&. 以双连字号分隔的两个或多个值，表示必须同时取所有值，循序任意。
  • [...]. 方括号用于分组。分组括号内优先级最高

# 修饰符

  • * 重复零次或多次
  • + 重复一次或多次
  • # 重复一次或多次，且多次出现时以逗号 , 分隔。后面可以指定次数，如 <number>#{3}
  • ? 可选的（零次或一次）
  • ! 必须产生一个值，常用在分组后
  • {A} A 次
  • {A,} 至少 A 次
  • {A,B} 至少 A 次，最多 B 次

# 参考

https://www.w3.org/TR/css-values/#value-defs (opens new window)

属性值全局关键字 →