1. 學習
  2. 入門模組
  3. 你的第一個網站
  4. 設定內容樣式

CSS：樣式化內容

CSS (層疊樣式表) 是用於樣式化 Web 內容的程式碼。本文將引導你基本瞭解 CSS——它是如何工作的，以及如何改進你在上一篇文章中建立的內容結構的外觀和感覺。

預備知識 對你的計算機作業系統、用於構建網站的基本軟體和檔案系統有基本瞭解。
學習成果
  • CSS 的目的和功能。
  • CSS 語法的基本組成部分——規則集、選擇器、宣告、屬性、屬性值。
  • 常見的 CSS 功能，包括盒模型、更改顏色和字型，以及定位 HTML 元素。

什麼是 CSS？

與 HTML 一樣，CSS 不是程式語言。它也不是標記語言。 CSS 是一種樣式表語言。 CSS 用於樣式化 HTML 元素：你選擇要樣式化的元素，並設定其樣式屬性的值，這些屬性定義了它們的外觀。

讓我們回顧一下文章 建立內容 中的基本 HTML 示例

html
<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

它本身呈現如下

如果我們加入一些 CSS，我們可以改變 HTML 的外觀。以下程式碼片段選擇 <p> 元素，併為其提供不同的 字型 和紅色文字 顏色。然後它選擇所有 <li> 元素，併為每個元素提供一個黃綠色 背景顏色、一個 1 畫素的實心黑色 邊框 和一個 5 畫素的 下邊距

css
p {
  font-family: sans-serif;
  color: red;
}

li {
  background-color: greenyellow;
  border: 1px solid black;
  margin-bottom: 5px;
}

應用 CSS 到 HTML 後，演示現在呈現如下

如你所見，只需一點點 CSS，我們就能改變一個樸素列表的外觀。

CSS 還有許多其他功能，從指定背景影像和漸變，到控制排版和滾動行為，再到新增動畫和構建整個網頁佈局。

將 CSS 應用到你的 HTML

使用 CSS 時，首先要確保你的 CSS 已成功應用到你的 HTML。在本節中，我們將為你的 first-website 新增一個 CSS 樣式表，並將其應用到你的頁面。

  1. 在你的 first-website 資料夾中，建立另一個名為 styles 的新資料夾。

  2. 使用文字編輯器，將以下 CSS 貼上到一個新檔案中，這將使你的 <p> 元素具有紅色文字顏色。從這樣的內容開始測試你的樣式表是否正確應用到你的 HTML 非常有用。

    css
    p {
  color: red;
}

  3. 將檔案儲存到 styles 資料夾中，檔名為 style.css。

  4. 開啟你的 index.html 檔案。將以下行貼上到 HTML 頭部（在 <head> 和 </head> 標籤之間）

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

  5. 儲存 index.html 並在瀏覽器中載入它。你應該會看到類似以下內容

A Mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

如果你的段落文字是紅色的，恭喜你！你的 CSS 正在工作。如果不是，請仔細檢查上述步驟，確保你正確遵循了每一步。

CSS 語法基礎

在前面的 CSS 示例中，p 被稱為一個 **選擇器** ——它選擇要樣式化的元素。具體來說，p 選擇 HTML 中的所有段落。花括號 ({ }) 內的行被稱為一個 **宣告** ——它為一個特定屬性設定一個值。在這種情況下，**屬性** 是 color，它控制段落的文字顏色，而設定的 **屬性值** 是 red。

整個結構被稱為一個 **規則集**。（術語 _規則集_ 通常簡稱為 _規則_。）

讓我們看另一個規則集，這次有多個宣告

css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

在一個規則集中，你必須使用分號 (;) 將一個宣告與下一個宣告分隔開。在每個宣告中，你必須使用冒號 (:) 將屬性與其值分隔開。

你還可以在一個規則中包含多個選擇器，用逗號分隔，以選擇多個元素。例如

css
p,
.my-class,
#my-id {
  color: red;
}

在這個 CSS 規則中，我們包含了一個 **元素**（或 **型別**）選擇器，它選擇一個特定的 HTML 元素。我們還包含了兩種其他選擇器型別，它們與本教程的其餘部分無關。如果你好奇它們的作用，請檢視我們的 基本選擇器 指南。

注意：Scrimba 的 編寫你的第一行 CSS！ MDN 學習合作伙伴 提供了一個有用的互動式 CSS 語法入門。

改進文字

讓我們回到我們的例子，並使用 CSS 來改善文字的外觀。我們將為頁面設定新的字型，並更改不同元素的一些文字設定。

  1. 首先，找到你之前儲存的 Google Fonts 的輸出。如果你尚未選擇字型，請點選連結立即選擇。

  2. 將 <link> 元素新增到 index.html 的 <head> 中，就在閉合的 </head> 標籤之前。它們應該看起來像這樣

    html
    <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
  rel="stylesheet" />

    此程式碼將你的頁面連結到 Google Fonts 服務託管的樣式表，該樣式表載入你選擇的字型。

  3. 接下來，開啟你的 style.css 檔案並刪除現有規則。我們不再希望我們的段落是紅色的。

  4. 將以下行新增到 style.css

    css
    html {
  /* px means "pixels". The base font size is now 10 pixels high */
  font-size: 10px;
  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
  font-family: PLACEHOLDER;
}

    注意：CSS 中 /* 和 */ 之間的任何內容都是 **CSS 註釋**，瀏覽器會忽略它。CSS 註釋是一種你可以包含關於你的程式碼或邏輯的有用註釋的方式，而不會影響你的網頁的渲染方式。

  5. 將 font-family 佔位符行替換為 Google Fonts 程式碼中的 font-family 行，例如

    css
    font-family: "Roboto", sans-serif;

    font-family 屬性設定你要應用於 HTML 的字型。此規則為整個頁面定義了一個全域性基礎字型和字型大小。所有 <html> 元素內的元素都將繼承相同的 font-size 和 font-family。

  6. 現在讓我們為 <h1>、<li> 和 <p> 元素設定一些字型和文字樣式。我們將為每個元素設定新的 font-size 值。我們還將使用 text-align 居中標題，並增加段落和列表項的 line-height 和 letter-spacing，使正文內容更具可讀性。

    css
    h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

  7. 儲存你的程式碼並在瀏覽器中載入你的 HTML（如果你之前開啟過它，請重新整理）。你的作品應該看起來與此類似

    A Mozilla logo and some paragraphs. A sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

    注意：嘗試調整 px 值，直到你為標題和正文文字得到喜歡的字型大小。

CSS 就是關於盒子

你會注意到，隨著你越來越多地使用 CSS，很多東西都與盒子有關。頁面上的大多數 HTML 元素都可以被視為位於其他盒子之上（或旁邊）的盒子。你可以為這些盒子設定大小、顏色、定位等值。這被稱為 盒模型。

Three boxes sat inside one another. From outside to in they are labelled margin, border and padding

頁面上佔用空間的每個盒子都有以下屬性：

  • padding：內容周圍的空間。在前面的示例中，它是段落文本週圍的空間。
  • border：緊鄰內邊距外面的實線。
  • margin：邊框外的空間。

在本節中，我們還使用了以下屬性，其中一些你以前見過

  • width：元素的寬度。
  • background-color：元素內容和內邊距後面的顏色。
  • color：元素內容的顏色（通常是文字）。
  • text-shadow：元素內部文字的投影。
  • display：元素的顯示模式（基本上是指它在網頁上的外觀或佈局方式）。

在接下來的每個部分中

  1. 將提供的 CSS 程式碼新增到你的 style.css 檔案的底部。
  2. 儲存檔案並重新整理瀏覽器，檢視 CSS 如何影響 HTML 渲染。
  3. 閱讀提供的解釋，以幫助你理解 CSS 的工作原理。
  4. 如果你喜歡冒險，可以嘗試更改屬性值以進一步自定義你的頁面。

更改頁面顏色

新增以下內容

css
html {
  background-color: #00539f;
}

此規則為整個頁面設定了背景顏色。將顏色程式碼更改為你選擇的顏色 你的網站會是什麼樣子？

樣式化主體

接下來，新增此規則

css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

以上程式碼為 <body> 元素的幾個屬性設定了新值。讓我們逐行講解

  • width: 600px;：這強制正文始終為 600 畫素寬。
  • margin: 0 auto;：當你為 margin 或 padding 等屬性設定兩個值時，第一個值影響元素的頂部_和_底部（在此例中設定為 0）；第二個值影響元素的左側_和_右側。auto 是一個特殊值，它將可用水平空間均勻地分配給左右兩側。
  • background-color: #FF9500;：這會設定元素的背景顏色。我們的專案使用紅橙色作為 <body> 背景顏色，以與 <html> 元素使用的深藍色形成對比。
  • padding: 0 20px 20px 20px;：這設定了內邊距的四個值。目的是在內容周圍留出一些空間。在此示例中，正文頂部沒有內邊距，右側、底部和左側有 20 畫素內邊距。這些值按順序設定頂部、右側、底部和左側內邊距。
  • border: 5px solid black;：這設定了邊框的寬度、樣式和顏色值。在這種情況下，它是一個 5 畫素寬的實心黑色邊框，圍繞主體的所有側面。

定位和樣式化主頁面標題

現在新增這個

css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

你可能已經注意到正文頂部有一個可怕的間隙。這是因為瀏覽器對 <h1> 元素應用了預設樣式。這可能看起來是個壞主意，但其目的是為未樣式化的頁面提供基本可讀性。為了消除間隙，我們透過設定 margin: 0; 覆蓋了瀏覽器的預設樣式。

接下來，我們將標題的上下內邊距設定為 20 畫素，並將標題文字設定為與 HTML 背景顏色相同的顏色。

最後，text-shadow 為元素的文字內容應用陰影

  • 第一個畫素值設定陰影與文字的 **水平偏移**：它橫向移動的距離。
  • 第二個畫素值設定陰影與文字的 **垂直偏移**：它向下移動的距離。
  • 第三個畫素值設定陰影的 **模糊半徑**。值越大，陰影看起來越模糊。
  • 第四個值設定陰影的基本顏色。

居中影像

最後，插入此規則

css
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

接下來，我們將圖片居中以使其看起來更好。我們可以使用與正文相同的 margin: 0 auto 技巧，但有一些差異，需要額外的設定才能使 CSS 生效。

<body> 元素是一個 **塊級** 元素，這意味著它在頁面上佔用空間，並且可以接受外邊距、內邊距和其他盒子屬性。另一方面，<img>（影像）元素是 **內聯** 元素：預設情況下，它們不像塊級元素那樣接受外邊距值。為了使自動外邊距技巧在此影像上生效，我們必須透過使用 display: block; 賦予它塊級行為。

最後，我們將 max-width 屬性設定為 100%，以確保如果影像大於正文上設定的 width（600 畫素），它將被限制為 600px 並且不會拉伸得更寬。

注意：如果你不完全理解 display: block; 以及塊級元素和內聯元素之間的區別，或者 max-width: 100%;，請不要太擔心。隨著你繼續學習 CSS，它們會更有意義。

總結

如果你遵循了本文中的所有說明，你的頁面應該看起來與此頁面類似

A Mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

你可以在此處檢視我們的版本。如果你遇到困難，可以隨時將你的作品與我們GitHub 上的完成示例程式碼進行比較。

在本文中，我們只觸及了 CSS 的皮毛。你將在本課程稍後的 CSS 樣式基礎 核心模組中學習更多內容。

另見

學習 HTML 和 CSS, Scrimba MDN 學習合作伙伴

Scrimba 的 學習 HTML 和 CSS 課程透過構建和部署五個出色的專案，以及由知識淵博的老師講授的有趣互動課程和挑戰，教你 HTML 和 CSS。

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.