值定義語法

CSS 值定義語法，一種形式語法，用於定義 CSS 屬性或函式的一組有效值。除了此語法之外，有效值集還可以透過語義約束進一步限制（例如，數字必須嚴格為正）。

定義語法描述了哪些值是允許的以及它們之間的互動。一個元件可以是關鍵字、一些被視為字面量的字元，或者給定 CSS 資料型別或另一個 CSS 屬性的值。

元件值型別

關鍵字

通用關鍵字

具有預定義含義的關鍵字會按字面出現，無需使用引號。例如：auto、smaller 或 ease-in。

inherit、initial 和 unset 的特殊情況

所有 CSS 屬性都接受關鍵字 inherit、initial 和 unset。它們不會顯示在值定義中，而是隱式定義的。

字面量

在 CSS 中，一些字元可以單獨出現，例如斜槓（'/'）或逗號（','），並在屬性定義中用於分隔其各個部分。逗號通常用於分隔列舉中的值，或類似數學函式中的引數；斜槓通常分隔語義上不同的值部分，但具有共同的語法。通常，斜槓用於簡寫屬性；用於分隔相同型別但屬於不同屬性的元件。

這兩個符號都按字面出現在值定義中。

資料型別

基本資料型別

某些資料型別貫穿整個 CSS，併為規範中的所有值定義一次。稱為基本資料型別，它們由其名稱以及符號'<'和'>'包圍：<angle>、<string>、…

非終結符資料型別

不太常見的資料型別，稱為非終結符資料型別，也由'<'和'>'包圍。

非終結符資料型別有兩種

  • 與屬性同名的資料型別，放在引號之間。在這種情況下，資料型別與屬性共享相同的賦值。它們通常用於簡寫屬性的定義。
  • 資料型別不共享相同的屬性名稱。這些資料型別非常接近基本資料型別。它們僅在定義的物理位置上與基本資料型別有所不同。在這種情況下，定義通常在物理上非常靠近使用它們的屬性的定義。

元件值組合符

括號

括號將多個實體、組合符和乘數括起來，然後將其轉換為單個元件。它們用於將元件分組以繞過優先順序規則。

css
bold [ thin && <length> ]

此示例匹配以下值

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

但不是

  • thin bold 3em，因為bold與括號定義的元件並置，它必須出現在它之前。

並置

將多個關鍵字、字面量或資料型別彼此相鄰放置，僅用一個或多個空格分隔，稱為並置。所有並置的元件都是必須的，並且應該按確切的順序出現。

css
bold <length>, thin

此示例匹配以下值

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

但不是

  • thin 1em, bold，因為實體必須按指定的順序排列
  • bold 1em thin，因為實體是必須的；逗號，一個字面量，必須存在
  • bold 0.5ms, thin，因為ms值不是<length>

雙與號

用雙與號&&分隔兩個或多個元件，表示所有這些實體都是必須的，但可以按任何順序出現。

css
bold && <length>

此示例匹配以下值

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

但不是

  • bold，因為這兩個元件都必須出現在值中。
  • bold 1em bold，因為這兩個元件都只能出現一次。

注意：並置優先於雙與號，這意味著bold thin && <length>等價於[ bold thin ] && <length>。它描述了bold thin <length>或<length> bold thin，但不是bold <length> thin。

雙豎線

用雙豎線||分隔兩個或多個元件，表示所有實體都是可選的：至少必須存在一個，並且它們可以按任何順序出現。通常，這用於定義簡寫屬性的不同值。

css
<'border-width'> || <'border-style'> || <'border-color'>

此示例匹配以下值

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

但不是

  • blue yellow，因為一個元件最多隻能出現一次。
  • bold，因為它不是任何實體的值允許的關鍵字。

注意：雙與號優先於雙豎線，這意味著bold || thin && <length>等價於bold || [ thin && <length> ]。它描述了bold、thin <length>、bold thin <length>或thin <length> bold，但不是<length> bold thin，因為如果bold不省略，則必須放在整個thin && <length>元件之前或之後。

單豎線

用單豎線|分隔兩個或多個實體，表示所有實體都是互斥選項：這些選項中只有一個必須存在。這通常用於分隔可能的關鍵字列表。

css
<percentage> | <length> | left | center | right | top | bottom

此示例匹配以下值

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

但不是

  • center 3%，因為元件中只有一個必須存在。
  • 3em 4.5em，因為元件最多隻能存在一次。

注意：雙豎線優先於單豎線，這意味著bold | thin || <length>等價於bold | [ thin || <length> ]。它描述了bold、thin、<length>、<length> thin或thin <length>，但不是bold <length>，因為|組合符兩側的每個實體只能存在一個。

元件值乘數

乘數是一個符號，指示前面實體可以重複多少次。如果沒有乘數，則實體必須出現恰好一次。

乘數不能相加，並且優先於所有組合符。

星號 (*)

星號乘數表示實體可以出現零次、一次或多次。

css
bold smaller*

此示例匹配以下值

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller，等等。

但不是

  • smaller，因為bold是並置的，並且必須出現在任何smaller關鍵字之前。

加號 (+)

加號乘數表示實體可以出現一次或多次。

css
bold smaller+

此示例匹配以下值

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller，等等。

但不是

  • bold，因為smaller必須至少出現一次。
  • smaller，因為bold是並置的，並且必須出現在任何smaller關鍵字之前。

問號 (?)

問號乘數表示實體是可選的，並且必須出現零次或一次。

css
bold smaller?

此示例匹配以下值

  • bold
  • bold smaller

但不是

  • bold smaller smaller，因為smaller最多隻能出現一次。
  • smaller，因為bold是並置的，並且必須出現在任何smaller關鍵字之前。

花括號 ({ })

花括號乘數，包含用逗號分隔的兩個整數 A 和 B，表示實體必須至少出現 A 次，最多出現 B 次。

css
bold smaller{1,3}

此示例匹配以下值

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

但不是

  • bold，因為smaller必須至少出現一次。
  • bold smaller smaller smaller smaller，因為smaller最多隻能出現三次。
  • smaller，因為bold是並置的，並且必須出現在任何smaller關鍵字之前

井號 (#)

井號乘數表示實體可以重複一次或多次（例如，加號乘數），但每次出現都用逗號 (',') 分隔。

css
bold smaller#

此示例匹配以下值

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller，等等。

但不是

  • bold，因為smaller必須至少出現一次。
  • bold smaller smaller smaller，因為smaller的不同出現必須用逗號分隔。
  • smaller，因為bold是並置的，並且必須出現在任何smaller關鍵字之前。

井號之後可以選擇跟隨花括號，以指示實體重複多少次。

css
bold smaller#{1,3}

此示例匹配以下值

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller

但不是

  • bold smaller, smaller, smaller, smaller，因為smaller最多隻能出現三次。
css
bold smaller#{2}

此示例匹配以下值

  • bold smaller, smaller

但不是

  • bold smaller，因為smaller必須出現恰好兩次。

感嘆號 (!)

組後面的感嘆號乘數表示該組是必需的，並且必須產生至少一個值；即使組內專案的語法否則允許整個內容被省略，也必須至少有一個元件值不能被省略。

css
[ bold? smaller? ]!

此示例匹配以下值

  • bold
  • smaller
  • bold smaller

但不是

  • 既不是bold也不是smaller，因為它們中必須至少出現一個。
  • smaller bold，因為bold是並置的，並且必須出現在smaller關鍵字之前。
  • bold smaller bold，因為bold和smaller只能出現一次。

方括號範圍表示法 ([min,max])

某些型別可以在特定範圍內接受數值。例如，column-count屬性可以接受一個介於正1和無窮大（包括）之間的整數。相應的語法如下所示

<integer [1,∞]>

任何超出此指定範圍的值都會導致整個宣告無效，因此瀏覽器將忽略它。

帶括號的範圍表示法[min, max]表示min和max值之間的包含範圍。此表示法用於數值型別表示法，可以包含單位，例如<angle [0,180deg]>。正無窮大和負無窮大（-∞ 和 ∞）不得指定單位。以單位指定的型別可以指定帶或不帶單位的零值，例如<time [0s,10s]>或<time [0,10s]>。

以下是一些其他示例

  • <integer [-∞,∞]>：從負無窮大到正無窮大的任何整數。
  • <integer [0,∞]>：從 0 到正無窮大的任何整數都是有效的。負整數無效。
  • <time [0s,10s]>或<time [0,10s]>：從 0 到 10 秒的任何持續時間都是有效的。
  • <integer [-∞,-1]> | <integer [1,∞]>：除零以外的任何整數都是有效的。

總結

符號 名稱 描述 示例
組合符
並置 元件是必須的，並且應該按該順序出現 solid <length>
&& 雙與號 元件是必須的，但可以按任何順序出現 <length> && <string>
|| 雙豎線 至少必須存在一個元件，並且它們可以按任何順序出現。 <'border-image-outset'> || <'border-image-slice'>
| 單豎線 元件中只有一個必須存在 smaller | small | normal | big | bigger
[ ] 括號 將元件分組以繞過優先順序規則 bold [ thin && <length> ]
乘數
無乘數 恰好 1 次 solid
* 星號 0 次或多次 bold smaller*
+ 加號 1 次或多次 bold smaller+
? 問號 0 次或 1 次（即可選） bold smaller?
{min,max} 花括號 至少min次，最多max次 bold smaller{1,3}
# 井號 1 次或多次，每次出現都用逗號 (',') 分隔 bold smaller#
! 感嘆號 組必須產生至少 1 個值 [ bold? smaller? ]!
範圍
[min,max] 數值帶括號範圍 指定數值範圍 <integer [0,∞]>

規範

規範
CSS 值和單位模組級別 4
# value-defs

另請參閱