CSS 資料型別

CSS 資料型別 定義了 CSS 屬性和函式接受的典型值（包括關鍵字和單位）。它們是元件值型別的一種特殊型別。

最常用的型別在CSS 值和單位規範中定義。該規範還定義了函式表示法，允許更復雜的型別或處理。其他型別在它們適用的規範中定義。

下面你會發現你最有可能遇到的型別的參考，但它並不是對每個 CSS 規範中定義的所有型別的全面參考。

語法

css

selector {
  property: <unit-data-type>;
}

在正式的 CSS 語法中，資料型別由放在不等號“<”和“>”之間的關鍵字表示。

這些型別包括關鍵字和識別符號，以及字串和 URL。

具有預定義含義的關鍵字，例如，border-collapse 屬性的 collapse 值。

所有屬性，包括自定義屬性，都接受 CSS 範圍關鍵字

使用者定義的識別符號，例如使用 grid-area 屬性分配的名稱。

<custom-ident> 具有額外的限制，它必須以兩個連字元開頭，例如，使用 CSS 自定義屬性時。

帶引號的字串，例如用作 content 屬性的值。

指向資源的指標，例如作為 background-image 的值。

這些資料型別用於表示數量、索引和位置。其中大部分定義在值和單位規範中，但其他型別在其他規範中定義，因為它們僅限於該特定規範 - 例如 CSS 網格佈局中的 fr 單位。

這些型別用於指定距離和其他數量。

<length>: 長度是 <dimension>，表示距離。
<angle>: 角度用於諸如 linear-gradient() 之類的屬性，並且是帶有 deg、grad、rad 或 turn 單位之一的 <dimension>。
<time>: 持續時間單位是帶有 s 或 ms 單位的 <dimension>。
<frequency>: 頻率是帶有 Hz 或 kHz 單位的 <dimension>。
<resolution>: 是帶有 dpi、dpcm、dppx 或 x 單位識別符號的 <dimension>。

一些 CSS 屬性可以接受維度值或百分比值。在這種情況下，百分比值將被解析為與允許的維度相匹配的數量。可以接受百分比和維度的屬性將使用下面列出的型別之一。

CSS 顏色規範定義了 <color> 資料型別，以及與 CSS 中的顏色相關的其他型別。

<color>: 指定為關鍵字或數值顏色值。
<alpha-value>: 指定顏色的透明度。可以是 <number>，在這種情況下 0 為完全透明，1 為完全不透明，或者 <percentage>，在這種情況下 0% 為完全透明，100% 為完全不透明。
<hue>: 指定 <angle>，帶有 deg、grad、rad 或 turn 單位識別符號，或者無單位的 <number> 解釋為 deg，它是作為其元件的 <absolute-color-functions> 特定的色輪的角度。

CSS 影像規範定義了處理影像（包括漸變）的資料型別。

<position> 資料型別被解釋為針對 <background-position> 屬性定義的。

<position>: 定義物件區域的位置。接受諸如 top 或 left 之類的關鍵字值，或者 <length-percentage>。

這些資料型別用於 CSS 數學函式計算。

<calc-sum>: 計算，它是加法 (+) 和減法 (-) 運算子之間交織的計算值序列。此資料型別要求兩個值都具有單位。
<calc-product>: 計算，它是乘法 (*) 和除法 (/) 運算子之間交織的計算值序列。在相乘時，一個值必須是無單位的。在相除時，第二個值必須是無單位的。
<calc-value>: 定義計算的接受值，例如 <number>、<dimension>、<percentage>、<calc-keyword> 或巢狀的 <calc-sum> 計算。
<calc-keyword>: 定義表示數字常量（例如 e 和 π）的 CSS 關鍵字，這些關鍵字可在 CSS 數學函式中使用。

規範
CSS 值和單位模組第 4 級