W3C 使用特定的语法来定义所有可能在 CSS 属性中使用的值。如果你曾经看过 CSS 规范，你可能已经见过这种语法的使用 – 比如 border-image-slice 语法。让我们来看看：
|
1 |
<'border-image-slice'> = [<number> | <percentage>]{1,4} && fill? |
这个语法可能很难理解-如果你不知道其中的各个符号和他们是怎样生效的话。但是，这是值得花时间去学习的。如果你理解了 W3C 是怎样定义这些属性值，你就能理解 W3C 的任何 CSS 规范。
巴科斯范式
我们将从巴科斯范式开始，因为这会帮助我们理解 W3C 的属性值语法。 巴科斯范式（ BNF ）是一种用来描述计算机语言语法的符号集。它的设计是明确的，所以对于如何表示语言这方面不存在分歧或歧义。 如今广泛使用的是巴科斯范式的扩展和编译版本，包括扩展巴科斯范式（ EBNF ）和扩充巴科斯范式（ ABNF ）。 一个 BNF 规范是一组按照下面的方式书写的规则：
|
1 |
<symbol> ::= __expression__ |
左边的部分总是一个非终结符，随后是一个 ::= 符号，这个符号的意思是“可以被替换为”。右边是一个 __expression__ ,包含一个或更多用来推导左边符号的含义的符号。 BNF 的基本规范说，“左边的任何都可以被右边的替换”。
非终结符和终结符
非终结符是可以被替换或再细分的符号。在 BNF 中，非终结符出现在 < > 中。在下面的例子中，<integer>和<digit>是非终结符。
|
1 |
<integer> ::= <digit> | <digit><integer> |
终结符就代表一个值不可被替换或者再细分。在下面的例子中，所有的数值都是终结符。
|
1 |
<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
CSS 属性值语法
虽然 W3C 的 CSS 属性值语法是基于 BNF 的概念，但它还是有差异的。相似之处在于它开始于非终结符，不同之处在于它使用“组合值”这种表达式来描述符号。 在下面的例子中，<line-width>是一个非终结符，<length>，thin，medium 和 thick 就是组合值。
|
1 |
<line-width> = <length> | thin | medium | thick |
组合值
有四种类型的组合值：关键词，基本数据类型，属性数据类型和非属性数据类型。
1.关键词
关键词出现时不带引号或者尖括号。它们被用作属性值。因为它们不能被替换或者进一步细分，所以它们是终结符。在下面的例子中，thin ，medium 和 thick 都是关键词。这意味着它们可以被用作我们 CSS 中的值。
|
1 |
<line-width> = <length> | thin | medium | thick |
2.基本数据类型
基本数据类型定义核心值，如<length>和<color>。它们是非终结值因为它们可以被实际的长度值或者颜色值来替换。在下面的例子中，<color>符号是一个基本数据类型。
|
1 |
<'background-color'> = <color> |
这个<color>在我们的 CSS 中可以被一个真实的颜色值替换，使用一个关键词，一个扩展的关键词，一个 RGB 颜色值，RGBA 值，HSL 或者 HSLA 值，或者 transparent 这个关键词。
|
1 2 3 4 5 6 7 |
.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'>字符是一个属性数据类型。
|
1 |
<'border-widt 3C 使用特定的语法来定义所有可能在 CSS 属性中使用的值。如果你曾经看过 CSS 规范，你可能已经见过这种语法的使用 – 比如 border-image-slice 语法。让我们来看看：
这个语法可能很难理解-如果你不知道其中的各个符号和他们是怎样生效的话。但是，这是值得花时间去学习的。如果你理解了 W3C 是怎样定义这些属性值，你就能理解 W3C 的任何 CSS 规范。
巴科斯范式我们将从巴科斯范式开始，因为这会帮助我们理解 W3C 的属性值语法。 巴科斯范式（ BNF ）是一种用来描述计算机语言语法的符号集。它的设计是明确的，所以对于如何表示语言这方面不存在分歧或歧义。 如今广泛使用的是巴科斯范式的扩展和编译版本，包括扩展巴科斯范式（ EBNF ）和扩充巴科斯范式（ ABNF ）。 一个 BNF 规范是一组按照下面的方式书写的规则：
左边的部分总是一个非终结符，随后是一个 非终结符和终结符非终结符是可以被替换或再细分的符号。在 BNF 中，非终结符出现在
终结符就代表一个值不可被替换或者再细分。在下面的例子中，所有的数值都是终结符。
CSS 属性值语法虽然 W3C 的 CSS 属性值语法是基于 BNF 的概念，但它还是有差异的。相似之处在于它开始于非终结符，不同之处在于它使用“组合值”这种表达式来描述符号。 在下面的例子中，
组合值有四种类型的组合值：关键词，基本数据类型，属性数据类型和非属性数据类型。 1.关键词关键词出现时不带引号或者尖括号。它们被用作属性值。因为它们不能被替换或者进一步细分，所以它们是终结符。在下面的例子中，
2.基本数据类型基本数据类型定义核心值，如
这个
3.属性数据类型属性数据类型是一个用来定义属性真实值的一个非终结符号。它用尖括号包住属性的名字(使用引号包住)。在下面的例子中，
|
