CSS3數(shù)據(jù)類(lèi)型與值定義語(yǔ)法的研究與解析

黃志剛

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

【關(guān)鍵詞】屬性 屬性名 屬性值 屬性定義 屬性值定義 值定義 語(yǔ)法數(shù)據(jù)類(lèi)型 組件值

1 引言

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

2 CSS數(shù)據(jù)類(lèi)型

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

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

= _expression

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

= circle ellipse

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

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

2.1.1 文本值

文本值定義了與字符相關(guān)的數(shù)據(jù)類(lèi)型。

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

字符串?dāng)?shù)據(jù)類(lèi)型的值，是帶引號(hào)的字符序列。

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

2.1.2 基本數(shù)值

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

整數(shù)數(shù)據(jù)類(lèi)型的值和實(shí)數(shù)數(shù)據(jù)類(lèi)型的值，就是數(shù)學(xué)中的整數(shù)或?qū)崝?shù)。

百分比數(shù)據(jù)類(lèi)型的值，就是在一個(gè)實(shí)數(shù)值后加一個(gè)%符號(hào)組成。

2.1.3 尺寸值

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

長(zhǎng)度數(shù)據(jù)類(lèi)型的單位分為兩類(lèi)，一類(lèi)是絕對(duì)單位，如px（像素）、cm（厘米）以及pt（磅），另一類(lèi)是相對(duì)單位，如em（表示元素的字體大小）、rem（表示根元素的字體大?。?。

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

2.1.4 其它

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

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

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

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

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

屬性數(shù)據(jù)類(lèi)型與一個(gè)特定的屬性相關(guān)聯(lián)，名稱與取值范圍與關(guān)聯(lián)屬性相同。屬性數(shù)據(jù)類(lèi)型用尖括號(hào)內(nèi)寫(xiě)上用單引號(hào)引起的屬性名來(lái)表示。例如，邊框?qū)挾葦?shù)據(jù)類(lèi)型，表示邊框?qū)挾鹊娜≈导?，定義為：

={ 1，4）

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

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

=|thin| mediumthick

3 屬性值與屬性值定義

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

3.1 屬性值

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

例如，如果定義一個(gè)樣式聲明為：

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

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

3.2 屬性值定義

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

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

它有三類(lèi)符號(hào)：

（1）表示組件值類(lèi)型的符號(hào)：none、、;

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

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

4 CSS值定義語(yǔ)法

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

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

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

4.1.1 關(guān)鍵字組件值

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

Value： collapse separate

它有兩個(gè)關(guān)鍵字值，collapse（折疊）、separate（分離）。

有一些關(guān)鍵字值，可作為所有css屬性的組件值（ CSS-wide keywords），但它們?cè)趯傩灾刀x中都沒(méi)顯式列出。如initial、inherit和unset。

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

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

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

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

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

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

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

font： 12px/14px sans-serif;

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

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

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

例如，邊框?qū)傩詁order'的值定義為：

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

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

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

4.2 組件值選擇排列操作符

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

4.2.1 并列（一個(gè)或多個(gè)空格）操作符

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

Value： bold thin

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

4.2.2 與（雙與&&）操作符

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

Value：&&

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

4.2.3 或（雙豎線ll）操作符

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

Value.llll

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

4.2.4 互斥（單豎線）操作符

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

Value：l|left|centerlright|top|bottom

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

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

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

Value： bold thin&&

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

4.2.6 分組（方括號(hào)[]）操作符

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

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

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

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

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

4.3.1 星號(hào)（*）

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

Value：bold smaller*

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

4.3.2 加號(hào)（+）

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

Value：bold smaller+

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

4.3.3 井號(hào)（#）

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

Value：bold smaller#

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

4.3.4 問(wèn)號(hào)（？）

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

Value： bold smaller？

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

4.3.5 感嘆號(hào)（！）

在一個(gè)分組之后的感嘆號(hào)，用來(lái)表示分組至少產(chǎn)生一個(gè)值。例如，如果屬性值定義為：

Value：[ bold？ smaller？]！

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

4.3.6 花括號(hào)（{））

在花括號(hào)內(nèi)寫(xiě)上數(shù)字來(lái)表示前一項(xiàng)重復(fù)的次數(shù)。

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

Value： bold smaller{3）

則它的屬性值為：bold smallersmallersmaller。

（2）在花括號(hào)內(nèi)寫(xiě)上兩個(gè)數(shù)字，以逗號(hào)分隔，如{A，B），表示至少重復(fù)A次，最多重復(fù)B次;如果省略B，即為{A，），表示至少重復(fù)A次，沒(méi)有上限。

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

Value： bold smaller{l，3）

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

4.4 一個(gè)屬性值定義示例

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

Value： none#

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

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

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

其中的語(yǔ)法構(gòu)成解析如下：

4.4.1 組件值類(lèi)型及重復(fù)次數(shù)

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

（2）顏色組件。顏色組件是可選的，故寫(xiě)成？，如果沒(méi)有設(shè)置顏色值，則一般取color'屬性的顏色值。

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

4.4.2 組件操作符

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

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

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

4.4.3 樣式申明示例

/*不設(shè)置或取消盒陰影*/

box-shadow：none;

/*只設(shè)置兩個(gè)長(zhǎng)度值，代表陰影的水平和垂直偏移，其它組件取默認(rèn)值*/

box-shadow：10px10px;

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

box-shadow： inset10px10px10px10pxred;

box-shadow：10px10px10px10pxredinset;

box-shadow：red inset10px10px10px10px;

/*多個(gè)陰影值需用逗號(hào)分隔*/

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

5 結(jié)論

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

參考文獻(xiàn)

[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.）著;田永強(qiáng)譯.響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].北京：人民郵電出版社，2013： 113-121.