3. CSS 基礎

學習成果

• CSS 的目的 — 為網頁提供樣式、佈局以及其他視覺增強（例如動畫）。

• 關鍵 CSS 語法

  • 規則。

  • 選擇器。

  • 宣告。

  • 屬性（包括自定義屬性）。

  • 值（包括簡寫值）。

  • At 規則和描述符。

• 預設瀏覽器樣式 — 理解瀏覽器會為 HTML 元素提供預設的 CSS 樣式，以便即使沒有任何使用者定義的樣式，網頁也能夠在某種程度上可用。

  • 因此，也要理解 HTML 與樣式無關。

  • 利用這一點來強化分離語義和結構（語義化 HTML）與表現（CSS）的概念，並且不使用表現性的標記。

  • 研究 CSS Reset，首先是為了證明瀏覽器樣式存在並展示頁面在移除它們後看起來是什麼樣子，同時也是為了作為一種為開發者構建樣式提供空白畫布的技術。

• 將 CSS 應用到 HTML 文件 — 行內樣式、內部樣式表、外部樣式表

  • 為什麼外部樣式表通常是最佳選擇。

資源

• 什麼是 CSS？

• CSS 入門

• CSS 的結構

• CSS 如何工作

學習成果

• 基本選擇器 — 元素型別、類、ID

  • ID 在一個文件中是唯一的 — 您應該使用 ID 來選擇一個特定的元素。

  • 每個元素可以有多個類，這些類可用於根據需要疊加樣式。

  • ID 和類應該在它們有意義地用於選擇時謹慎使用，但您不應該將它們用於所有內容 — 儘量保持您的 HTML 乾淨整潔。

• 選擇器列表。

• 屬性選擇器。

• 組合符。

• 偽類和偽元素。

資源

• CSS 選擇器

• CSS 類，Scrimba 課程合作伙伴

• CSS 選擇器 – 初學者類、名稱、子選擇器列表速查表，freeCodeCamp (2022)

學習成果

• 塊級元素和內聯元素。

• 構成元素的各種盒子以及如何設定它們的樣式

  • width（寬度）和 height（高度）。

  • margin.

  • border.

  • padding.

• 透過 box-sizing: border-box 訪問的替代盒子模型，以及為什麼它比標準盒子模型更容易理解（以及它與之的區別）。

• 外邊距摺疊。

• 基本顯示值以及它們如何影響盒子行為 — block（塊）、inline（內聯）、inline-block（內聯塊）和 none（無）。

資源

• 盒模型

• 盒子模型，web.dev (2019)

學習成果

• 理解規則在 CSS 中如何衝突。

• 繼承。

• 層疊。

• 決定 CSS 衝突結果的概念

  • 特異性。

  • 源順序。

  • 重要性。

資源

• 層疊、特異性和繼承

學習成果

• 理解屬性值可以有許多不同型別，以及這些型別代表什麼

  • 數字、長度和百分比。

  • Em 和 rem。

  • 顏色。

  • 影像。

  • 位置。

  • 字串和識別符號。

  • 函式。

• 理解絕對單位和相對單位是什麼，以及它們之間的區別。

資源

• CSS 值和單位

學習成果

• 固有尺寸。

• 設定絕對和百分比尺寸。

• min-/max-width（最小/最大寬度）和 min-/max-height（最小/最大高度）。

• 視口單位。

資源

• CSS 中的尺寸調整元素

• 處理不同的文字方向 > 邏輯屬性

學習成果

• 基本背景樣式 — 顏色和影像。

• 背景影像大小、重複、位置和附件。

• 背景漸變

  • 背景漸變是什麼的總體概念。

  • 線性漸變。

  • （徑向、錐形和重複漸變更高階，在此階段不需要深入研究。）

• 背景的可訪問性考慮 — 確保良好的對比度。

• 邊框基礎 — border-width（邊框寬度）、border-style（邊框樣式）、border-color（邊框顏色）以及邊框簡寫（例如 border-top（上邊框）和 border（邊框））。

• border-radius（邊框圓角）用於圓角。

資源

• 邊框和邊框圓角，Scrimba 課程合作伙伴

• 背景和邊框

學習成果

• 理解溢位是什麼。

• 使用 overflow（溢位）屬性控制溢位。

資源

• 溢位內容

學習成果

• 對易於設定樣式的表單元素進行基本樣式設定，例如 <input type="text">。

• 使用 CSS Reset 來克服 <input> 元素的字型樣式繼承和盒子模型預設差異。

• 理解並非所有表單元素都易於設定樣式，以及為什麼

  • 系統樣式應用於某些表單元素，導致跨瀏覽器樣式一致性困難。

  • 更復雜的表單元素具有定義其內部工作結構的內部（影子 DOM）元素。這些元素通常無法單獨訪問和設定樣式。

• 使用 appearance: none 來規避 search、checkbox 和 radio 等 <input> 型別的系統樣式。

• 減輕 datetime-local、color 等難以設定樣式的型別的問題。

注意:

遵循此課程模組並不要求對所有可能的表單樣式問題都有可靠、確切的答案。有些表單元素難以設定樣式，正如資源所示。但是，您至少應該能夠處理各種表單樣式需求，並理解一些更困難的樣式問題。

資源

• 圖片、媒體和表單元素

• 為網頁表單新增樣式

• 高階表單樣式

學習成果

• 使用 HTML 驗證器來檢視您的頁面上是否有無效標記 — 這可能導致您的 CSS 未按預期應用。

• 使用 CSS 驗證器來檢查格式錯誤的 CSS 程式碼。缺少分號可能會導致一整段 CSS 宣告無法應用。

• 使用瀏覽器開發者工具檢查應用於頁面上 HTML 元素的 CSS。

• 修改應用的 CSS 以確定需要進行哪些更改才能達到您想要的效果。這包括啟用和停用宣告、修改值以及新增新宣告。

• 使用佈局檢查工具來檢查盒子模型、網格、Flexbox 以及其他佈局功能（另請參閱 CSS 佈局）。

• 使用響應式設計模式工具來檢查響應式佈局（另請參閱 5.5 響應式設計細節）。

資源

• 除錯 CSS

• 處理常見的 HTML 和 CSS 問題

• Firefox > 檢查和編輯 CSS，Firefox Source Docs

• Firefox > 響應式設計模式，Firefox Source Docs

• Chrome > 檢視和更改 CSS，developer.chrome.com)