CSS - 資料型別

CSS 資料型別定義了可用於各種 CSS 屬性的值的型別。每個 CSS 屬性都期望特定型別的值，瞭解這些資料型別對於正確設定樣式和格式化 Web 內容至關重要。

下面列出的型別是最常見的，但這不是任何 CSS 規範中定義的所有型別的完整列表。

語法

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

CSS 語法使用不等號“<”和“>”之間的關鍵字來指示資料型別。

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

表示特定於其使用屬性的預定義關鍵字（例如，auto、inherit、none）。

下表列出了所有 CSS 全域性關鍵字

屬性	描述
<custom-ident>	使用者定義的識別符號，例如使用 grid-area 屬性給出的名稱。
<dashed-ident>	使用 CSS 自定義屬性，<custom-ident> 以兩個連字元開頭。
<string>	已加引號的字串，例如 content 屬性的值。
url()	對資源的引用，例如 background-image 值。

這些資料型別表示數量、索引和位置。下表列出了所有數值資料型別

屬性	描述
<integer>	一個或多個十進位制單位 (0–9)。
<number>	實數可能包含小數部分，例如 1 或 1.54。
<dimension>	包含單位的數值，例如 23px 或 15em。
<percentage>	包含百分號的數值，例如 15%。
<ratio>	比率表示為 <number> / <number>。
<flex>	CSS 網格佈局引入了一種靈活的長度，由帶附加 fr 單位的 <number> 表示，用於網格軌道大小。

使用這些型別定義距離和其他數量。下表列出了所有數量

屬性	描述
<length>	長度是指距離的尺寸。
<angle>	角度表示為 <dimension>，帶有 deg、grad、rad 或 turn 單位，並用於諸如 linear-gradient() 之類的屬性中。
<time>	持續時間單位表示為 <dimension>，帶 s 或 ms 單位。
<resolution>	這是一個 <dimension>，帶有單位識別符號 dpi、dpcm、dppx 或 x。

既接受尺寸又接受百分比值的 CSS 屬性屬於此類別。百分比值將轉換為相對於允許尺寸的數量。既接受百分比又接受尺寸的屬性將使用以下型別之一

顏色相關的屬性定義了 <color> 資料型別以及與顏色相關的其他型別。

下表列出了所有與顏色相關的型別

屬性	描述
<color>	表示為關鍵字或數值的顏色。
<color-interpolation-method>	在建立不同 <color> 值之間的過渡時，確定使用的顏色空間。
<hex-color>	描述使用主要顏色元件（紅色、綠色、藍色）表示為十六進位制數字的 sRGB 顏色的十六進位制顏色語法，以及其透明度。
<system-color>	通常連結到網頁上不同元件的預設顏色選擇。
<alpha-value>	表示顏色的透明度。該值可以是 <number>（0 為完全透明，1 為完全不透明）或 <percentage>（0 為完全透明，100% 為完全不透明）。
<hue>	為 <absolute-color-functions> 元件定義色輪的 <angle>，使用諸如 deg、grad、rad、turn 或無單位數字（解釋為 deg）之類的單位。
<hue-interpolation-method>	確定用於在色相值之間進行插值的演算法。此方法指定如何根據色輪查詢兩個色相值之間的中點。它是 <color-interpolation-method> 資料型別的一個元件。
<named-color>	在語法中指定為 <ident>，透過名稱（如紅色、藍色、黑色或淺綠色）來描述顏色。

CSS 圖片規範定義了與影像相關的型別，例如漸變。下表列出了所有與影像相關的型別

屬性	描述
<image>	指向影像或顏色漸變的 URL。

下表列出了所有與二維定位相關的型別

屬性	描述
<position>	透過提供關鍵字值（例如 top 或 left）或 <length-percentage> 來確定物件區域的位置。

CSS 數學函式在計算中使用這些資料型別。下表列出了所有計算資料型別

屬性	描述
<calc-sum>	計算是一系列由加法 (+) 和減法 (-) 運算子分隔的計算值。此資料型別要求兩個值都包含單位。
<calc-constant>	定義 CSS 關鍵字用於數值常數，例如 e 和 π，這些常數可用於 CSS 數學函式中。

下表列出了所有與顯示相關的型別

屬性	描述
<display-box>	確定元素是否建立顯示框。
<display-inside>	確定元素的內部顯示，為非替換元素指定格式上下文型別。
<display-internal>	確定內部顯示值，這些值僅與該特定佈局模型相關。
<display-legacy>	CSS 2 中的 display 屬性已使用單關鍵字語法，這需要為同一佈局模型的塊級和內聯級變體使用單獨的關鍵字。
<display-listitem>	list-item 關鍵字使元素生成一個 ::marker 偽元素，其內容由 list-style 屬性指定，以及為其自身內容指定型別的主框。
<display-outside>	元素的外部 display 型別，這在流佈局中至關重要，由 <display-outside> 關鍵字確定。

下表列出了一些其他資料型別

屬性	描述
<absolute-size>	在 font 簡寫和 font-size 屬性中定義絕對字型大小。
<basic-shape>	定義用於諸如 clip-path、shape-outside 和 offset-path 之類的屬性的不同形狀。
<blend-mode>	指定元素重疊時應使用的顏色方案。
<box-edge>	定義不同的盒子邊緣，例如 content-box 和 border-box。
<easing-function>	控制元素兩個狀態之間過渡或動畫的速度。
<filter-function>	表示圖形效果，它會更改輸入影像的外觀。
<generic-family>	表示通用字型族的關鍵字值。
<gradient>	演示兩種或多種顏色之間的漸變過渡。
<ident>	表示用作識別符號的任意字串。
<line-style>	<line-style> 列舉值型別包含在特定上下文中指定線條如何顯示或不顯示。
<overflow>	列舉值型別<overflow>指示與簡寫overflow屬性以及詳細的overflow-block、overflow-inline、overflow-x和overflow-y屬性相關的關鍵字值。
<relative-size>	定義相對於父元素計算大小的相對大小。
<transform-function>	變換函式負責在二維 (2D) 和三維 (3D) 空間中旋轉、縮放（調整大小）、傾斜（扭曲）或移動元素。

列印頁面