文章目录
- [关键字]
- 简单规律
- [数量符号]
- 总结
reference
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
只能出现一次。
总结
- 总结
符号 | 名称 | 描述 | 示例 |
组合符号 | |||
并置 | 各部分必须出现且按顺序出现 | | |
| “与”组合符 | 各部分必须出现,但可以不按顺序 | |
| “或”组合符 | 各部分至少出现一个,可以不按顺序 | |
| “互斥”组合符 | 各部分恰好出现一个 | |
| 方括号 | 强调优先级 | |
数量符号 | |||
无数量符号 | 恰好一次 | | |
| 星号 | 零次、一次或多次 | |
| 加号 | 一次或多次 | |
| 问号 | 零次或一次(即可选) | |
| 大括号 | 至少 | |
| 井号 | 一次或多次,但多次出现必须以逗号分隔 | |
| 叹号 | 组必须产生一个值 | |