什麼是 CSS？

正如我們之前提到的，CSS 是一種用於指定文件如何呈現給使用者的語言 — 如何對其進行樣式化、佈局等。

**文件**通常是一個使用標記語言構建的文字檔案 — HTML 是最常見的標記語言，但您也可能會遇到其他標記語言，例如 SVG 或 XML。

向用戶**呈現**文件意味著將其轉換為您的受眾可以使用的一種形式。瀏覽器，如 Firefox、Chrome 或 Edge，旨在以視覺方式呈現文件，例如在計算機螢幕、投影儀或印表機上。

CSS 可用於非常基本的文件文字樣式 — 例如，用於更改標題和連結的 顏色 和 大小。它可用於建立佈局 — 例如，將單列文字轉換為具有主要內容區域和相關資訊側邊欄的佈局。它甚至可以用於諸如 動畫 之類的效果。請檢視本段中的連結以獲取具體示例。

CSS 是一種基於規則的語言 — 您透過指定應應用於網頁上特定元素或元素組的樣式組來定義規則。

例如，您可以決定將頁面上的主標題顯示為大型紅色文字。以下程式碼顯示了一個非常簡單的 CSS 規則，該規則將實現上述樣式

h1 {
  color: red;
  font-size: 5em;
}

• 在上面的示例中，CSS 規則以 選擇器 開頭。這會選擇我們將要設定樣式的 HTML 元素。在本例中，我們正在設定一級標題 (h1) 的樣式。
• 然後我們有一組花括號 { }。
• 花括號內將包含一個或多個**宣告**，這些宣告採用**屬性**和**值**對的形式。我們在冒號前指定屬性（在上面的示例中為color），在冒號後指定屬性的值（在本例中為red）。
• 此示例包含兩個宣告，一個用於color，另一個用於font-size。每對宣告都指定了我們正在選擇的元素（在本例中為h1）的一個屬性，然後指定我們希望賦予該屬性的值。

CSS 屬性具有不同的允許值，具體取決於指定哪個屬性。在我們的示例中，我們有color屬性，它可以採用各種顏色值。我們還有font-size屬性。此屬性可以採用各種尺寸單位作為值。

CSS 樣式表將包含許多這樣的規則，按順序一行一行地編寫。

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

您會發現，您會很快學會一些值，而另一些值則需要查詢。MDN 上的各個屬性頁面提供了一種快速查詢屬性及其值的方法，當您忘記或想知道還可以使用哪些其他值時。

由於可以使用 CSS 樣式化如此多的內容，因此該語言被分解成多個模組。在您探索 MDN 時，您會看到對這些模組的引用。許多文件頁面都圍繞某個特定模組進行組織。例如，您可以檢視 MDN 對背景和邊框模組的參考，以瞭解其用途及其包含的屬性和功能。在該模組中，您還會找到一個指向定義該技術的規範的連結（另請參見下面的部分）。

在此階段，您無需過多擔心 CSS 的結構；但是，例如，如果您知道某個屬性可能存在於其他類似內容中，並且因此可能在同一個規範中，那麼它可以使查詢資訊變得更容易。

舉一個具體的例子，讓我們回到背景和邊框模組——您可能會認為background-color和border-color屬性在此模組中定義是合乎邏輯的。而且你是對的。

所有 Web 標準技術（HTML、CSS、JavaScript 等）都在稱為規範（或“規範”）的大型文件中定義，這些文件由標準組織（如W3C、WHATWG、ECMA或Khronos）釋出，並精確定義了這些技術應該如何執行。

CSS 也不例外——它由 W3C 內的一個名為CSS 工作組的團隊開發。該小組由瀏覽器供應商和其他對 CSS 感興趣的公司代表組成。還有一些其他人，稱為受邀專家，充當獨立的聲音；他們與成員組織沒有關聯。

新的 CSS 功能由 CSS 工作組開發或指定——有時因為特定瀏覽器有興趣擁有某些功能，有時因為 Web 設計師和開發人員要求某個功能，有時因為工作組本身確定了某個需求。CSS 不斷發展，新的功能不斷湧現。但是，CSS 的一個關鍵點是，每個人都非常努力地避免以破壞舊網站的方式更改內容。使用當時有限的 CSS 在 2000 年構建的網站今天仍然可以在瀏覽器中使用！

作為 CSS 的新手，您可能會發現 CSS 規範令人不知所措——它們旨在供工程師用來在使用者代理中實現對功能的支援，而不是供 Web 開發人員閱讀以瞭解 CSS。許多經驗豐富的開發人員更願意參考 MDN 文件或其他教程。但是，值得知道這些規範的存在，並瞭解您正在使用的 CSS、瀏覽器支援（見下文）和規範之間的關係。

在指定 CSS 功能後，只有當一個或多個瀏覽器實現了該功能時，它對我們開發網頁才有用。這意味著程式碼已被編寫為將我們 CSS 檔案中的指令轉換為可以輸出到螢幕上的內容。我們將在課程CSS 的工作原理中更詳細地介紹此過程。所有瀏覽器同時實現某個功能的情況並不常見，因此通常存在一個差距，您可以在某些瀏覽器中使用 CSS 的某些部分，而在其他瀏覽器中則無法使用。因此，能夠檢查實現狀態非常有用。

瀏覽器支援狀態在每個 MDN CSS 屬性頁面上的名為“瀏覽器相容性”的表格中顯示。查閱該表中的資訊，以檢查該屬性是否可以在您的網站上使用。例如，請參閱CSS font-family 屬性的瀏覽器相容性表。

根據您的需求，您可以使用瀏覽器相容性表檢查此屬性在各種瀏覽器中的支援情況，或檢查您的特定瀏覽器和您擁有的版本是否支援該屬性，或者在您使用的瀏覽器和版本中是否存在您應該注意的任何注意事項。

您已經讀到了文章的結尾！現在您已經對 CSS 有了一些瞭解，讓我們繼續CSS 入門，在那裡您可以開始自己編寫一些 CSS。

• 概述：CSS 入門
• 下一步