深入理解 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

成分值

有四種成分值：關鍵字、基本資料型別、屬性資料型別與非資料資料型別。

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

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

如果像擴充閱讀，看看下列的網站吧：

• “Value Definition Syntax” in “CSS Values and Units Module Level 3”, W3C
• “CSS Reference,” Mozilla Developer Network
• “How to Read W3C Specs,” J. David Eisenberg, A List Apart