css属性值语法的详细介绍

程序员文章站 2022-04-01 12:33:23

...

万维网联盟（W3C）使用了一套特别的语法来定义 CSS 的属性值，能让所有的 CSS 属性都用。如果你曾看过 CSS 规范，你可能已经见过这套语法了。就像

border-image-slice

的语法，让我们看看：

<'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?

如果你不知道这些符号以及它们如何工作的话，这套语法可能非常难理解。然而，这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的，你就可以理解 W3C CSS 规范中任意一个了。

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 | 9

CSS 属性值语法

尽管 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 | thick

2. 基本数据类型

基本数据类型定义了一些核心值，如

<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; }
...etc

5. 中括号

包住了两个或更多选择的中括号（

[ ]

）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 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 个方法之一，成分值也可被重用：

问号（

）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，

value1

必须出现，但我们也可使用

value1

和

value2

，以逗号分隔。

/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?
/* Examples */
.example { property: value1; }
.example { property: value1, value2; }

星号（

）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，

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>; }
...etc

加号（

）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。

/* Component multiplier: one or more times */
<'property'> = <value>+
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc

{A}

大括号（

{A}

）中包含一个数字表明其之前的类型，关键字或者组出现

次。在下面的例子中，value 的两个实例都必须根据出现才合法。

/* Component multiplier: occurs A times */
<'property'> = <value>{2}
/* Examples */
.example { property: <value> <value> ; }

{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>; }

{A,}

在

{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> ; }
...etc

井号（

）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。

/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#
/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
...etc

一个组后的感叹号（

）意味着该组是必须的且产生至少一个值。在下面的例子中，

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; }

我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。

因为没有定义模糊半径，将会使用初始值

；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。

.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 都会变得更容易了。

以上就是css属性值语法的详细介绍的详细内容，更多请关注其它相关文章！

css属性值语法的详细介绍

巴科斯范式

非终止符与终止符

CSS 属性值语法

成分值

1. 关键字值

2. 基本数据类型

3. 属性数据类型

4. 非属性数据类型

成分值组合器（Combinator）

1. 相邻值

2. 双与符号（&）

3. 单管道符号

4. 双管道符号

5. 中括号

成分值累乘器（Multipliers）

1.
?

2.
*

3.
+

4.
{A}

5.
{A,B}

6.
{A,}

7.
#

8.
!

一个例子：
<'text-shadow'>
语法

结论

HTML5的自定义属性data-*详细介绍和JS操作实例

HTML5的download属性详细介绍和使用实例

android TextView属性的详细介绍分享

ES6中参数的默认值语法介绍

在css3中background-clip属性与background-origin属性的用法介绍

java与c#的语法区别详细介绍

javascript 获取特定的 CSS属性值

Jsp中response对象的所有属性详细介绍

android TextView属性的详细介绍分享

HTML5的自定义属性data-*详细介绍和JS操作实例

css属性值语法的详细介绍

巴科斯范式

非终止符与终止符

CSS 属性值语法

成分值

1. 关键字值

2. 基本数据类型

3. 属性数据类型

4. 非属性数据类型

成分值组合器（Combinator）

1. 相邻值

2. 双与符号（&）

3. 单管道符号

4. 双管道符号

5. 中括号

成分值累乘器（Multipliers）

1. ?

2. *

3. +

4. {A}

5. {A,B}

6. {A,}

7. #

8. !

一个例子：<'text-shadow'> 语法

结论

HTML5的自定义属性data-*详细介绍和JS操作实例

HTML5的download属性详细介绍和使用实例

android TextView属性的详细介绍 分享

ES6中参数的默认值语法介绍

在css3中background-clip属性与background-origin属性的用法介绍

java与c#的语法区别详细介绍

javascript 获取特定的 CSS属性值

Jsp中response对象的所有属性详细介绍

android TextView属性的详细介绍 分享

HTML5的自定义属性data-*详细介绍和JS操作实例

1.
?

2.
*

3.
+

4.
{A}

5.
{A,B}

6.
{A,}

7.
#

8.
!

一个例子：
<'text-shadow'>
语法

android TextView属性的详细介绍分享

android TextView属性的详细介绍分享