CSS 入門

在本文中，我們將引導你使用一個簡單的 HTML 文件併為其應用 CSS，在此過程中學習該語言的一些實用細節。我們還將回顧你尚未了解的一些額外 CSS 語法特性。

預備知識	已安裝基本軟體，瞭解檔案操作的基礎知識，以及 HTML 基礎知識（學習HTML 簡介）。
學習成果	將 CSS 應用於 HTML 文件。編寫基本 CSS 的實踐經驗。對基本選擇器型別和組合器有實用的瞭解。狀態在 CSS 中的應用概念。熟悉其他 CSS 語法特性，例如 at-rule、函式、簡寫屬性和空白。

從一些 HTML 開始

我們的起點是一個 HTML 文件。如果你想在自己的電腦上工作，可以從下面複製程式碼。將下面的程式碼儲存為 index.html 在你機器上的一個資料夾中。

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSS</title>
  </head>

  <body>
    <h1>I am a level one heading</h1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span element</span> and also a
      <a href="https://example.com">link</a>.
    </p>

    <p>
      This is the second paragraph. It contains an <em>emphasized</em> element.
    </p>

    <ul>
      <li>Item <span>one</span></li>
      <li>Item two</li>
      <li>Item <em>three</em></li>
    </ul>
  </body>
</html>

渲染效果如下：

注意：如果你在無法輕鬆建立檔案的裝置或環境中閱讀此內容，請不要擔心 — 點選上面即時示例中的“播放”按鈕，在 MDN Playground 中開啟它。在那裡，你可以按照說明編輯 CSS 和 HTML 程式碼，並即時檢視組合結果。

向我們的文件新增 CSS

我們要做的第一件事是告訴 HTML 文件，我們有一些 CSS 規則要它使用。將 CSS 應用於 HTML 文件的方法有三種，你通常會遇到 — 外部樣式表、內部樣式表和內聯樣式。現在讓我們看看這些。

如果你正在使用 MDN Playground 閱讀本文，你將無法像在本地計算機上編寫程式碼的人那樣以相同的方式執行本節中詳述的步驟。這是因為 MDN Playground 在後臺隱式處理將 CSS 新增到 HTML。但是，你仍然應該通讀本節以瞭解內容。

外部樣式表

外部樣式表包含一個單獨的 .css 副檔名檔案中的 CSS。這是將 CSS 引入文件最常見和最有用的方法。你可以將單個 CSS 檔案連結到多個網頁，使用相同的 CSS 樣式表為所有網頁設定樣式。

在與你的 HTML 文件相同的資料夾中建立一個檔案，並將其儲存為 styles.css。

要將 styles.css 連結到 index.html，請在 HTML 文件的 <head> 內部的某個位置新增以下行

html

<link rel="stylesheet" href="styles.css" />

這個 <link> 元素使用 rel 屬性告訴瀏覽器我們有一個樣式表，並使用 href 屬性的值指示該樣式表的位置。你可以透過向 styles.css 新增規則來測試 CSS 是否有效。使用你的程式碼編輯器，將以下內容新增到你的 CSS 檔案中

css

h1 {
  color: red;
}

儲存你的 HTML 和 CSS 檔案，並在 Web 瀏覽器中重新載入頁面。文件頂部的 H1 標題現在應該是紅色的。如果發生這種情況，恭喜你 — 你已成功將一些 CSS 應用於 HTML 文件。如果未發生這種情況，請仔細檢查你是否正確輸入了所有內容。

在不同位置定位樣式表

在上面的示例中，CSS 檔案與 HTML 文件在同一個資料夾中，但你可以將其放置在其他位置並調整路徑（與 HTML 影像相同）。以下是三個示例

html

<!-- In a subdirectory called styles in the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- In a subdirectory called general, which is in a subdirectory called styles, in the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go back one directory level, then in a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />

內部樣式表

內部樣式表包含在 <style> 元素中，這些元素位於 HTML <head> 中。現在讓我們建立一個。

在你的 HTML 文件中，在 <head> 和 </head> 標籤之間新增以下程式碼片段

html

<style>
  p {
    color: purple;
  }
</style>

儲存並重新整理，你應該會看到所有段落都變成紫色。

在某些情況下，內部樣式表可能很有用。例如，也許你正在使用內容管理系統，但你無法修改外部 CSS 檔案。

然而，對於多頁站點，內部樣式表不如外部樣式表高效。要使用內部樣式表對多個頁面應用統一的 CSS 樣式，你必須在每個網頁上重複內部樣式表。這種效率損失也會延伸到站點維護。對於內部樣式表中的 CSS，即使一個簡單的樣式更改也可能需要編輯多個網頁。

在你繼續之前，從你的示例 HTML 中刪除 <style> 元素及其內容。

內聯樣式

內聯樣式是影響單個 HTML 元素的 CSS 宣告，包含在 style 屬性中。現在讓我們嘗試實現一個。

在你的 HTML 中為 <span> 元素新增一個 style 屬性，使其看起來像以下內容

html

<span style="color: purple; font-weight: bold">span element</span>

儲存並重新整理，你應該會看到只有 <span> 中的文字變成紫色和粗體。嘗試在你的 style 屬性中新增更多宣告（用分號分隔），或者在其他元素中新增一些額外的 style 屬性。

完成實驗後，刪除所有 style 屬性。

如果可能，請避免以這種方式使用 CSS。這是一種不好的做法。首先，它是維護 CSS 效率最低的實現。一個樣式更改可能需要在單個網頁中進行多次編輯。其次，內聯 CSS 還將（CSS）表現程式碼與 HTML 和內容混合在一起，使一切都更難閱讀和理解。分離程式碼和內容使所有網站開發人員的維護工作更容易。

如果你的工作環境非常嚴格，你可能不得不使用內聯樣式。例如，你的 CMS 可能只允許你編輯 HTML 主體。你可能還會看到 HTML 電子郵件中大量使用內聯樣式，以實現與儘可能多的電子郵件客戶端的相容性。在使用 JavaScript 動態應用樣式時，設定內聯樣式也相當常見。

使用常見選擇器

在本節中，我們將簡要介紹一些你將遇到的更常見的選擇器型別。

選擇 HTML 元素

透過將標題設定為紅色，我們已經演示了我們可以定位和樣式化 HTML 元素。我們透過定位元素選擇器（也稱為型別選擇器）來做到這一點 — 這是一種直接匹配 HTML 元素名稱的選擇器。要定位文件中的所有段落，你將使用選擇器 p。要將所有段落變為綠色，你將使用

css

p {
  color: green;
}

你可以透過用逗號分隔選擇器來同時定位多個選擇器。如果你想讓所有段落和所有列表項都變為綠色，你的規則將如下所示

css

p,
li {
  color: green;
}

在下面的示例中（點選“播放”）或在你的本地副本中嘗試一下

<h1>I am a level one heading</h1>

<p>
  This is a paragraph of text. In the text is a <span>span element</span> and
  also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul>

css

h1 {
  color: red;
}

p,
li {
}

新增一個類

到目前為止，我們已經根據 HTML 元素名稱對元素進行了樣式設定。只要你希望文件中所有相同型別的元素看起來都一樣，這就可以正常工作。要選擇元素的子集而不更改其他元素，你可以向 HTML 元素新增一個 class 並在你的 CSS 中定位該類。

在你的 HTML 文件中，向第二個列表項新增一個 class 屬性。你的列表現在將如下所示
html
```
<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
```
在你的 CSS 中，你可以透過建立一個以句點開頭的選擇器來定位 special 類。將以下內容新增到你的 CSS 檔案中
css
```
.special {
  color: orange;
  font-weight: bold;
}
```
儲存並重新整理以檢視結果。

現在，你可以將 special 類應用於頁面上你希望具有與此列表項相同外觀的其他元素。在段落內的 <span> 中新增一個 special 類，然後重新載入頁面：它現在也應該是橙色和粗體。

根據文件中的位置設定樣式

有時你會希望某個元素根據其在文件中的位置顯示不同的外觀。有許多選擇器可以幫助你解決這個問題，但現在我們只看幾個。在我們的文件中，有兩個 <em> 元素 — 一個在段落內，另一個在列表項內。要僅選擇巢狀在 <li> 元素內的 <em>，你可以使用一個名為後代組合器的選擇器，它以兩個其他選擇器之間的空格形式出現。

將以下規則新增到你的樣式表中

css

li em {
  color: rebeccapurple;
}

此選擇器將選擇任何作為 <li> 後代的所有 <em> 元素。因此，在你的示例文件中，你應該會發現第三個列表項中的 <em> 現在是紫色的，但段落內的那個沒有改變。

你可能還想嘗試在 HTML 中緊跟標題並在相同層次結構級別的段落設定樣式。為此，請在選擇器之間放置一個 +（一個相鄰兄弟選擇器）。

嘗試將此規則也新增到你的樣式表中

css

h1 + p {
  font-size: 200%;
}

下面的即時示例包含以上兩條規則。嘗試新增一條規則，使 span 在段落內部時變為紅色。如果第一個段落中的 span 變為紅色，但第一個列表項中的 span 不變色，則說明你做對了。

<h1>I am a level one heading</h1>

<p>
  This is a paragraph of text. In the text is a <span>span element</span> and
  also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item <span>one</span></li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul>

css

li em {
  color: rebeccapurple;
}

h1 + p {
  font-size: 200%;
}

注意：如你所見，CSS 為我們提供了多種定位元素的方式，而我們到目前為止只觸及了表面！我們將在課程的稍後階段深入研究所有這些選擇器以及更多選擇器。

根據狀態設定樣式

在本教程中我們將要了解的最後一種樣式型別是根據元素狀態進行樣式設定的能力。一個簡單的例子是為連結設定樣式。當我們為連結設定樣式時，我們需要定位 <a>（錨點）元素。它具有不同的狀態，具體取決於它是未訪問、已訪問、被懸停、透過鍵盤聚焦還是正在被點選（啟用）。你可以使用 CSS 來定位這些不同的狀態 — 下面的 CSS 將未訪問的連結樣式設定為粉紅色，將已訪問的連結樣式設定為綠色。

css

a:link {
  color: pink;
}

a:visited {
  color: green;
}

你可以更改使用者懸停時連結的外觀，例如透過刪除下劃線，這可以透過下一條規則實現

css

a:hover {
  text-decoration: none;
}

在下面的示例中，你可以嘗試連結不同狀態的不同值。我們已經添加了上面的規則，現在意識到粉紅色相當淺，難以閱讀 — 為什麼不將其更改為更好的顏色呢？你能讓連結加粗嗎？

<h1>I am a level one heading</h1>

<p>
  This is a paragraph of text. In the text is a <span>span element</span> and
  also a <a href="http://example.com">link</a>.
</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item <em>three</em></li>
</ul>

css

a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

我們已經刪除了懸停時連結的下劃線。你可以從連結的所有狀態中刪除下劃線。然而，值得記住的是，在實際網站中，你需要確保訪問者知道連結是連結。保留下劃線對於人們意識到段落中的某些文字可以點選是一個重要的線索 — 這是他們習慣的行為。與 CSS 中的所有內容一樣，你的更改可能會使文件的可訪問性降低 — 我們將嘗試在適當的地方強調潛在的陷阱。

注意：你經常會在這些課程和 MDN 中看到有關可訪問性的提及。當我們談論可訪問性時，我們指的是我們的網頁必須對所有人來說都易於理解和使用，無論他們是使用帶滑鼠或觸控板的計算機、帶觸控式螢幕的手機、僅使用鍵盤導航，還是透過螢幕閱讀器（它會朗讀文件內容）導航。

組合選擇器和組合器

值得注意的是，你可以將多個選擇器和組合器組合在一起。例如

css

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span {
}

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p {
}

你也可以將多種型別組合在一起。嘗試將以下內容新增到你的程式碼中

css

h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

這將樣式化具有 special 類且位於 <p> 內部且緊跟在 <h1> 之後的任何元素。呼！這應該會定位你程式碼中的 <span class="special">span element</span> 元素。

如果這目前看起來很複雜，請不要擔心 — 隨著你編寫更多 CSS，你很快就會開始掌握它。

其他 CSS 語法特性

現在我們已經玩了一些 CSS 特性，我們將帶你粗略瞭解一下你在課程中會遇到的其他一些 CSS 語法特性。如果你想了解其中任何一個的更多詳細資訊，你可以嘗試在本頁頂部的搜尋欄位中輸入特性名稱，或者瀏覽 MDN CSS 參考。

為了試驗每個程式碼片段，你可以將提供的 HTML 和 CSS 新增到你上面使用的本地示例或 MDN Playground 例項中。

函式

雖然大多數值都是相對簡單的關鍵字或數值，但也有一些值採用函式的形式。

calc() 函式

一個例子是 calc() 函式，它可以在 CSS 中進行簡單的數學運算

html

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

css

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

這呈現為

函式由函式名稱和用於括住函式值的括號組成。在上面的 calc() 示例中，這些值定義了此框的寬度為包含塊寬度的 90%，減去 30 畫素。

變換函式

另一個例子是 transform 屬性的各種值，例如 rotate()。

html

<div class="box"></div>

css

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

上述程式碼的輸出如下所示

查詢下面列出的屬性的不同值。嘗試編寫 CSS 規則，使用以下函式將樣式應用於不同的 HTML 元素

transform
background-image，尤其是漸變值
color，尤其是 rgb 和 hsl 值

@規則

CSS @規則（讀作“at-rules”）提供有關 CSS 應如何表現的說明。你可能會遇到的一個常見 @規則是 @media，它用於建立媒體查詢。媒體查詢使用條件邏輯來應用 CSS 樣式。

在下面的示例中，樣式表為 <body> 元素定義了一個預設的粉紅色背景。然而，隨後的媒體查詢會在瀏覽器視口寬度大於 30em 時，為 <body> 元素設定藍色背景。

css

body {
  background-color: pink;
}

@media (width >= 30em) {
  body {
    background-color: blue;
  }
}

簡寫屬性

某些屬性，如 font、background、padding、border 和 margin，被稱為簡寫屬性。這是因為簡寫屬性在一行中設定多個值。

例如，這一行程式碼

css

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

等效於這四行程式碼

css

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

這一行

css

background: red url("bg-graphic.png") 10px 10px repeat-x fixed;

等效於這五行

css

background-color: red;
background-image: url("bg-graphic.png");
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

在課程的後面，你將遇到許多其他簡寫屬性的示例。現在，嘗試在你的程式碼中使用上述宣告（或你可能知道的其他宣告）來更熟悉它們的工作原理。

CSS 註釋

與任何編碼工作一樣，在你的 CSS 中編寫註釋是最佳實踐。這有助於你在以後進行修復或增強時記住程式碼的工作原理。它還有助於其他人理解程式碼。

CSS 註釋以 /* 開頭，以 */ 結尾。在下面的示例中，註釋標記了不同程式碼部分的開始。這有助於在程式碼庫變大時進行導航。透過這種註釋方式，在程式碼編輯器中搜索註釋成為高效查詢程式碼部分的一種方法。

css

/* Handle basic element styling */
/* ---------------------------- */
body {
  font:
    1em/150% "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (width >= 70em) {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/* Handle specific elements nested in the DOM */
div p,
#id::first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

“註釋掉”程式碼也適用於暫時停用部分程式碼進行測試。在下面的示例中，透過“註釋掉”程式碼來停用 .special 的規則。

css

/* .special {
  color: red;
} */

p {
  color: blue;
}

嘗試向你的 CSS 添加註釋。

CSS 中的空白

空白是指實際的空格、製表符和換行符。就像瀏覽器忽略 HTML 中的額外空白一樣，瀏覽器也會忽略 CSS 中的額外空白。空白的好處是它讓你更容易閱讀程式碼。

在下面的示例中，每個宣告（以及規則的開始/結束）都有自己的一行。這可以說是編寫 CSS 的好方法。它使 CSS 更容易維護和理解。

css

body {
  font:
    1em/150% "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (width >= 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

下一個示例以更壓縮的格式顯示相同的 CSS，刪除了所有額外的空白。雖然這兩個示例的工作方式相同，但下面的示例更難閱讀。

css

body{font:1em/150% "Helvetica","Arial",sans-serif;padding:1em;margin:0 auto;max-width:33em;}
@media(width>=70em){body{font-size:130%;}}
h1{font-size:1.5em;}

請記住，某些空白更改可能會導致錯誤。屬性名永遠不包含空白，而預期在多個值之間有空白的屬性值如果刪除了該空白將無效。例如，這些宣告是有效的 CSS

css

margin: 0 auto;
padding-left: 10px;

但這些宣告無效

css

margin: 0auto;
padding- left: 10px;

你看到空格錯誤了嗎？首先，0auto 未被識別為 margin 屬性的有效值。條目 0auto 應該是兩個單獨的值：0 和 auto。其次，瀏覽器無法識別 padding- 為有效屬性。正確的屬性名（padding-left）不包含空格。

你應該始終確保用至少一個空格將不同的值彼此分開。將屬性名稱和屬性值作為單個連續字串放在一起。

要了解空格如何破壞 CSS，請嘗試在測試 CSS 中玩弄空格。

總結

在本文中，我們探討了多種使用 CSS 樣式化文件的方法。在接下來的課程中，我們將繼續深化這方面的知識。然而，你現在已經掌握了足夠的知識來樣式化文字，並根據文件中定位元素的不同方式應用 CSS。

接下來，我們將為你提供一個挑戰來測試你新獲得的知識。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 10 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容問題