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

CSS 屬性值文法

儘管 W3C CSS 屬性值文法是基於 BNF 的概念，它們也有一些不同。像 BNF 的是，它起始於一個非終止符。不像 BNF 的是，它還描述了用在運算式中作為“成分值（component values）”的符號。

在下面的例子中，

<line-width>

是非終止符，而

<length>

，

thin

，

medium

和

thick

是成分值。

<line-width>  =  <length> | thin | medium | thick

成分值

有四種成分值：關鍵字、基礎資料型別 (Elementary Data Type)、屬性資料類型與非資料資料類型。

1. 關鍵字值

關鍵字值不被引號或尖角括弧包圍。它們可直接作為屬性值。因為它們不能再被代替或分解，所以它們是終止符。在下面的例子中，

thin

、

medium

和

thick

都是關鍵字值。這意味著它們在 CSS 中直接使用。

<line-width>  =  <length> | thin | medium | thick

2. 基礎資料型別 (Elementary Data Type)

基礎資料型別 (Elementary Data Type)定義了一些核心值，如

<length>

與

<color>

。它們是非終止符，因為它們可以被替換成真實的長度或顏色值。在下面的例子中

<color>

是基礎資料型別 (Elementary Data Type)。

<'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 個方法之一，成分值也可被重用：

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

3.

+

加號（

+

）表明其之前的類型，關鍵字或者組出現一次或更多次。在下面的例子中，放置於成分值之後的加號意味著該值必須被使用超過一次 —— 無需逗號。

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

4.

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

7.

#

井號（

#

）表明其之前的類型，關鍵字或者組出現一次或多次。在下面的例子中，一個或多個成分值可能被使用，這些成分值以逗號分離。

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

8.

!

一個組後的驚嘆號（

!

）意味著該組是必須的且產生至少一個值。在下面的例子中，

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 都會變得更容易了。