學習使用 CSS 樣式化 HTML

在嘗試任何 CSS 之前，你應該學習 HTML 的基礎知識。我們建議你首先完成我們的 HTML 簡介 模組。

一旦你理解了 HTML 的基本原理，我們建議你同時學習更多的 HTML 和 CSS，在兩個主題之間來回切換。這是因為當你應用 CSS 時，HTML 會變得更加有趣和好玩，而且你不可能在不知道 HTML 的情況下學習 CSS。

在開始本主題之前，你還應該熟悉使用計算機和被動地使用 Web（即只檢視它，消費內容）。你應該設定一個基本的工作環境，如 安裝基本軟體 中所述，並瞭解如何建立和管理檔案，如 處理檔案 中所述 — 這兩部分都是我們 Web 入門 完整的新手模組的一部分。

在繼續本主題之前，還建議你完成 Web 入門，尤其是在你完全不熟悉 Web 開發的情況下。但是，其 CSS 基礎 文章中涵蓋的大部分內容也在我們的 CSS 初步 模組中有所涵蓋，儘管內容更加詳細。

本主題包含以下模組，建議按照順序學習。你應該從第一個開始。

CSS 初步

CSS（層疊樣式表）用於樣式化和佈局網頁 — 例如，更改內容的字型、顏色、大小和間距，將其分成多列，或新增動畫和其他裝飾性功能。本模組為你通往 CSS 掌握之路提供了輕鬆的開始，包括其工作原理、語法以及如何開始使用它為 HTML 新增樣式的基礎知識。

CSS 構建塊

本模組承接 CSS 初步，你現在已經熟悉了該語言及其語法，並獲得了一些使用它的基本經驗，現在是時候深入探討了。本模組介紹了級聯和繼承、所有可用的選擇器型別、單位、大小調整、樣式化背景和邊框、除錯等等。

目的是為你提供編寫合格 CSS 的工具包，並幫助你理解所有基本理論，然後再轉向更具體的學科，如 文字樣式 和 CSS 佈局。

CSS 樣式化文字

在涵蓋了 CSS 語言的基礎知識之後，接下來你需要關注的 CSS 主題是文字樣式 — 這也是你使用 CSS 最常見的事情之一。在這裡，我們介紹了文字樣式的基礎知識，包括設定字型、粗體、斜體、行距和字距、陰影和其他文字功能。最後，我們介紹瞭如何將自定義字型應用於頁面，以及樣式化列表和連結。

CSS 佈局

到目前為止，我們已經學習了 CSS 的基礎知識、如何設定文字樣式以及如何設定和操作內容所在的盒子。現在是時候學習如何根據視口和其他盒子來放置這些盒子了。我們已經學習了必要的先決條件，因此現在可以深入研究 CSS 佈局，瞭解不同的顯示設定、Flexbox、CSS Grid 和定位等現代佈局工具，以及您可能仍然需要了解的一些傳統技術。

使用 CSS 解決常見問題 提供了指向內容部分的連結，這些內容解釋瞭如何在建立網頁時使用 CSS 解決非常常見的問題。

從一開始，您主要會將顏色應用於 HTML 元素及其背景；更改元素的大小、形狀和位置；以及在元素上新增和定義邊框。但是，一旦您對 CSS 的基礎知識有了紮實的瞭解，就沒有什麼事情是您做不到的。學習 CSS 最好的方面之一是，一旦您掌握了基礎知識，通常您就能很好地瞭解哪些事情可以做，哪些事情不能做，即使您還不知道如何做！

CSS 的工作方式與您遇到的大多數程式語言和設計工具略有不同。它為什麼以這種方式工作？在下面的影片中，Miriam Suzanne 提供了一個關於 CSS 工作原理以及它如何演變的有用解釋。

MDN 上的 CSS

MDN 上 CSS 文件的主要入口點，您可以在其中找到 CSS 語言所有功能的詳細參考文件。想知道某個屬性可以取哪些值？這是一個不錯的去處。