MDN_CSS属性值定义语法notations(参考手册中用于说明语法而采用的记号符号)/标准语法解读方式(Formal syntax/where)

文章目录

• reference
• • Table of contents
  • [基本组成元素]
  • • [关键字]
    • • 一般关键字
      • 特殊关键字：`inherit`、`initial`和`unset`
    • [符号]
    • 斜杠('`/`')&逗号('`,`')
    • [带类型的参数]
    • • 基本类型
      • 其他类型
  • Formal syntax(where)
  • • where
    • 综合性取值语法示例
• 简单规律
• • 顺序
  • 优先级
  • 数量
  • • [“与”组合符：&&]
    • [“或”组合符：||]
    • [方括号组合符[]]
    • [并置(空格组合符)]
    • [“互斥”组合符：|]
  • [数量符号]
  • • 星号
    • [加号 (`+`)]
    • [问号 (`?`)]
    • [大括号 (`{ }`)]
    • [井号 (`#`)]
    • [叹号 (`!`)]
  • 总结

reference

• CSS属性值定义语法

Table of contents

• 基本组成元素
• 组合符号
• 数量符号
• 总结
• 规范
• 参考条目

---

• 什么是CSS的值?
• 数字，长度和百分比
• 颜色
• 图片
• 位置
• 字符串和标识符
• 函数
• 总结

[基本组成元素]

[关键字]

• 关键字

一般关键字

• 有预定义含义的一般关键字按字面意义出现，不需要引号，如auto, smaller 或 ease-in。

特殊关键字：inherit、initial和unset

• 所有CSS属性值都可以使用inherit、initial和unset，它们的定义贯穿 CSS 始终。
• 它们未显示在值定义中，但都是隐含可用的。

[符号]

• 符号

斜杠(’/’)&逗号(’,’)

• CSS中，有一些符号是可以出现的，比如斜杠(’/’)或者逗号(’,’)等。
• 它们用来分隔属性值：
  • 逗号用来分隔数个并列值(不是并置)，或者分隔函数的参数；
  • 斜杠用来分隔一个值的多个部分，通常用在CSS缩写中分离具有相同类型但属于不同属性的组件。

这两种符号会以其字面意义出现在CSS属性值定义中。

[带类型的参数]

• 带类型的参数

基本类型

• 一些类型在CSS中经常出现，CSS规范中将其专门定义，称为 基本类型
  • 用一对尖括号表示：’<‘与’>’，
  • 例如：<angle>, <string>, …

其他类型

• 其他类型同样也用一对尖括号表示：’<‘与’>’。

• 其他类型分为两种：

• 共享同一个属性名称的数个类型。在这种情况下，数据类型与属性共享同一组值。
  • 它们出现在一对引号之中，经常用于属性的缩写。
• 不共享同一个属性名称的数个类型，它们与基本类型很相似，不同是：这种参数仅在规范中相关属性的描述处定义，而基本类型在规范中有专门定义。

Formal syntax(where)

以background-color的取值语法<color>为例

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
 
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
 
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

where

• where 表示对上一层出现的数据类型<xxx>进行进一步的解释
• 直到解释到最基础的类型(比如仅包含<number>,<percentage>等类型的时候结束
  

综合性取值语法示例

综合属性backgroud的取值语法的层层解释

简单规律

顺序

• 只有并置(后面会提到)才关注顺序

优先级

数量描述符>space>&&>||>|

• 数量描述符不能叠加出现，并且优先级最高
• 并置(space)的优先级高于“与”(&&)组合符。
• “与&&”组合符的优先级高于“或||”组合符
• “或||”组合符的优先级高于“互斥|”组合符

数量

• ||大等于1个
• |等于1个
• &&等于指定数量(大等于2)
• space并置(空格):等于指定数量(大等于2)

[“与”组合符：&&]

• “与”组合符：&&

“与”组合符连接的各个部分都 必须出现，但是顺序任意 。(在上方的方括号组合的例子中,就用到了与组合符表达式

例如：

bold && <length>

以下均为该例的合法取值：

• bold 1em
• bold 0
• 2.5cm bold
• 3vh bold

但以下不是合法取值：

• bold因为长度值没有出现。
• bold 1em bold因为各部分必须恰好出现一次。

• 注：并置的优先级高于“与”组合符。
• 例如bold thin && <length>等价于[ bold thin ] && <length>。(方括号将数个基本元素组成一个整体，用来 强调组合的优先级)
• 它们的合法取值是：bold thin <length>或<length> bold thin但不是bold <length> thin。

[“或”组合符：||]

• “或”组合符：||

“或”组合符表示其连接的所有组成元素是可选的， 次序任意，但是至少其中一个要出现 。“或”组合符通常用来描述属性缩写 (en-US)中的各部分。

<'border-width'> || <'border-style'> || <'border-color'>

以下均为该例的合法取值：

• 1em solid blue
• blue 1em
• solid 1px yellow

但以下不是合法取值：

• blue yellow因为一个组成部分最多出现一次。
• bold因为它不允许出现。

• 注： “与”组合符的优先级高于“或”组合符，比如 bold || thin && <length>等价于 bold || [ thin && <length> ]。它们的合法取值是：bold, thin <length>, bold thin <length>, 或者 thin <length> bold ，但不是：<length>``<span> </span>bold thin因为bold若出现，则必须出现在 thin && <length>整体的前面或后面。

[方括号组合符[]]

• 方括号组合符[]

• 方括号将数个基本元素组成一个整体，用来 强调组合的优先级(同一个方括号(整体)内不区分顺序) 。

• 但是不表示可选的意思(和命令行描述语言docopt有所不同(docopt)

• 例如：

bold [ thin && <length> ]

以下均为该例的合法取值：

• bold thin 2vh
• bold 0 thin
• bold thin 3.5em

但以下不是合法取值：

• thin bold 3em 因为 bold被放置在方括号定义的整体之中。根据定义，bold必须出现在方括号定义的整体之前。

[并置(空格组合符)]

• 并置(空格组合符)

并置是指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都 必须出现并且按所规定的顺序出现(这和方括号规则不同) 。例如：

bold <length> , thin

以下均为该例的合法取值：

• bold 1em, thin
• bold 0, thin
• bold 2.5cm, thin
• bold 3vh, thin

但以下不是合法取值：

• thin 1em, bold因为顺序有错。
• bold 1em thin因为所有元素都必须出现，包括逗号。
• bold 0.5ms, thin因为 ms是时间值，不是长度值：<length>

[“互斥”组合符：|]

• “互斥”组合符：|

“互斥”组合符表示各组成部分中只能 恰好出现一个 ，通常用来分隔一个属性的所有可选值。例如：

<percentage> | <length> | left | center | right | top | bottom

以下均为该例的合法取值：

• 3%
• 0
• 3.5em
• left
• center
• right
• top
• bottom

但以下不是合法取值：

• center 3% as only one of the components must be present.
• 3em 4.5em as a component must be present at most one time.

注： “或”组合符的优先级高于“互斥”组合符，比如bold | thin || <length>等价于bold | [ thin || <length> ]。它们的合法取值是：bold, thin, <length>, <length> thin, 或thin <length>，但不能是bold <length>，因为“互斥”组合符所连接的数个部分中，只有一个能出现。

[数量符号]

• 数量符号

数量符号用来描述一个元素可以出现多少次。若不标注，则这个元素比如恰好出现一次。

• 注意数量描述符不能叠加出现，并且优先级最高。

星号

• 星号 (*)

星号表示可以出现 零次（即不出现），一次，或任意多次 。例如：

bold smaller*

以下均为该例的合法取值：

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

但以下不是合法取值：

• smaller 因为 bold并置于 smaller，必须出现在任何 smaller之前。

[加号 (+)]

• 加号 (+)

加号表示可以出现 一次或多次 。例如：

bold smaller+

以下均为该例的合法取值：

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

但以下不是合法取值：

• bold 因为 smaller必须出现至少一次。
• smaller 因为 bold 是并置关系，必须在 smaller之前出现。

[问号 (?)]

• 问号 (?)

问号表示可选，即出现 零次或一次 。例如：

bold smaller?

以下均为该例的合法取值：

• bold
• bold smaller

但以下不是合法取值：

• bold smaller smaller 因为 smaller最多出现一次。
• smaller 因为 bold是并置关系，必须出现在 smaller之前。

[大括号 ({ })]

• 大括号 ({ })

大括号包含两个以逗号分隔的整数A与B，表示 最少出现A次，且最多出现B次 。例如：

bold smaller{1,3}

以下均为该例的合法取值：

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller

但以下不是合法取值：

• bold 因为 smaller 至少要出现一次。
• bold smaller smaller smaller smaller 因为 smaller 最多出现三次。
• smaller 因为 bold是并置关系，必须出现在 smaller之前。

[井号 (#)]

• 井号 (#)

井号表示 可以出现一次或多次 ，与加号相似。但是其多次出现必须 以逗号分隔 。例如：

bold smaller#

以下均为该例的合法取值：

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller and so on.

但以下不是合法取值：

• bold 因为 smaller必须至少出现一次。
• bold smaller smaller smaller 因为多个 smaller必须以逗号分隔。
• smaller 因为 bold是并置关系，必须出现在 smaller之前。

[叹号 (!)]

组后面的叹号表示该组是必需的，并且至少产生一个值；即使组内项目的语法允许省略全部的值，也至少要保留一个值。

[ bold? smaller? ]!

以下均为该例的合法取值：

• bold
• smaller
• bold smaller

但以下不是合法取值：

• bold 和 smaller都没有：因为至少要出现一个。
• smaller bold：因为 bold 必须出现在 smaller 前面。
• bold smaller bold：因为 bold 只能出现一次。

总结

• 总结

符号	名称	描述	示例
组合符号
	并置	各部分必须出现且按顺序出现	solid <length>
&&	“与”组合符	各部分必须出现，但可以不按顺序	<length> && <string>
||	“或”组合符	各部分至少出现一个，可以不按顺序	<'border-image-outset'> || <'border-image-slice'>
|	“互斥”组合符	各部分恰好出现一个	smaller | small | normal | big | bigger
[ ]	方括号	强调优先级	bold [ thin && <length> ]
数量符号
	无数量符号	恰好一次	solid
*	星号	零次、一次或多次	bold smaller*
+	加号	一次或多次	bold smaller+
?	问号	零次或一次（即可选）	bold smaller?
{A,B}	大括号	至少 A次，至多 B次	bold smaller{1,3}
#	井号	一次或多次，但多次出现必须以逗号分隔	bold smaller#
!	叹号	组必须产生一个值	[ bold? smaller? ]!