當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

理解 CSS 属性值语法

發布時間：2023/12/9 CSS 46 豆豆

生活随笔收集整理的這篇文章主要介紹了理解 CSS 属性值语法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文轉載自：眾成翻譯鏈接：http: //www.zcfy.cc/article/390

萬維網聯盟（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> 是非終止符。

終止符表明這個值不能被替換或者分解。在下面的例子中，所有的數值都是終止符。

<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

博客名稱：王樂平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

總結

以上是生活随笔為你收集整理的理解 CSS 属性值语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：高质免费图片素材网站
下一篇： CSS动画实战：创建一个太极Loadin