CSS 值和單位

每個 CSS 宣告都包含一個屬性/值對。根據屬性的不同，值可以包含單個整數或關鍵字，也可以包含一系列帶有或不帶單位的關鍵字和值。CSS 屬性接受一組通用的資料型別——值和單位。以下是大多數這些資料型別的概述。有關更詳細的資訊，請參閱每個值型別的頁面。

文字資料型別

<custom-ident>
預定義關鍵字作為 <ident>
<string>
url()

文字資料型別可以是 <string>（一系列帶引號的字元）或 <ident>（“CSS 識別符號”，即不帶引號的字串）。<string> 必須用單引號或雙引號括起來。CSS 識別符號（在規範中列為 <ident> 或 <custom-ident>）必須不帶引號。

在 CSS 規範中，可以由 Web 開發人員定義的值（如關鍵幀動畫、字體系列名稱或網格區域）列為 <custom-ident>、<string> 或兩者。

當允許帶引號和不帶引號的使用者定義文字值時，規範將列出 <custom-ident> | <string>，這意味著引號是可選的，例如動畫名稱的情況。

css

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

如果某些文字值包含在引號中，則無效。例如，grid-area 的值可以是 <custom-ident>，因此如果我們有一個名為 content 的網格區域，我們將不帶引號地使用它。

css

.item {
  grid-area: content;
}

相比之下，作為 <string> 的資料型別（例如 content 屬性的字串值）必須帶引號。

css

.item::after {
  content: "This is my content.";
}

雖然通常可以建立任何您想要的名稱，包括使用表情符號，但識別符號不能為 none、unset、initial 或 inherit，不能以數字或兩個連字元開頭，並且通常不希望它是任何其他預定義的 CSS 關鍵字。有關更多詳細資訊，請參閱 <custom-ident> 和 <string> 參考頁面。

預定義關鍵字值

預定義關鍵字是由規範為該屬性定義的文字值。這些關鍵字也是 CSS 識別符號，因此不帶引號使用。

在檢視 CSS 規範或 MDN 屬性頁面中的 CSS 屬性值語法時，允許的關鍵字將以以下形式列出。以下值是 float 允許的預定義關鍵字值。

left | right | none | inline-start | inline-end

此類值不帶引號使用。

css

.box {
  float: left;
}

CSS 全域性值

除了作為屬性規範一部分的預定義關鍵字之外，所有 CSS 屬性都接受 CSS 全域性屬性值 initial、inherit、unset、revert 和 revert-layer，它們明確指定了預設行為。

initial: 表示指定為屬性初始值的 value。
inherit: 表示元素父元素上該屬性的計算值，前提是它被繼承。
unset: 根據屬性是否被繼承，充當inherit或initial。
revert: 將屬性重置為其繼承值（如果它從其父元素繼承）或使用者代理樣式表（或任何存在的使用者樣式）中建立的預設值。
revert-layer: 將屬性在級聯層中的值回滾到 CSS 規則在先前級聯層中匹配元素時的屬性值。使用此關鍵字的屬性值將重新計算，就好像當前級聯層中未在目標元素上指定任何規則一樣。

URL

url()型別的 url() 使用函式表示法，它接受一個表示 URL 的<string>。這可以是絕對 URL 或相對 URL。例如，如果要包含背景影像，可以使用以下任一方法。

css

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

url()的引數可以帶引號或不帶引號。如果不帶引號，則將其解析為<url-token>，這有額外的要求，包括某些字元的轉義。有關更多資訊，請參閱 url()。

數字資料型別

整數

整數是一個或多個十進位制數字，從0到9，例如1024或-55。整數前面可以加上+或-符號，符號和整數之間沒有空格。

數字

<number>表示實數，可以有或沒有小數點和分數部分，例如0.255、128或-1.2。數字前面也可以加上+或-符號。

尺寸

<dimension>是一個帶有單位的<number>，例如45deg、100ms或10px。附加的單位識別符號不區分大小寫。數字和單位識別符號之間永遠不會有空格或任何其他字元：即1 cm無效。

CSS 使用尺寸來指定

這些都將在下面的子部分中介紹。

距離單位

在允許距離單位（也稱為長度）作為屬性值的情況下，將其描述為<length>型別。CSS 中有兩種型別的長度：相對長度和絕對長度。相對長度單位相對於其他事物指定長度。

相對長度有兩種型別：字型相對長度和視口百分比長度。這兩種型別都有兩種型別。字型相對長度單位要麼是本地字型相對長度，要麼是根字型相對長度。視口百分比長度要麼相對於視口高度或寬度大小，要麼如CSS Containment 模組中所定義的那樣，相對於容器。

本地字型相對長度

本地字型相對長度相對於“本地”字型大小或行高，相對於元素本身特徵的計算大小指定長度，或者在迴圈引用（例如em值）的情況下相對於元素的繼承值。用於font-size屬性或lh值用於line-height屬性。例如，em相對於元素上的字型大小，ex相對於元素字型的 x 高度。

單位	相對於
`cap`	元素字型的帽高（大寫字母的名義高度）。
`ch`	元素字型中窄字形的平均字元前進量，由“0”（零，U+0030）字形表示。
`em`	元素字型的字型大小。
`ex`	元素字型的 x 高度。
`ic`	元素字型中全形字形的平均字元前進量，由“水”（CJK 水字元，U+6C34）字形表示。
`lh`	元素的行高。

根字型相對長度

根字型相對長度相對於元素的根元素祖先（例如<html>或<SVG>）指定長度。例如，rem相對於根元素上的字型大小，rex是根元素字型的 x 高度。

單位	相對於
`rcap`	根元素字型的帽高（大寫字母的名義高度）。
`rch`	根元素字型中窄字形的平均字元前進量，由“0”（零，U+0030）字形表示。
`rem`	根元素字型的字型大小。
`rex`	根元素字型的 x 高度。
`ric`	根元素字型中全形字形的平均字元前進量，由“水”（CJK 水字元，U+6C34）字形表示。
`rlh`	根元素的行高。

視口單位

視口單位長度相對於視口的尺寸指定長度。例如，vw相對於視口的寬度，vh相對於視口的高度。

單位	相對於
`dvh`	動態視口高度的 1%。
`dvw`	動態視口寬度的 1%。
`lvh`	大型視口高度的 1%。
`lvw`	大型視口寬度的 1%。
`svh`	小型視口高度的 1%。
`svw`	小型視口寬度的 1%。
`vb`	根元素塊軸上視口大小的 1%。
`vh`	視口高度的 1%。
`vi`	根元素內聯軸上視口大小的 1%。
`vmax`	視口較大尺寸的 1%。
`vmin`	視口較小尺寸的 1%。
`vw`	視口寬度的 1%。

容器單位

容器查詢長度單位相對於查詢容器的尺寸指定長度。例如，cqw相對於查詢容器的寬度，cqh相對於查詢容器的高度。

單位	相對於
`cqb`	查詢容器塊大小的 1%
`cqh`	查詢容器高度的 1%
`cqi`	查詢容器內聯大小的 1%
`cqmax`	`cqi`或`cqb`中較大的值
`cqmin`	`cqi`或`cqb`中較小的值
`cqw`	查詢容器寬度的 1%

絕對長度單位

絕對長度單位固定為物理長度：英寸或釐米。因此，許多這些單位在輸出為固定大小的媒體（如列印）時更有用。例如，mm是物理毫米，是釐米的 1/10。

單位	名稱	相當於
`cm`	釐米	1cm = 96px/2.54
`in`	英寸	1in = 2.54cm = 96px
`mm`	毫米	1mm = 1cm 的 1/10
`pc`	皮卡	1pc = 1in 的 1/6
`pt`	磅	1pt = 1in 的 1/72
`px`	畫素	1px = 1in 的 1/96
`Q`	四分之一毫米	1Q = 1cm 的 1/40

在包含長度值時，如果長度為0，則不需要單位識別符號。否則，單位識別符號是必需的，不區分大小寫，並且必須緊跟在值的數字部分之後，中間沒有空格。

角度單位

角度值由型別<angle>表示，並接受以下值

單位	名稱	描述
`deg`	度	一個完整的圓圈有 360 度。
`grad`	梯度	一個完整的圓圈有 400 梯度。
`rad`	弧度	一個完整的圓圈有 2π 弧度。
`turn`	圈	一個完整的圓圈有 1 圈。

時間單位

時間值由型別<time>表示。在包含時間值時，單位識別符號（s或ms）是必需的。它接受以下值。

單位	名稱	描述
`ms`	毫秒	一秒鐘有 1000 毫秒。
`s`	秒

頻率單位

頻率值由型別<frequency>表示。它接受以下值。

單位	名稱	描述
`Hz`	赫茲	表示每秒發生的次數。
`kHz`	千赫茲	千赫茲是 1000 赫茲。

1Hz也可以寫成1hz或1HZ，表示每秒一個週期。

彈性單位

彈性單位由型別<flex>表示。它接受以下值。

單位	名稱	描述
`fr`	彈性	表示網格容器內的靈活長度

解析度單位

解析度單位由型別<resolution>表示。它們透過指示這些點中有多少個適合 CSS 英寸、釐米或畫素來表示圖形表示（例如螢幕）中單個點的尺寸。它接受以下值

單位	描述
`dpcm`	每釐米點數。
`dpi`	每英寸點數。
`dppx`、`x`	每畫素點數。

百分比

<percentage>是一種表示某個其他值的幾分之幾的型別。

百分比值始終相對於另一個數量，例如長度。每個允許百分比的屬性還定義了百分比所指的數量。此數量可以是同一元素的其他屬性的值、祖先元素的屬性的值、包含塊的測量值或其他內容。

例如，如果將框的width指定為百分比，則它指的是框的父元素計算寬度的百分比。

css

.box {
  width: 50%;
}

混合百分比和尺寸

某些屬性接受可以是兩種型別之一的尺寸，例如<length>或<percentage>。在這種情況下，允許的值在規範中詳細說明為組合單元，例如<length-percentage>。其他可能的組合如下

特殊資料型別（在其他規範中定義）

顏色

<color>值指定元素特徵的顏色（例如其背景顏色），並在CSS 顏色模組中定義。

影像

<image> 值指定了 CSS 中可以使用所有不同型別的影像，並在 CSS 影像值和替換內容模組中定義。

位置

<position> 型別定義了物件在定位區域內的二維位置，例如容器內的背景影像。此型別被解釋為 background-position，因此在 CSS 背景和邊框規範中指定。

函式式表示法

函式式表示法是一種值型別，可以表示更復雜的型別或透過 CSS 呼叫特殊處理。語法以函式名稱開頭，緊跟著一個左括號 (，然後是表示法的引數，最後是一個右括號 )。函式可以接受多個引數，這些引數的格式類似於 CSS 屬性值。

括號內允許使用空格，但可選。（但請參閱有關 min()、max()、minmax() 和 clamp() 函式頁面中空格的說明。）

一些舊的函式式表示法，例如 rgb()、rgba()、hsl() 和 hsla() 的舊語法，使用逗號，但逗號通常僅用於分隔列表中的專案。如果使用逗號分隔引數，則逗號前後空格可選。

規範

規範
CSS 值和單位模組級別 4
CSS 顏色模組級別 4
CSS 影像模組級別 3