什麼是 CSS？

瀏覽器預設樣式

在使用 HTML 結構化內容模組中，我們介紹了 HTML 是什麼以及它如何用於標記文件。這些文件將在 Web 瀏覽器中可讀。標題將看起來比普通文字更大，段落會另起一行並在它們之間留有間距。連結會著色並帶下劃線，以將其與其餘文字區分開來。

你所看到的是瀏覽器的預設樣式——瀏覽器應用於 HTML 的非常基本的樣式，以確保即使頁面作者沒有明確指定樣式，頁面也能夠可讀。這些樣式是在瀏覽器內建的預設 CSS 樣式表中定義的——它們與 HTML 無關。

如果所有網站都長一個樣，那麼網際網路將是一個無聊的地方。這就是你需要學習 CSS 的原因。

CSS 有什麼用？

使用 CSS，你可以精確控制 HTML 元素在瀏覽器中的外觀，以你喜歡的任何設計和佈局向用戶呈現你的文件。

• 文件通常是使用標記語言（最常見的是HTML，這些被稱為HTML 文件）構建的文字檔案。你可能還會遇到用其他標記語言編寫的文件，例如SVG或XML。HTML 文件包含網頁的內容並指定其結構。
• 呈現文件給使用者意味著將其轉換為你的受眾可用的形式。瀏覽器，如Firefox、Chrome、Safari和Edge，旨在以視覺方式呈現文件，例如在電腦螢幕、投影儀、移動裝置或印表機上。在 Web 環境中，這通常被稱為渲染；我們在瀏覽器如何載入網站中提供了網頁渲染過程的簡化描述。

CSS 可用於與網頁外觀相關的許多目的，例如：

• 文字樣式，包括更改標題和連結的顏色和大小。
• 建立佈局，例如網格佈局或多列布局。
• 特殊效果，例如動畫。

CSS 語言被組織成包含相關功能的模組。例如，請檢視背景和邊框模組的 MDN 參考頁面，以瞭解其目的以及它包含的屬性和功能。在我們的模組頁面中，你還會找到指向定義這些技術的規範的連結。

CSS 語法基礎

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

例如，你可能決定將頁面的主標題樣式設定為大的紅色文字。以下程式碼顯示了一個非常簡單的 CSS 規則，可以實現此目的：

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

• 在上面的例子中，CSS 規則以一個選擇器開頭。這選擇了我們要應用樣式的 HTML 元素。在這種情況下，我們為一級標題（<h1>）設定樣式。
• 然後我們包含一對花括號——{ }。
• 花括號內包含一個或多個宣告，它們以屬性和值對的形式出現。我們在冒號前指定屬性（例如，上面例子中的color），在冒號後指定屬性的值（red是為color屬性設定的值）。
• 此示例包含兩個宣告，一個用於color，另一個用於font-size。

不同的 CSS 屬性有不同的允許值。在我們的示例中，我們有color屬性，它可以接受各種顏色值。我們還有font-size屬性。此屬性可以接受各種大小單位作為值。

CSS 樣式表包含許多這樣的規則，一個接一個地編寫。

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

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

你會發現你會很快學會一些值，而其他的則需要查詢。MDN 上的各個屬性頁面為你提供了快速查詢屬性及其值的方法。

CSS 如何應用於 HTML？

正如瀏覽器如何載入網站中所解釋的，當你導航到網頁時，瀏覽器首先接收包含網頁內容的 HTML 文件，並將其轉換為DOM 樹。

此後，網頁中找到的任何 CSS 規則（無論是直接插入到 HTML 中，還是在引用的外部.css檔案中）都會根據它們將應用於的不同元素（由其選擇器指定）進行分類。然後，CSS 規則將應用於 DOM 樹，生成一個渲染樹，然後將其繪製到瀏覽器視窗中。

讓我們看一個例子。首先，我們將定義一個 CSS 可以應用的 HTML 片段：

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

現在，我們的 CSS，重複自上一節：

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

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

此 CSS

• 選擇頁面上的所有<h1>元素，將它們的文字顏色設定為紅色，並使其比預設大小更大。由於我們的示例 HTML 中只有一個<h1>，因此只有該元素會獲得樣式。
• 選擇頁面上的所有<p>元素，為它們提供自定義文字和背景顏色以及文本週圍的一些間距。我們的示例 HTML 中有兩個<p>元素，它們都獲得了樣式。

當 CSS 應用到 HTML 時，渲染輸出如下：

使用一些 CSS

嘗試使用上面的示例。為此，請按右上角的“播放”按鈕，在我們的 MDN Playground 編輯器中載入它。

執行以下操作：

1. 在現有兩個段落下方再新增一個文字段落，並注意第二個 CSS 規則是如何自動應用於新段落的。
2. 在<h1>下面的某個地方新增一個<h2>副標題，可能在一個段落之後。
3. 嘗試透過向 CSS 新增新規則來為<h2>元素賦予不同的顏色。複製h1規則，將選擇器更改為h2，並將color值從red更改為purple，例如。
4. 如果你覺得足夠大膽，請嘗試在 MDN CSS 參考中查詢一些新的 CSS 屬性和值以新增到你的規則中！

有關 CSS 基礎的更多練習，請參閱 Scrimba 的編寫你的第一行 CSS！^{MDN 學習夥伴}。這個 Scrim 提供了對基本 CSS 語法的有用概述，並提供了一個互動式挑戰，你可以在其中更多地練習編寫 CSS 宣告。

總結

現在你對 CSS 是什麼以及它如何工作有了一些瞭解，讓我們繼續進行一些編寫 CSS 的練習並更詳細地解釋其語法。

• 概述：CSS 樣式基礎
• 下一頁