值定義語法

組成值型別

關鍵詞

通用關鍵字

具有預定義含義的關鍵字按字面意思出現，不帶引號。例如：auto、smaller 或 ease-in。

CSS 全域性關鍵字

所有 CSS 屬性都接受關鍵字 inherit、initial、revert、revert-layer 和 unset。它們未在值定義中顯示，並且是隱式定義的。

字面量

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

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

資料型別

基本資料型別

某些資料型別在整個 CSS 中使用，並在規範中為所有值定義一次。它們被稱為基本資料型別，並用符號 < 和 > 括起來表示：<angle>、<string> 等。

非終端資料型別

不那麼常見的資料型別，稱為非終端資料型別，也用 < 和 > 括起來。

非終端資料型別有兩種

• 與屬性同名的資料型別，用引號括起來。在這種情況下，資料型別與屬性共享相同的值集。它們通常用於速記屬性的定義中。
• 與屬性不同名的資料型別。這些資料型別與基本資料型別非常接近。它們與基本資料型別的唯一區別在於其定義的物理位置。在這種情況下，定義通常在物理上非常接近使用它們的屬性的定義。

組成值組合器

方括號

方括號將多個實體、組合器和乘數括起來，然後將它們作為一個單獨的元件。它們用於將元件分組以繞過優先順序規則。

example = 
  bold [ thin && <length> ]  

此示例匹配以下值

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

但不匹配

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

並置

將多個關鍵字、字面量或資料型別並排放置，僅用一個或多個空格分隔，稱為並置。所有並置的元件都是強制性的，並且應以精確的順序出現。

example = 
  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>

雙與號

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

example = 
  bold      &&
  <length>  

此示例匹配以下值

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

但不匹配

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

雙豎線

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

example = 
  <number>  ||
  <length>  ||
  <color>   

此示例匹配以下值

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

但不匹配

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

單豎線

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

example = 
  <percentage>  |
  <length>      |
  left          |
  center        |
  right         |
  top           |
  bottom        

此示例匹配以下值

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

但不匹配

• center 3%，因為只能存在其中一個元件。
• 3em 4.5em，因為一個元件最多隻能出現一次。

組成值乘數

乘數是表示前一個實體可以重複多少次的符號。沒有乘數，實體必須出現一次。

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

星號 (*)

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

example = 
  bold smaller*  

此示例匹配以下值

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

但不匹配

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

加號 (+)

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

example = 
  bold smaller+  

此示例匹配以下值

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

但不匹配

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

問號 (?)

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

example = 
  bold smaller?  

此示例匹配以下值

• bold
• bold smaller

但不匹配

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

花括號 ({ })

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

example = 
  bold smaller{1,3}  

此示例匹配以下值

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

但不匹配

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

井號 (#)

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

example = 
  bold smaller#  

此示例匹配以下值

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

但不匹配

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

井號可以選擇後跟花括號，以指示實體重複的次數。

example = 
  bold smaller#{1,3}  

此示例匹配以下值

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

但不匹配

• bold smaller, smaller, smaller, smaller，因為 smaller 最多隻能出現三次。

example = 
  bold smaller#{2}  

此示例匹配以下值

• bold smaller, smaller

但不匹配

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

感嘆號 (!)

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

example = 
  [ bold? smaller? ]!  

此示例匹配以下值

• bold
• smaller
• bold smaller

但不匹配

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

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

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

example = 
  <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,∞]>：除零以外的任何整數都有效。

總結

規範

另見

• CSS 關鍵概念
  • CSS 語法
  • 註釋
  • 優先順序
  • 繼承
  • 盒模型
  • 佈局模式
  • 視覺格式化模型
  • 外邊距摺疊
  • 值
    • 初始值
    • 計算值
    • 使用值
    • 實際值
  • 值定義語法
  • 簡寫屬性
  • 替換元素