今天小编跟大家讲解下有关深入理解 CSS 属性值语法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关深入理解 CSS 属性值语法 的相关资料，希望小伙伴们看了有所帮助。
万维网联盟（W3C） 使用了一套特别的语法来定义 css 的属性值 能让所有的 css 属性都用。如果你曾看过 css 规范 你可能已经见过这套语法了。就像 border-image-slice 的语法 让我们看看：
<'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?如果你不知道这些符号以及它们如何工作的话 这套语法可能非常难理解。然而 这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的 你就可以理解 W3C css 规范中任意一个了。
巴科斯范式首先 我们看看巴科斯范式（Backus-Naur Form） 因为这能帮我们理解 W3C 的属性值语法。
Backus–Naur Form （BNF） 是用来描述计算机语言语法的正式符号集。它被设计得很清晰 所以在语言如何表达方面不会造成二义或者模糊。
最初 Backus-Naur 符号集有很多的扩展与变种在今天都在使用 包括 扩展巴科斯范式（EBNF）和扩充巴克斯范式（ABNF）.
一个 BNF 规范是按下面的形式编写的一套规则：
<symbol> ::= __expression__式子左边通常是一个非终止符 跟着一个::=符号 代表着“可被换为”。式子右边__expression__由一或多个符号序列组成 这些符号序列被用来推导左侧符号的意义。
BNF 规范从根本上说 “无论左侧式子是什么 也无论右侧式子是什么 左侧的式子都能被右侧的式子替换”。
非终止符与终止符非终止符是指能在之后被替换或被分解的符号。在 BNF 中 非终止符通常都在尖角括号中 <与>。在下面的例子中 <integet>和<digit>是非终止符。
<integer> ::= <digit> | <digit><integer>终止符表明这个值不能被替换或者分解。在下面的例子中 所有的数值都是终止符。
<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9css 属性值语法尽管 W3C css 属性值语法是基于 BNF 的概念 它们也有一些不同。像 BNF 的是 它起始于一个非终止符。不像 BNF 的是 它还描述了用在表达式中作为“成分值（component values）”的符号。
在下面的例子中 <line-width>是非终止符 而<length> thin medium和thick是成分值。
<line-width> = <length> | thin | medium | thick成分值有四种成分值：关键字、基本数据类型、属性数据类型与非数据数据类型。
1. 关键字值关键字值不被引号或尖角括号包围。它们可直接作为属性值。因为它们不能再被代替或分解 所以它们是终止符。在下面的例子中 thin、medium和thick都是关键字值。这意味着它们在 css 中直接使用。
<line-width> = <length> | thin | medium | thick2. 基本数据类型基本数据类型定义了一些核心值 如<length>与<color>。它们是非终止符 因为它们可以被替换成真实的长度或颜色值。在下面的例子中<color>是基本数据类型。
<'background-color'> = <color><color>可在我们的 css 中 通过关键字 扩展关键字 RGB、RGBA、HSL、HSLA 或transparent关键字 被替换为实际的颜色值。
.example { background-color: red; }.example { background-color: honeydew; }.example { background-color: rgb(50%,50%,50%); }.example { background-color: rgba(100%,100%,100%,.5); }.example { background-color: hsl(280,100%,50%); }.example { background-color: hsla(280,100%,50%,0.5); }.example { background-color: transparent; }3. 属性数据类型属性数据类型定义了属性实际的名字 是非终止符。它由包含在尖角括号中的属性名（包含引号）定义。在下面的例子中 <'border-width'>是属性数据类型。
<'border-width'> = <line-width>{1,4}属性数据类型可作为属性直接出现在我们的 css 文件中。在下面的例子中 border-width属性给.exmplate类定义了 2px 的边框。
.example { border-width: 2px; }4. 非属性数据类型非属性数据类型并不与属性分享同一个名字 是非终止符。然而 它定义了某个（些）属性的一些层面。例如 <line-width>不是个属性 但它是一个定义了各种<border>的数据类型。
<line-width> = <length> | thin | medium | thick<'border-width'> = <line-width>{1,4}成分值组合器（Combinator）使用下面的五个方法 成分值能被分配至属性值组合器：
1. 相邻值成分值接连而写意味着所有这些值都必须按给定的顺序出现。在下面的例子中 语法列出了三个不同的值：value1,value2与value3。在 css 规则中 这三个值必须按照正确的顺序出现才算合法。
/* Component arrangement: all in given order */<'property'> = value1 value2 value3/* Example */.example { property: value1 value2 value3; }2. 双与符号（&）分开两个或更多成分值的双与符号（&&）意味着 这些值必须出现 顺序任意。在下面的例子中 语法列出了两个值 由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。
/* Component arrangement: all, in any order */<'property'> = value1 && value2/* Examples */.example { property: value1 value2; }.example { property: value2 value1; }3. 单管道符号分开两个或更多成分值的单管道符号（|）意味着 这些值中只需一个值出现。在下面的例子中 语法列出了三个值 由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：
/* Component arrangement: one of them must occur */<'property'> = value1 | value2 | value3/* Examples */.example { property: value1; }.example { property: value2; }.example { property: value3; }4. 双管道符号分开两个或更多选择的双管道符号（||）意味着 这些值中一个或多个值必须出现 顺序任意。在下面的例子中 语法列出了三个值 由双管道符号分开。在你写 CSS 规则来匹配这个语法时 有大量可选的选择 —— 你可以使用一个 两个或三个值 以任意顺序。
/* Component arrangement: one or more in any order */<'property'> = value1 || value2 || value3/* Examples */.example { property: value1; }.example { property: value2; }.example { property: value3; }.example { property: value1 value2; }.example { property: value1 value2 value3; }...etc5. 中括号包住了两个或更多选择的中括号（[ ]）意味着其中的成分值属于一个单独的组。在下面的例子中 语法列出了三个值 但其中两个在中括号中 所以它们属于一个组。所以在 CSS 规则中有两种选择：value1与value3或value2与value3。
/* Component arrangement: a single grouping */<'property'> = [ value1 | value2 ] value3/* Examples */.example { property: value1 value3; }.example { property: value2 value3; }成分值累乘器（Multipliers）使用下列 8 个方法之一 成分值也可被重用：
1.?问号（?）表明其之前的类型 关键字或者组 是可选的且出现零次或一次。在下面的例子中 第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着 value1必须出现 但我们也可使用value1和value2 以逗号分隔。
/* Component multiplier: zero or one time */<'property'> = value1 [, value2 ]?/* Examples */.example { property: value1; }.example { property: value1, value2; }2.*星号（*）表明其之前的类型 关键字或者组出现零次或更多次。在下面的例子中 第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着 value1必须出现 但我们也能随我们想地使用value2任意次 每个成分值以逗号分隔。
/* Component multiplier: zero or more times */<'property'> = value1 [, <value2> ]*/* Examples */.example { property: value1; }.example { property: value1, <value2>; }.example { property: value1, <value2>, <value2>; }.example { property: value1, <value2>, <value2>, <value2>; }...etc3.+加号（+）表明其之前的类型 关键字或者组出现一次或更多次。在下面的例子中 放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。
/* Component multiplier: one or more times */<'property'> = <value>+/* Examples */.example { property: <value>; }.example { property: <value> <value>; }.example { property: <value> <value> <value>; }...etc4.{A}大括号（{A}）中包含一个数字表明其之前的类型 关键字或者组出现A次。在下面的例子中 value 的两个实例都必须根据出现才合法。
/* Component multiplier: occurs A times */<'property'> = <value>{2}/* Examples */.example { property: <value> <value> ; }5.{A,B}大括号（{A,B}）中包含由逗号分开的两个数字表明其之前的类型 关键字或者组出现至少A次 至少B次。在下面的例子中 最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。
/* Component multiplier: at least A and at most B */<'property'> = <value>{1,3}/* Examples */.example { property: <value>; }.example { property: <value> <value>; }.example { property: <value> <value> <value>; }6.{A,}在{A,}中B被省去了 这意味着至少有A次重复 而没有上限。在下面的例子中 至少需要使用一个成分值 但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。
/* Component multiplier: at least A, with no upper limit */<'property'> = <value>{1,}/* Examples */.example { property: <value>; }.example { property: <value> <value>; }.example { property: <value> <value> <value> ; }...etc7.#井号（#）表明其之前的类型 关键字或者组出现一次或多次。在下面的例子中 一个或多个成分值可能被使用 这些成分值以逗号分离。
/* Component multiplier: one or more, separated by commas */<'property'> = <value>#/* Examples */.example { property: <value>; }.example { property: <value>, <value>; }.example { property: <value>, <value>, <value>; }...etc8.!一个组后的感叹号（!）意味着该组是必须的且产生至少一个值。在下面的例子中 value1是必须的 以及一个来自与由value2与value3组成的组的值。该属性只有两个属性值；它们是 value1与value2或value1与value3。
/* Component multiplier: required group, at least one value */<'property'> = value1 [ value2 | value3 ]!/* Examples */.example { property: value1 value2; }.example { property: value1 value3; }一个例子：<'text-shadow'>语法让我们把<'text-shadow'>当作例子观察一番。这是它在规范里的定义：
<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#我们可以拆分这些符号：
|表明我们可以使用关键字none或者一个组#表明我们可以使用这个组一次或多次 以逗号分割在组中 {2,3}表明我们可以使用 2 或 3 个长度值&&意味着我们必须包括所有值 但顺序可以任意有点棘手的是 <color>后有一个? 这意味着其可能出现零次或一次。用简单的话讲 这也可以被写成：
指明了 none或一个或多个由逗号分离的组 其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。这意味着我们能够以很多不同的方式来写text-shadow属性的值。例如 可以设置其为none:
.example { text-shadow: none; }我们也可以只写两个长度值 这意味着我们将设置阴影水平与竖直方向的便宜 但不会有模糊半径或者颜色值。
因为没有定义模糊半径 将会使用初始值0；所以 该阴影的边缘会很锋利。由于没有定义颜色 所以阴影将使用文本的颜色。
.example { text-shadow: 10px 10px; }如果我们使用了三个长度值 我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。
.example { text-shadow: 10px 10px 10px; }我们也可以加入颜色 且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中 red 值可以放在任一长度值的后面。
.example { text-shadow: 10px 10px 10px red; }.example { text-shadow: red 10px 10px 10px; }最后 我们也能包含多个文本阴影 写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层 其它的层在其后。阴影不能覆盖在文本上。在下面的例子中 红色阴影将在绿黄色阴影的顶上。
.example { text-shadow: 10px 10px red, -20px -20px 5px lime;}结论如果你以写 CSS 为生 了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的 CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。
来源：爱蒂网