CSS 值和單位

CSS 規則包含宣告，宣告又由屬性和值組成。CSS 中使用的每個屬性都有一個 **值型別**，用於描述允許使用哪些型別的值。在本課中，我們將探討一些最常用的值型別，它們是什麼以及它們是如何工作的。

**注意：**每個 CSS 屬性頁面都有一個語法部分，列出了您可以與該屬性一起使用的值型別。

先決條件	安裝基本軟體、瞭解處理檔案的基礎知識、HTML 基礎知識（學習 HTML 簡介）以及對 CSS 工作原理的瞭解（學習 CSS 首次入門）。
目標	瞭解 CSS 屬性中使用的不同型別的值和單位。

什麼是 CSS 值？

在 CSS 規範和 MDN 上的屬性頁面中，您可以看到值型別，因為它們將用尖括號括起來，例如 <color> 或 <length>。當您看到值型別 <color> 對於特定屬性有效時，這意味著您可以使用任何有效的顏色作為該屬性的值，如 <color> 參考頁面中所列。

**注意：**您會看到 CSS 值型別被稱為 *資料型別*。這兩個術語基本上是可以互換的 — 當您在 CSS 中看到某樣東西被稱為資料型別時，它實際上只是說值型別的一種花哨說法。術語 *值* 指的是您選擇使用的值型別支援的任何特定表示式。

**注意：**CSS 值型別往往用尖括號 (<, >) 括起來，以區別於 CSS 屬性。例如，有一個 color 屬性和一個 <color> 資料型別。這不要與 HTML 元素混淆，因為它們也使用尖括號，但這只是需要記住的事情，上下文應該使這一點明確。

在以下示例中，我們使用關鍵字設定了標題的顏色，使用 rgb() 函式設定了背景。

css

h1 {
  color: black;
  background-color: rgb(197 93 161);
}

CSS 中的值型別是定義允許值集合的一種方式。這意味著如果您看到 <color> 有效，您就不必擔心可以使用哪種型別的顏色值 — 關鍵字、十六進位制值、rgb() 函式等。您可以使用 *任何* 可用的 <color> 值，假設您的瀏覽器支援它們。MDN 上每個值的頁面將提供有關瀏覽器支援的資訊。例如，如果您檢視 <color> 的頁面，您會看到瀏覽器相容性部分列出了不同型別的顏色值及其支援情況。

讓我們來看看您可能經常遇到的幾種值和單位型別，以及一些示例，以便您可以嘗試不同的可能值。

數字、長度和百分比

您可能會在 CSS 中使用各種數值型別。以下是所有歸類為數值的型別。

資料型別	描述
`<integer>`	`<integer>` 是一個整數，例如 `1024` 或 `-55`。
`<number>`	`<number>` 表示一個十進位制數 — 它可能包含小數點，也可能不包含小數點，可以有小數部分。例如，`0.255`、`128` 或 `-1.2`。
`<dimension>`	一個`<dimension>` 是一個帶單位的`<number>`。例如，`45deg`、`5s` 或 `10px`。`<dimension>` 是一個總括類別，包括 `<length>`、`<angle>`、`<time>` 和 `<resolution>` 型別。
`<percentage>`	一個`<percentage>` 代表某個其他值的百分比。例如，`50%`。百分比值總是相對於另一個數量。例如，元素的長度相對於其父元素的長度。

長度

您最常遇到的數字型別是 <length>。例如，10px（畫素）或 30em。CSS 中使用兩種型別的長度 - 相對長度和絕對長度。瞭解它們之間的區別對於理解事物將變得多大至關重要。

絕對長度單位

以下是所有絕對長度單位 - 它們不依賴於任何其他事物，並且通常被認為始終具有相同的大小。

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

大多數這些單位在用於印刷時更有用，而不是用於螢幕輸出。例如，我們通常不會在螢幕上使用 cm（釐米）。您將經常使用的唯一值是 px（畫素）。

相對長度單位

相對長度單位相對於其他事物。例如

em 相對於此元素的字型大小，或在用於 font-size 時相對於父元素的字型大小。rem 相對於根元素的字型大小。
vh 和 vw 分別相對於視窗的高度和寬度。

使用相對單位的好處是，透過一些仔細的規劃，您可以使文字或其他元素的大小相對於頁面上的其他所有事物進行縮放。有關可用相對單位的完整列表，請參閱 <length> 型別的參考頁面。

在本節中，我們將探討一些最常見的相對單位。

探索一個例子

在下面的示例中，您可以看到一些相對和絕對長度單位的行為。第一個盒子有一個 width 設定為畫素。作為絕對單位，無論其他什麼發生變化，此寬度都將保持不變。

第二個盒子有一個設定為 vw（視窗寬度）單位的寬度。此值相對於視窗寬度，因此 10vw 是視窗寬度的 10%。如果更改瀏覽器視窗的寬度，盒子的尺寸應該會改變。但是，此示例使用 <iframe> 嵌入到頁面中，因此這將不起作用。要檢視此操作，您需要在自己的瀏覽器選項卡中開啟示例後嘗試它。

第三個盒子使用 em 單位。這些相對於元素的字型大小。我在包含的 <div> 上設定了 1em 的字型大小，它有一個名為 .wrapper 的類。將此值更改為 1.5em，您將看到所有元素的字型大小都增加，但只有最後一項會變寬，因為它的寬度相對於該字型大小。

按照上面的說明操作後，嘗試用其他方式玩弄這些值，看看會得到什麼。

ems 和 rems

em 和 rem 是您在為從盒子到文字的任何東西設定大小時最常遇到的兩個相對長度。瞭解它們的工作原理以及它們之間的差異非常重要，尤其是在您開始涉及更復雜的主題（如文字樣式或 CSS 佈局）時。下面的示例提供了一個演示。

下面說明的 HTML 是一組巢狀列表 - 我們總共有兩個列表，這兩個示例具有相同的 HTML。唯一的區別是第一個有一個名為 ems 的類，第二個有一個名為 rems 的類。

首先，我們在 <html> 元素上設定了 16px 的字型大小。

回顧一下，em 單位表示“我的父元素的字型大小”，如果用於 font-size（以及“我自己的字型大小”，如果用於其他任何事物）。class 為 ems 的 <li> 元素從其父級獲取其大小。因此，每個巢狀級別都會逐漸變大，因為每個級別都將其字型大小設定為 1.3em - 1.3 倍於其父元素的字型大小。

回顧一下，rem 單位表示“根元素的字型大小”（rem 代表“root em”）。class 為 rems 的 <li> 元素從根元素 (<html>) 獲取其大小。這意味著每個巢狀級別都不會不斷變大。

但是，如果更改 CSS 中的 <html> 元素的 font-size，您將看到其他所有內容相對於它發生變化 - rem 和 em 大小的文字。

行高單位

lh 和 rlh 是類似於 em 和 rem 的相對長度單位。lh 和 rlh 之間的區別在於，第一個相對於元素本身的行高，而第二個相對於根元素的行高，通常是 <html>。

使用這些單位，我們可以精確地將盒子裝飾與文字對齊。在本例中，我們使用 lh 單位透過 repeating-linear-gradient() 建立類似筆記本的線條。文字的行高無關緊要，線條總是會出現在正確的位置。

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
  gap: 24px;
  background-color: floralwhite;
  font-family: sans-serif;
}

@supports not (height: 1lh) {
  body::before {
    grid-column: 1 / -1;
    padding: 8px;
    border-radius: 4px;
    background-color: tomato;
    color: white;
    content: "You browser doesn't support lh unit just yet";
  }
}

css

p {
  margin: 0;
  background-image: repeating-linear-gradient(
    to top,
    lightskyblue 0 2px,
    transparent 2px 1lh
  );
}

html

<p style="line-height: 2em">
  Summer is a time for adventure, and this year was no exception. I had many
  exciting experiences, but two of my favorites were my trip to the beach and my
  week at summer camp.
</p>

<p style="line-height: 4em">
  At the beach, I spent my days swimming, collecting shells, and building
  sandcastles. I also went on a boat ride and saw dolphins swimming alongside
  us.
</p>

百分比

在很多情況下，百分比的處理方式與長度相同。百分比的特殊之處在於它們總是相對於某個其他值。例如，如果您將元素的 font-size 設定為百分比，它將是元素父級 font-size 的百分比。如果您將百分比用於 width 值，它將是父級 width 的百分比。

在下面的示例中，兩個百分比大小的盒子和兩個畫素大小的盒子具有相同的類名。兩組分別為 40% 和 200px 寬。

區別在於第二組兩個盒子在一個 400 畫素寬的包裝器內。第二個 200px 寬的盒子與第一個盒子寬度相同，但第二個 40% 的盒子現在是 400px 的 40% - 比第一個盒子窄很多！

嘗試更改包裝器的寬度或百分比值以檢視其工作原理。

下一個示例的字型大小以百分比設定。每個 <li> 的 font-size 為 80%；因此，巢狀的列表項會隨著它們從父級繼承其大小而逐漸變小。

請注意，雖然許多值型別接受長度或百分比，但有些只接受長度。您可以在 MDN 屬性參考頁面上檢視接受哪些值。如果允許的值包括 <length-percentage>，那麼您可以使用長度或百分比。如果允許的值只包括 <length>，則無法使用百分比。

數字

一些值型別接受數字，不帶任何單位。接受無單位數字的屬性示例是 opacity 屬性，它控制元素的不透明度（它有多透明）。此屬性接受介於 0（完全透明）和 1（完全不透明）之間的數字。

在下面的示例中，嘗試將 opacity 的值更改為 0 和 1 之間的各種小數，看看盒子及其內容如何變得更透明或更不透明。

注意： 當您在 CSS 中使用數字作為值時，它不應包含在引號中。

顏色

顏色值可以在 CSS 中的許多地方使用，無論您是要指定文字、背景、邊框和更多內容的顏色。在 CSS 中設定顏色有很多方法，讓您可以控制許多令人興奮的屬性。

現代計算機中可用的標準顏色系統支援 24 位顏色，這允許透過結合不同的紅色、綠色和藍色通道（每個通道 256 個不同的值）（256 x 256 x 256 = 16,777,216）來顯示大約 1670 萬種不同的顏色。

在本節中，我們將首先了解最常見的顏色指定方法：使用關鍵字、十六進位制和 rgb() 值。我們還將快速瞭解其他顏色函式，使您能夠在看到它們時識別它們或嘗試不同的顏色應用方法。

您可能會決定一個調色盤，然後在整個專案中使用這些顏色 - 以及您最喜歡的顏色指定方法。您可以混合和匹配顏色模型，但通常最好讓整個專案使用相同的方法來宣告顏色以保持一致性！

顏色關鍵字

您將在許多 MDN 程式碼示例中看到顏色關鍵字（或“命名顏色”）。由於 <named-color>s 資料型別包含有限數量的顏色值，因此這些顏色在生產網站上並不常用。由於關鍵字將顏色表示為人類可讀的文字值，因此命名顏色在程式碼示例中用於清楚地告訴使用者預期哪種顏色，以便學習者可以專注於正在教授的內容。

嘗試在下面的即時示例中使用不同的顏色值進行練習，以更深入地瞭解它們的工作原理。

十六進位制 RGB 值

您可能會遇到的下一種顏色值型別是十六進位制程式碼。十六進位制使用 0-9 和 a-f 中的 16 個字元，因此整個範圍是 0123456789abcdef。每個十六進位制顏色值都包含一個井號/磅號 (#)，後面跟著三個或六個十六進位制字元（例如 #fcc 或 #ffc0cb），還有一個可選的包含一個或兩個十六進位制字元，表示前面三個或六個字元顏色值的 alpha 透明度。

使用十六進位制描述 RGB 值時，每對十六進位制字元都是一個十進位制數，代表紅色、綠色和藍色通道之一，並且允許我們為每個通道指定 256 個可用值中的任何一個（16 x 16 = 256）。這些值不如關鍵字直觀地定義顏色，但它們更通用，因為您可以用它們表示任何 RGB 顏色。

同樣，嘗試更改值以檢視顏色如何變化。

RGB 值

要直接建立 RGB 值，rgb() 函式接受三個引數，分別代表顏色的紅色、綠色和藍色通道值，以及一個可選的第四個值（用斜槓 (/) 分隔），表示不透明度，與十六進位制值非常相似。與 RGB 的區別在於，每個通道不是用兩個十六進位制數字表示，而是用介於 0 和 255 之間的十進位制數或介於 0% 和 100% 之間的百分比表示（但不混合兩種）。

讓我們重新編寫最後一個示例以使用 RGB 顏色

您可以將第四個引數傳遞給 rgb()，它表示顏色的 alpha 通道，它控制不透明度。如果將此值設定為 0，它將使顏色完全透明，而 1 將使它完全不透明。介於兩者之間的值將為您提供不同的透明度級別。

注意： 在顏色上設定 alpha 通道與使用我們之前看過的 opacity 屬性有一個關鍵區別。當您使用不透明度時，您會使元素及其內部的所有內容變得不透明，而使用帶有 alpha 引數的 RGB 顏色只會使您指定的顏色變得不透明。

在下面的示例中，我們在包含的彩色盒子的塊中添加了一個背景影像。然後我們將盒子設定為具有不同的不透明度值 - 注意當 alpha 通道值較小時，背景是如何顯示得更多。

在本例中，嘗試更改 alpha 通道值以檢視它如何影響顏色輸出。

注意： 在較舊版本的 CSS 中，rgb() 語法不支援 alpha 引數 - 您需要使用另一個名為 rgba() 的函式來實現這一點。如今，您可以將 alpha 引數傳遞給 rgb()。rgba() 函式是 rgb() 的別名。

SRGB 值

sRGB 顏色空間在紅色 (r)、綠色 (g) 和藍色 (b) 顏色空間中定義顏色。

使用色調來指定顏色

如果您想超越關鍵字、十六進位制和 rgb() 來指定顏色，您可能想嘗試使用 <hue>。色調是讓我們能夠區分或識別紅色、橙色、黃色、綠色、藍色等顏色的屬性。關鍵概念是您可以在 <angle> 中指定色調，因為大多數顏色模型使用色輪來描述色調。

有幾個顏色函式包含 <hue> 元件，包括 hsl()、hwb() 和 lch()。其他顏色函式，如 lab()，根據人類的視覺來定義顏色。

如果您想了解更多關於這些函式和顏色空間的資訊，請參閱使用 CSS 將顏色應用於 HTML 元素指南，<color> 參考列出了在 CSS 中使用顏色的所有不同方法，以及 CSS 顏色模組，它概述了 CSS 中的所有顏色型別以及使用顏色值的屬性。

HWB

在 CSS 中使用色調的一個很好的起點是 hwb() 函式，它指定 srgb() 顏色。三個部分是

色調：顏色的基本色調。這需要一個介於 0 和 360 之間的 <hue> 值，表示色輪周圍的角度。
白度：顏色有多白？這需要一個從 0%（無白度）到 100%（完全白度）的值。
黑度：顏色有多黑？這需要一個從 0%（無黑度）到 100%（完全黑度）的值。

HSL

與 hwb() 函式類似的是 hsl() 函式，它也指定 srgb() 顏色。HSL 使用 色調，以及 飽和度 和 亮度

色調
飽和度：顏色有多飽和？這需要一個從 0 到 100% 的值，其中 0 表示沒有顏色（它將顯示為灰色陰影），100% 表示完全飽和的顏色。
亮度：顏色有多亮或有多暗？這需要一個從 0 到 100% 的值，其中 0 表示沒有光（它將顯示為完全黑色），100% 表示完全光（它將顯示為完全白色）。

hsl() 顏色值還有一個可選的第四個值，用斜槓 (/) 與顏色分隔，表示 alpha 透明度。

讓我們更新 RGB 示例以改用 HSL 顏色

就像 rgb() 一樣，您可以將 alpha 引數傳遞給 hsl() 來指定不透明度

注意： 在舊版本的 CSS 中，hsl() 語法不支援 alpha 引數 - 您需要使用另一個名為 hsla() 的函式來實現。現在您可以將 alpha 引數傳遞給 hsl()，但為了與舊網站的向後相容性，hsla() 語法仍然受支援，並且具有與 hsl() 完全相同的行為。

影像

<image> 值型別用於任何影像有效的場景。這可以是透過 url() 函式指向的實際影像檔案，也可以是漸變。

在下面的示例中，我們演示了影像和漸變作為 CSS background-image 屬性值的應用。

注意： <image> 還有一些其他可能的值，但這些值較新，目前瀏覽器支援度較差。如果您想了解它們，請檢視 MDN 上的 <image> 資料型別頁面。

位置

<position> 值型別表示一組 2D 座標，用於定位專案，例如背景影像（透過 background-position）。它可以採用諸如 top、left、bottom、right 和 center 之類的關鍵字，以將專案與 2D 框的特定邊界對齊，以及表示相對於框的頂部和左側邊緣的偏移量的長度。

一個典型的定位值包含兩個值 - 第一個設定水平位置，第二個設定垂直位置。如果您只為一個軸指定值，另一個軸將預設為 center。

在下面的示例中，我們使用關鍵字將背景影像定位在容器的頂部和右側 40px 處。

嘗試修改這些值，看看如何移動影像。

字串和識別符號

在上面的所有示例中，我們看到了一些使用關鍵字作為值的地方（例如 <color> 關鍵字，如 red、black、rebeccapurple 和 goldenrod）。這些關鍵字更準確地描述為**識別符號**，CSS 理解的一種特殊值。因此，它們不帶引號 - 它們不被視為字串。

在 CSS 中，有一些地方需要使用字串。例如，在指定生成內容時。在這種情況下，該值被引起來表示它是一個字串。在下面的示例中，我們使用無引號的顏色關鍵字以及一個引用的生成內容字串。

函式

在程式設計中，函式是一段執行特定任務的程式碼。函式很有用，因為您可以編寫一次程式碼，然後重複使用它很多次，而不是一遍又一遍地編寫相同的邏輯。大多數程式語言不僅支援函式，而且還附帶方便的內建函式來完成常見任務，因此您不必從頭開始編寫它們。

CSS 也具有函式，它們的工作方式與其他語言中的函式類似。實際上，我們已經在上面的顏色部分中看到了 CSS 函式，使用了rgb() 和hsl() 函式。

除了應用顏色之外，您還可以使用 CSS 函式執行許多其他操作。例如，變換函式是一種常見的移動、旋轉和縮放頁面上元素的方法。您可能會看到translate() 用於水平或垂直移動元素，rotate() 用於旋轉元素，或者scale() 用於放大或縮小元素。

數學函式

在為專案建立樣式時，您可能會先使用諸如 300px 之類的長度數字或 200ms 之類的持續時間數字。如果您希望這些值根據其他值更改，則需要進行一些數學運算。您可以計算一個值的百分比或將一個數字新增到另一個數字，然後使用結果更新您的 CSS。

CSS 支援數學函式，允許我們執行計算，而不是依賴靜態值或在 JavaScript 中進行數學運算。最常見的數學函式之一是calc()，它允許您執行加、減、乘、除等運算。

例如，假設我們希望將元素的寬度設定為其父容器的 20% 加上 100px。我們無法使用靜態值指定此寬度 - 如果父容器使用百分比寬度（或 em 或 rem 之類的相對單位），那麼它將根據使用上下文以及其他因素（例如使用者的裝置或瀏覽器視窗寬度）而有所不同。但是，我們可以使用 calc() 將元素的寬度設定為其父容器的 20% 加上 100px。20% 是基於父容器 (.wrapper) 的寬度，如果該寬度發生變化，計算結果也會發生變化

CSS 中還有許多其他數學函式可以使用，例如min()、max() 和clamp()；它們分別允許您從一組值中選擇最小值、最大值或中間值。您還可以使用三角函式，例如sin()、cos() 和tan() 來計算圍繞某個點的旋轉元素的角度，或選擇將色調角作為引數的顏色。指數函式也可用於動畫和過渡，當您需要對元素的移動和外觀進行非常精確的控制時。

瞭解 CSS 函式很有用，這樣您在看到它們時就能識別出來。您應該在自己的專案中開始嘗試使用它們 - 它們將幫助您避免編寫自定義或重複的程式碼來實現可以使用普通 CSS 達成的效果。

測試您的技能！

您已經閱讀完本文，但您能記住最重要的資訊嗎？在您繼續學習之前，您可以進行一些進一步的測試來驗證您是否保留了這些資訊 - 請檢視測試您的技能：值和單位。

摘要

這是一篇快速介紹了您可能遇到的最常見的值和單位型別。您可以在CSS 值和單位參考頁面上檢視所有不同的型別 - 在您完成這些課程的過程中，您將遇到許多這樣的型別。

要記住的關鍵是，每個屬性都定義了允許的值型別列表，每個值型別都有一個定義，解釋了這些值是什麼。然後，您可以在 MDN 上查詢詳細資訊。例如，瞭解<image> 也允許您建立顏色漸變非常有用，但這可能不是顯而易見的資訊！

在下一篇文章中，我們將探討 CSS 中的專案大小。