CSS 樣式基礎

預備知識

在開始本模組之前，您應該已經設定好基本的工作環境（詳見安裝基本軟體），並瞭解如何建立和管理檔案（詳見處理檔案）。您還應該熟悉 HTML（如果不熟悉，請學習我們的使用 HTML 結構化內容模組）。

教程與挑戰

什麼是 CSS？

CSS 允許您建立美觀的網頁，但它在底層是如何工作的呢？本文將解釋什麼是 CSS，基本語法是什麼樣的，以及您的瀏覽器如何將 CSS 應用到 HTML 以進行樣式設定。

CSS 入門

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

樣式化個人簡介頁面 ^挑戰

在此挑戰中，您將樣式化一個簡單的個人簡介頁面，測試您在過去幾課中學習到的一些技能，包括編寫選擇器、設定背景顏色和文字樣式。我們還將邀請您查閱一些我們尚未涵蓋的基本 CSS 功能，以測試您的研究能力。

基本 CSS 選擇器

在本文中，我們將回顧一些選擇器基礎知識，包括基本的型別、類和 ID 選擇器。

屬性選擇器

正如您從 HTML 學習中瞭解到的，元素可以具有屬性，這些屬性提供有關正在標記的元素的更多詳細資訊。在 CSS 中，您可以使用屬性選擇器來定位具有特定屬性的元素。本課程將向您展示如何使用這些非常有用的選擇器。

偽類和偽元素

我們將要了解的下一組選擇器被稱為偽類和偽元素。它們的數量很多，而且通常服務於非常特定的目的。一旦您知道如何使用它們，您就可以瀏覽不同的型別，看看是否有適合您正在嘗試完成的任務的東西。

組合器

我們將要了解的最後選擇器稱為組合器。組合器用於以一種方式組合其他選擇器，使我們能夠根據元素在 DOM 中相對於其他元素的位置（例如，子元素或兄弟元素）來選擇元素。

盒模型

CSS 中的所有內容周圍都有一個框，理解這些框是使用 CSS 建立更復雜佈局或將專案與其他專案對齊的關鍵。在本課程中，我們將瞭解 CSS 盒模型。您將瞭解它的工作原理以及與之相關的術語。

處理衝突

本課程的目的是加深您對 CSS 最基本概念的理解 — 層疊、特異性和繼承 — 這些概念控制著 CSS 如何應用於 HTML 以及如何解決樣式宣告之間的衝突。

修復部落格頁面樣式 ^挑戰

在此挑戰中，我們為您提供了一個部分樣式化的基本部落格頁面示例。我們需要您解決現有 CSS 的一些問題並新增一些樣式來完成它。在此過程中，我們將測試您對選擇器、盒模型和衝突/層疊的知識。

值和單位

CSS 規則包含宣告，宣告又由屬性和值組成。CSS 中使用的每個屬性都有一個值型別，它描述了它允許擁有哪種型別的值。在本課程中，我們將瞭解一些最常用的值型別、它們是什麼以及它們如何工作。

CSS 中的尺寸調整元素

瞭解設計中不同功能的大小非常重要。在本課程中，我們將總結元素透過 CSS 獲取大小的各種方式，並定義一些有關大小的術語，這些術語將來會對您有所幫助。

背景和邊框

在本課程中，我們將瞭解您可以使用 CSS 背景和邊框做的一些創意事情。從新增漸變、背景影像和圓角，背景和邊框是 CSS 中許多樣式問題的答案。

挑戰：調整和裝飾內容面板 ^挑戰

在此挑戰中，您將獲得一個輕度樣式化的頁面結構，該結構呈現一個內容面板，頂部有一個標題，底部有一個按鈕欄。我們希望您按照說明調整和裝飾它，從而產生一個有趣的佈局。在此過程中，我們將測試您對 CSS 值和單位、大小以及背景和邊框的知識。

溢位內容

溢位是指內容過多而無法容納在元素框內的情況。在本課程中，您將學習如何使用 CSS 管理溢位。

圖片、媒體和表單元素

在本課程中，我們將瞭解 CSS 中某些特殊元素的處理方式。影像、其他媒體和表單元素在您使用 CSS 設定樣式方面的行為與普通盒子略有不同。瞭解哪些可能哪些不可能可以節省一些挫敗感，本課程將強調您需要了解的一些主要事項。

表格樣式

樣式化 HTML 表格並不是世界上最迷人的工作，但有時我們都必須這樣做。本文解釋瞭如何使 HTML 表格看起來美觀，並突出顯示了一些特定的表格樣式技術。

除錯 CSS

本文將指導您如何除錯 CSS 問題，並向您展示所有現代瀏覽器中包含的開發者工具如何幫助您找出問題所在。

檢驗你的技能

您會在教程文章之間找到“測試您的技能”文章，以檢查您是否在繼續之前保留了最重要的資訊。如果您想一起探索所有這些，您可以在測試您的技能：CSS 樣式基礎中找到它們。

附加教程

這些教程不屬於學習路徑，但它們仍然很有趣——您應該將這些視為進階目標，在完成主要的“核心”文章後可選擇學習。

高階樣式效果

本文充當一個技巧盒，介紹了一些有趣的高階樣式功能，例如盒陰影、混合模式和濾鏡。

層疊層

本課程旨在向您介紹層疊層，這是一個更高階的功能，它建立在CSS 層疊和CSS 特異性的基本概念之上。

處理不同的文字方向

近年來，CSS 已經發展，以更好地支援不同的內容方向性，包括從右到左以及從上到下的內容（例如日語）— 這些不同的方向性稱為書寫模式。隨著您學習的深入並開始處理佈局，理解書寫模式將對您非常有幫助，因此我們將在本文中介紹它們。

組織 CSS

當您開始處理大型樣式表和大型專案時，您會發現維護一個巨大的 CSS 檔案可能具有挑戰性。在本文中，我們將簡要介紹一些編寫 CSS 的最佳實踐，使其易於維護，以及您會發現其他人使用的一些解決方案，以幫助提高可維護性。

另見

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

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

編寫您的第一行 CSS！，Scrimba ^{MDN 學習夥伴}

本互動課程提供了對 CSS 語法的有用介紹。

• 概述：核心學習模組
• 下一頁