本課程會將 CSS 基礎知識拆解成清楚易懂的內容。 在接下來的幾個單元中，您將瞭解 CSS 的核心功能，以及如何在專案中有效運用這些功能。使用「Learn CSS」標誌旁的選單窗格，瀏覽各個模組。
您將學習 CSS 基礎知識，例如方塊模型、層疊和特殊性、彈性方塊、格線和 z 索引。您也會學到函式、顏色類型、漸層、邏輯屬性和繼承，成為全方位的網頁前端開發人員，準備好處理任何使用者介面。
每個單元都提供互動式示範和自我評估，方便您測試所學知識。除了透過閱讀和示範學習，每個主題還附有 Podcast 集數，提供另一種學習方式，持續擴展知識。
本課程適合初學者和進階 CSS 開發人員。您可以從頭到尾瀏覽這個系列，全面瞭解 CSS，也可以將其做為特定樣式主題的參考資料。如果您是網頁開發新手，請參閱「學習 HTML」，瞭解如何編寫標記和連結樣式表。
學習內容：
方塊模型
因為 CSS 顯示的所有內容都是方塊，所以瞭解 CSS 方塊模型 的運作方式是 CSS 的核心基礎。
選取器
如要將 CSS 套用至元素，請先選取該元素。CSS 提供多種方式，您可以在本單元中瞭解這些方式。
巢狀結構
巢狀 CSS 樣式規則可讓樣式表更有條理、更容易閱讀及維護。
層疊
有時，兩個或多個相互競爭的 CSS 規則可能會套用至元素。瞭解瀏覽器如何選擇要使用的憑證，以及如何控管這項選擇。
具體性
本單元將深入探討特殊性，這是層疊樣式表的重要部分。
繼承
如果您未指定部分 CSS 屬性的值，這些屬性就會繼承值。在本單元中，瞭解這項功能如何運作，以及如何善用這項功能。
顏色
在 CSS 中指定顏色的方式有很多種。本單元將探討最常用的顏色值。
尺寸單位
瞭解如何使用 CSS 設定元素大小，並處理網頁的彈性媒介。
版面配置
概略說明建構元件或頁面版面配置時，可選擇的各種版面配置方法。
Flexbox
Flexbox 是一種版面配置機制，專門用於以一維方式排列項目群組。本單元將說明如何使用這項功能。
格線
CSS 格線版面配置提供二維版面配置系統，可控制列和欄中的版面配置。探索格線的各項功能。
邏輯屬性
邏輯、流程相關的屬性和值會連結至文字流程，而非螢幕的實體形狀。瞭解如何運用這項較新的 CSS 方法。
自訂屬性
自訂屬性 (或 CSS 變數) 可讓您整理及重複使用 CSS 中的值，使樣式更具彈性，也更容易理解。
間距
瞭解如何根據使用的版面配置方法和建構的元件，選取最合適的元素間距方法。
虛擬元素
偽元素就像是新增或指定額外元素，但不必新增更多 HTML。這些角色各有不同，您可以在本單元中瞭解。
虛擬類別
您可以透過虛擬類別，根據狀態變更套用 CSS。也就是說，設計可以回應使用者輸入的內容，例如無效的電子郵件地址。
邊框
邊框可為方塊提供框架。瞭解如何使用 CSS 變更框線的大小、樣式和顏色。
陰影
在 CSS 中，您可以透過多種方式為文字和元素新增陰影。 瞭解各選項的使用方式，以及這些選項的設計用途。
對焦
瞭解網頁應用程式中焦點的重要性。您將瞭解如何管理焦點，以及如何確保網頁路徑適用於使用滑鼠和鍵盤瀏覽的使用者。
游標和指標
游標是使用者瞭解互動對象的重要方式。本單元將說明如何在特定情況下設定游標樣式。
Z-index 和堆疊環境
瞭解如何使用 z-index 和堆疊內容，控制元素彼此堆疊的順序。
錨定位置
CSS 錨點定位功能可讓您以宣告方式，將元素定位在另一個元素的相對位置。
彈出式視窗和對話方塊
彈出式視窗是指具有彈出式視窗屬性的任何元素，適用於各種互動模式，包括工具提示、快訊、祝賀訊息等。
函式
CSS 內建多種函式，瞭解部分主要功能和使用方式。
路徑、形狀、剪裁和遮罩
路徑、形狀、剪裁和遮罩功能可讓開發人員透過各種函式，在 CSS 中算繪複雜形狀，為使用者打造令人難忘的體驗。
漸層
在本單元中，您將瞭解如何使用 CSS 提供的各種漸層。漸層可建立各種實用效果，不必使用繪圖應用程式建立圖片。
動畫
動畫是醒目顯示互動元素的好方法，還能為設計增添趣味。瞭解如何使用 CSS 新增及控制動畫效果。
篩選器
CSS 濾鏡可讓您套用效果，這些效果可能只在圖像應用程式中才能使用。在本單元中，您可以瞭解可用的內容。
混合模式
混合兩個以上的圖層來建立合成效果，並在本單元的混合模式中，瞭解如何分離白色背景中的圖片。
清單
從結構上來說，清單是由填入清單項目的清單容器元素組成。在本單元中，您將瞭解如何為清單的所有部分設定樣式。
計數器
CSS 提供多種方式，可控制清單中的計數器，適用於不同用途。本單元將說明如何控制清單中的計數器。
轉換
瞭解如何定義元素狀態之間的轉換。使用轉場效果，為使用者互動提供視覺回饋，提升使用者體驗。
查看 SPA 的檢視畫面轉場效果
您可以透過檢視區塊轉換，在 SPA 的網頁之間顯示連續性或脈絡。
溢位
溢位是指處理不符合設定父項大小的內容。 在本單元中，您將跳脫框架思考，瞭解如何為溢出的內容設定樣式。
背景
瞭解如何使用 CSS 設定方塊的背景樣式。
文字和字體排版
瞭解如何設定網頁上的文字樣式。
容器查詢
與媒體查詢不同，容器查詢可根據元素祖先或容器的大小和狀態，對元素進行更具體的調整。
結論與後續步驟
其他資源可協助您採取後續行動。
準備好學習 CSS 了嗎？立即開始。