黃志剛

摘要 用css語言編碼的關鍵，是設置有效的屬性值。屬性由組件值構成，每個組件值都有其數(shù)據(jù)類型。屬性值定義描述了有效的屬性值集合，它遵循css值定義語法。本文深入闡述了CSS3數(shù)據(jù)類型的分類、表示方法和取值范圍：剖析了值定義語法中，各種符號的意義;最后通過一個示例，詳細講解了值定義語法在屬性值定義中的應用。

【關鍵詞】屬性 屬性名 屬性值 屬性定義 屬性值定義 值定義 語法數(shù)據(jù)類型 組件值

1 引言

CSS （Cascading Style Sheets） 即層疊樣式表，是一種用于描述結構化文檔（如HTML和XML）樣式的計算機語言，它定義了一個叫做屬性（ Property）的有限參數(shù)集，每個屬性控制文檔元素的某個外觀特征，如顏色、字體大小和線型等。屬性有一個名稱（如color、font）和相應的取值（如red、12pt Times），分別叫屬性名（Propertyname）和屬性值（Property value）。每個屬性都有一個屬性定義（ Property definition），用來描述屬性的各種特征。屬性值定義（ Propertyvalue definition）是屬性定義中的關鍵信息，它使用CSS中的值定義語法（value definitionsyntax）來描述有效的CSS屬性值集合。值定義語法從CSS第一版（CSSl）引入，在《CSS值和單位》（第三版）中進行了擴展和修訂。數(shù)據(jù)類型（ Data type）是值定義語法的基本構件，表示值的取值范圍，值的有效性就是通過檢查值與其數(shù)據(jù)類型的一致性來驗證。

2 CSS數(shù)據(jù)類型

CSS數(shù)據(jù)類型定義了原始值或擴展值的集合，如整數(shù)、實數(shù)、字符串、標識符是原始值的集合，而尺寸的長度、角度、時間都是擴展值的集合。按照數(shù)據(jù)類型與屬性的關聯(lián)度，可分為通用數(shù)據(jù)類型和特定數(shù)據(jù)類型兩類，

在CSS規(guī)范中，定義了許多數(shù)據(jù)類型，所有數(shù)據(jù)類型都用不等號“<”和“>”（尖括號）之間放一個關鍵字來表示，如長度數(shù)據(jù)類型表示為。在規(guī)范中，定義一種數(shù)據(jù)類型的一般格式如下：

= _expression

在等號左邊尖括號內，寫上數(shù)據(jù)類型的名稱在等號右邊用值定義語法描述值的集合。例如，要定義表示徑向漸變最終形狀的數(shù)據(jù)類型，它是由兩個值“circle（圓）”和“ellip se（橢圓）”構成的集合，可寫成：

= circle ellipse

2.1 通用數(shù)據(jù)類型

通用數(shù)據(jù)類型，不與特定的屬性相關聯(lián)，定義了通用值的集合，可以作為多種屬性的值。例如，長度數(shù)據(jù)類型是一種通用數(shù)據(jù)類型，如果取一個長度值lOpx，它可以用于‘margin、font-size和'border'等所有需要長度值的屬性。常用的通用數(shù)據(jù)類型見表1，可分為文本值、基本數(shù)值、尺寸和其它四大類，前三類在《CSS值和單位》（第三版）中定義，第四類分布在其它CSS模塊中。

2.1.1 文本值

文本值定義了與字符相關的數(shù)據(jù)類型。

標識符數(shù)據(jù)類型的值，是不帶引號的字符序列，其中，預定義關鍵字和用戶自定義標識符是兩種主要的標識符，它們的主要區(qū)別在于，前者不區(qū)分大小寫，而后者是大小寫敏感的。

字符串數(shù)據(jù)類型的值，是帶引號的字符序列。

資源定位符數(shù)據(jù)類型的值，是url（）函數(shù)的一個值，它指向一個資源。url（）函數(shù)的參數(shù)是一個表示資源地址的字符串。

2.1.2 基本數(shù)值

基本數(shù)值定義了幾種與原始數(shù)值相關的數(shù)據(jù)類型。

整數(shù)數(shù)據(jù)類型的值和實數(shù)數(shù)據(jù)類型的值，就是數(shù)學中的整數(shù)或實數(shù)。

百分比數(shù)據(jù)類型的值，就是在一個實數(shù)值后加一個%符號組成。

2.1.3 尺寸值

尺寸值是是帶度量單位的數(shù)值，當數(shù)值部分為0時，單位可以省略。

長度數(shù)據(jù)類型的單位分為兩類，一類是絕對單位，如px（像素）、cm（厘米）以及pt（磅），另一類是相對單位，如em（表示元素的字體大?。?、rem（表示根元素的字體大?。?/p>

角度數(shù)據(jù)類型的單位有deg（角度）、rad（弧度）;時長數(shù)據(jù)類型的單位有s（秒）、ms（毫秒）;頻率數(shù)據(jù)類型的單位有kHz（千赫茲）和Hz（赫茲）。分辨率數(shù)據(jù)類型的單位有dpi（每英寸像素數(shù)）、dpcm（每厘米像素數(shù)）等。

2.1.4 其它

顏色數(shù)據(jù)類型的值，可以是關鍵字值，如red（紅色）、transparent（透明色），十六進制值，如#000（黑色）、#FFOOOO（紅色），函數(shù)值，如rgb（0，0，0）、hsla（0，0%，0%，1）等。

圖像數(shù)據(jù)類型的值，可以是url（）函數(shù)的值，也可以是漸變函數(shù)的值。見表l。

2.2 特定數(shù)據(jù)類型

特定數(shù)據(jù)類型可分為屬性數(shù)據(jù)類型和非屬性數(shù)據(jù)類型。

2.2.1 屬性數(shù)據(jù)類型

屬性數(shù)據(jù)類型與一個特定的屬性相關聯(lián)，名稱與取值范圍與關聯(lián)屬性相同。屬性數(shù)據(jù)類型用尖括號內寫上用單引號引起的屬性名來表示。例如，邊框寬度數(shù)據(jù)類型，表示邊框寬度的取值集合，定義為：

={ 1，4）

2.2.2 非屬性數(shù)據(jù)類型

非屬性數(shù)據(jù)類型與一類相近屬性相關聯(lián)，表示這類屬性某方面的特征，它在它第一次出現(xiàn)的規(guī)范中定義，用尖括號內寫上關鍵字來表示。例如，是非屬性數(shù)據(jù)類型，它與控制邊框寬度的一類屬性相關，包括'border-top-Widrh、'border-right-width" 'border-bottom-width" 'border-left-width、'border-widrh、'border等，定義為：

=|thin| mediumthick

3 屬性值與屬性值定義

屬性值就是在樣式表中申明的屬性的值，而屬性值定義是用值定義語法描述的屬性值集合。

3.1 屬性值

CSS屬性值由一個或多個組件構成，每個組件都是其數(shù)據(jù)類型的一個具體值，即組件值（ Componentvalue）。

例如，如果定義一個樣式聲明為：

text-shadow： 2px 3px 4px pink;

其中，“2px 3px 4px pink”就是屬性值，它由四個組件構成，組件值分別為2px（水平偏移量）、3px（垂直偏移量）、4px（模糊半徑）、pink（顏色）。前三個組件值是長度數(shù)據(jù)類型，第四個組件值是顏色數(shù)據(jù)類型。

3.2 屬性值定義

在每個屬性定義的開始部分是屬性的關鍵信息摘要，其中的“Value”字段就是屬性的屬性值定義，例如，文本陰影屬性text-shadow的屬性值定義為：

Value： nonel[？&&{2，3}]#

它有三類符號：

（1）表示組件值類型的符號：none、、;

（2）表示組件值選擇操作的符號：、&&和[];

（3）表示組件值重復出現(xiàn)次數(shù)的符號：？、{2，3）和#。

4 CSS值定義語法

CSS值定義語法，描述組件值的數(shù)據(jù)類型、重復次數(shù)，以及如何選擇組件值、按什么順序排列等。

4.1 組件值數(shù)據(jù)類型

在值定義中，一個組件值或者是一個關鍵字值，或者用其數(shù)據(jù)類型表示。

4.1.1 關鍵字組件值

關鍵字值具有預定義的語義，以字面量形式出現(xiàn)在屬性值中，不區(qū)分大小寫，不能使用引號引起，屬于標識符數(shù)據(jù)類型。例如，表格邊框線折疊屬性'border-collapse的值定義為：

Value： collapse separate

它有兩個關鍵字值，collapse（折疊）、separate（分離）。

有一些關鍵字值，可作為所有css屬性的組件值（ CSS-wide keywords），但它們在屬性值定義中都沒顯式列出。如initial、inherit和unset。

如果將屬性值設為initial，則表示屬性值取屬性定義中指定的初始值;

如果將屬性值設為inherit，則表示屬性值從父元素繼承;

如果將屬性值設為unset，則表示如果屬性是可繼承的，則屬性值從父元素繼承，否則取初始值。

如果組件值用逗號（，）和斜杠（/）分隔，則這兩個符號也以字面量形式出現(xiàn)在屬性值中。

逗號常用于分隔枚舉值，或函數(shù)參數(shù)。例如，如果給文字陰影屬性text-shadow設置多組陰影值，則每組陰影值之間要用逗號分隔，代碼如下：

text-shadow： lpx lpx 2px black，0 0 lemblue.0 0 0.2em blue;

斜杠一般出現(xiàn)在簡寫屬性的屬性值中，用于分隔相同數(shù)據(jù)類型但分別對應不同獨立屬性的組件值。例如，如果要在簡寫屬性font中設置文字的字號為12px、行高為14px，則它們之間要用斜杠分隔，代碼如下：

font： 12px/14px sans-serif;

其中，12px、14px都屬于數(shù)據(jù)類型，12px代表獨立屬性字號font-size的值，14px代表獨立屬性line-height'的值。

4.1.2 數(shù)據(jù)類型組件值

在屬性值定義中，大部分組件值都用其數(shù)據(jù)類型表示。

例如，邊框屬性border'的值定義為：

Value.llll，其中是通用數(shù)據(jù)數(shù)據(jù)類型，和是非屬性數(shù)據(jù)類型。

列表樣式list-style的值定義為：

Value：<list-style-type‘>II<list-style-position>II<list-style-image‘>，三個組件值均為屬性數(shù)據(jù)類型。

4.2 組件值選擇排列操作符

組件值選擇排列操作符用于描述如何選擇組件值以及組件值按什么順序出現(xiàn)在屬性值中，簡稱為組件值操作符。

4.2.1 并列（一個或多個空格）操作符

用空白連接兩個或多個組件值，表示這些組件值必須按序同時出現(xiàn)在屬性值中。例如，如果屬性值定義為：

Value： bold thin

則它的屬性值可以是：bold lem thin、bold O thin、bold 3.5cm thin等。

4.2.2 與（雙與&&）操作符

用于連接兩個或多個組件值，表示這些組件值必須同時出現(xiàn)在屬性值中，但順序可任意。例如，如果屬性值定義為：

Value：&&

則它的屬性值可以是：red lem、lem red等。

4.2.3 或（雙豎線ll）操作符

用于連接兩個或多個組件值，表示這些組件值是可選的，但至少出現(xiàn)一個，順序可以隨意。例如，如果屬性值定義為：

Value.llll

則它的屬性值可以是：solid、blue lem、lem solid blue、solid lpx yellow等。

4.2.4 互斥（單豎線）操作符

用于連接兩個或多個組件值，表示這些組件值只能出現(xiàn)一個。例如，如果屬性值定義為：

Value：l|left|centerlright|top|bottom

則它的屬性值可以是：3%、3.5em、left、bottom等。

4.2.5 操作符的優(yōu)先級

在屬性值定義中，如果出現(xiàn)兩種或兩種以上的操作符，組件值將按操作符的優(yōu)先級進行選擇和排列。以上四個操作符的優(yōu)先級，由低到高，依次為互斥操作符、或操作符、與操作符、并列操作符。例如，如果屬性值定義為：

Value： bold thin&&

關鍵字值“thin”的左邊是并列操作，右邊是與操作，按照操作符的優(yōu)先級，組件值的排列規(guī)則為，“bold”與“thin”先進行并列操作，然后再和“”進行與操作。則有效值只有bold thin 5px、5px bold thin等。

4.2.6 分組（方括號[]）操作符

分組操作符可將組件值分組，形成分組組件，簡稱為分組。在所有操作符中，分組操作符的優(yōu)先級最高，可以用它來改變操作符的優(yōu)先順序。例如，如果將屬性值定義：Value：bold thin&&

改為：Value： bold [thin&&]，

則組件值的排列規(guī)則變成，“thin”和“”先進行與操作，然后再和“bold”進行并列操作。則有效值是：bold thin 5px、bold 5px thin。

4.3 組件值重復次數(shù)

在屬性值定義中，可以用特定符號來表示它的前一項（組件值或分組）重復出現(xiàn)的次數(shù);如果沒有這些符號，則組件值只出現(xiàn)一次。

4.3.1 星號（*）

星號用來表示它的前一項可重復出現(xiàn)零次或多次，重復出現(xiàn)兩次以上用空白分隔。例如，如果屬性值定義為：

Value：bold smaller*

則它的屬性值可以是：bold、boldsmaller、bold smaller smaller等。

4.3.2 加號（+）

加號用來表示它的前一項至少出現(xiàn)一次，重復出現(xiàn)兩次以上用空白分隔。例如，如果屬性值定義為：

Value：bold smaller+

則它的屬性值可以是：bold smaller、boldsmaller smaller等。

4.3.3 井號（#）

井號用來表示它的前一項至少出現(xiàn)一次，重復出現(xiàn)兩次以上用逗號（，）分隔。例如，如果屬性值定義為：

Value：bold smaller#

則它的屬性值可以是：bold smaller、boldsmaller，smaller等。

4.3.4 問號（？）

問號用來表示它的前一項出現(xiàn)零次或一次，即表示前一項是可選的。例如，如果屬性值定義為：

Value： bold smaller？

則它的屬性值可以是：bold、bold smaller等。

4.3.5 感嘆號（?。?/p>

在一個分組之后的感嘆號，用來表示分組至少產生一個值。例如，如果屬性值定義為：

Value：[ bold？ smaller？]！

則它的屬性值可以是：bold、boldsmaller、smaller等。

4.3.6 花括號（{））

在花括號內寫上數(shù)字來表示前一項重復的次數(shù)。

（1）在花括號內寫上一個數(shù)字n，即{n}，表示前一項重復n次。例如，如果屬性值定義為：

Value： bold smaller{3）

則它的屬性值為：bold smallersmallersmaller。

（2）在花括號內寫上兩個數(shù)字，以逗號分隔，如{A，B），表示至少重復A次，最多重復B次;如果省略B，即為{A，），表示至少重復A次，沒有上限。

例如，如果屬性值定義為：

Value： bold smaller{l，3）

則它的屬性值可以是：bold smaller、boldsmaller smaller. bold smaller smallersmaller。

4.4 一個屬性值定義示例

在W3C的規(guī)范《背景與邊框》（第三版）中，定義了盒陰影屬性'box-shadow，它的屬性值定義為：

Value： none#

其中，有兩個組件，一個是用于設置無盒陰影的組件，組件值是一個關鍵字值“none”;另一個是用于設置盒陰影的組件，組件值是陰影數(shù)據(jù)類型，如果設置陰影，則至少出現(xiàn)一個陰影值，枚舉多個陰影值時，要用逗號分隔，故陰影組件寫成#。陰影可設置，也可不設置，故兩個組件用互斥操作符“”連接。

陰影數(shù)據(jù)類型定義了有效的陰影值的集合，一般形式如下：

=？&&{2，4}&&inset？

其中的語法構成解析如下：

4.4.1 組件值類型及重復次數(shù)

（1）長度組件。陰影的水平偏移量、垂直偏移量、模糊半徑（可選）、擴展半徑（可選）四個組件的組件值都是長度數(shù)據(jù)類型。前兩個組件值必須出現(xiàn)在屬性值中，后兩個組件值是可選的，如果沒有出現(xiàn)，則取值為O，四個組件值組合起來，可寫成{2，4），表示最少出現(xiàn)兩個長度值，最多出現(xiàn)4個長度值，且必須按序排列。

（2）顏色組件。顏色組件是可選的，故寫成？，如果沒有設置顏色值，則一般取color'屬性的顏色值。

（3）陰影類型組件。這個組件的值是關鍵字值“inset”，它是可選的，故寫為inset？，當它出現(xiàn)時，表示創(chuàng)建內陰影，如果沒有出現(xiàn)，則表示創(chuàng)建外陰影。

4.4.2 組件操作符

按重復次數(shù)確定每種組件值的個數(shù)后，所有組件值必須同時出現(xiàn)，且順序任意，所以，三種組件值之間用與（&&）操作符連接。

？&&{2，4}&&inset？

盒陰影屬性的屬性值定義，可概述為：不指定或指定一個或多個陰影值;一個陰影值包含2-4個長度值、一個可選顏色值和一個可選的陰影類型值。長度值、顏色值和陰影類型值可以寫成任意順序。

4.4.3 樣式申明示例

/*不設置或取消盒陰影*/

box-shadow：none;

/*只設置兩個長度值，代表陰影的水平和垂直偏移，其它組件取默認值*/

box-shadow：10px10px;

/*三種組件值，順序任意，但四個長度值作為一個組件需順序連續(xù)排列*/

box-shadow： inset10px10px10px10pxred;

box-shadow：10px10px10px10pxredinset;

box-shadow：red inset10px10px10px10px;

/*多個陰影值需用逗號分隔*/

box-shadow： 10px 0px red， -20px -20px 5pxlime;

5 結論

CSS3是由80多項規(guī)范共同定義的復雜技術，屬性定義是規(guī)范的主要內容，它描述了屬性的特征。為在樣式申明中設置有效的屬性值，必須理解屬性值定義，它是屬性定義中的關鍵信息。屬性值定義遵循CSS值定義語法，描述了合法的屬性值集合。CSS中的值是組件值的合成體，值定義語法用三種符號分別表示組件值類型、組件值選擇排列操作、組件值重復次數(shù)。CSS組件值可以是通用數(shù)據(jù)類型、屬性數(shù)據(jù)類型、非屬性數(shù)據(jù)類型等;組件值操作符有五種，表示組件值排列到屬性值中的規(guī)則，它們有相應的優(yōu)先級順序。有六種表示組件值重復出現(xiàn)次數(shù)的符號。在CSS中，值定義語法也可用于定義CSS數(shù)據(jù)類型的值和CSS函數(shù)參數(shù)值，可以舉一反三的應用。

參考文獻

[1]W3C. CSS Values and Units ModuleLevel 3Candidate Recommendation， 29September 2 016. [EB/OL]. ht tps：//www.w3. org/TR/css3-values/.

[2] Rus s Weakley. Unders tanding TheCSS Property Value Syntax， 20May 2016.[EB/OL].https：//www.smashingmagazine. com，2016/05/unders tanding-the-cs s-propert y-value-syntax/，

[3]Ire Aderinokun. All the Generic CSSData Types， 28June 2016. [EB/OL].ht tps：//bit sofco. de/generic-css-data-types/，

[4]MDN Web docs. Value definitionsyntax， 17 Jan 2018. [EB/OL]. ht tps：//developer. mozilla. org/en-US/docs/Web/CSS/Value_definition_ syntax.

[5] Eric A.Meyer. CSS： The DefinitiveGuide [M]. Published by O'ReillyMedia， Inc.， June 2017： 1127-1143.

[6]（英）弗雷恩（ Frain，B.）著;田永強譯.響應式Web設計：HTML5和CSS3實戰(zhàn)[M].北京：人民郵電出版社，2013： 113-121.