歡迎使用學習 CSS!

本課程將說明 CSS 的基本知識,內容明確易懂。 在接下來的幾個單元中,您將瞭解 CSS 核心功能的運作方式,以及如何在專案中有效運用這些元素。使用「Learn CSS」標誌旁的選單窗格即可瀏覽模組。

您會學到 CSS 的基礎知識,例如方塊模型、階層式和特性、Flexbox、格線和 Z-index。您也會瞭解函式、顏色類型、漸層、邏輯屬性和繼承機制,打造出完善的前端開發人員,並用於任何使用者介面。

每個單元都包含互動式示範和自我評量,可用於測試您的學習成果。除了透過閱讀和示範學習,還有一個 Podcast 劇集,伴隨每個主題一起學習,並繼續累積知識。

本課程適合初學者和進階的 CSS 開發人員。您可以從頭開始瀏覽本系列文章,從上到下大致瞭解 CSS,也可以做為特定樣式主題的參考資料。至於網頁開發新手,請參閱「瞭解 HTML」一文,瞭解如何撰寫標記及連結樣式表。

課程內容如下:

Box 型號

CSS 供應商的所有顯示內容都是一個方塊,因此瞭解 CSS Box Model 的運作方式是 CSS 的核心基礎。

選取器

如要將 CSS 套用至元素,您必須選取該元素。CSS 提供多種執行此操作的方式,您可以在本單元中瞭解這些方法。

瀑布

有時同一個元素可套用兩個以上的競爭 CSS 規則。瞭解瀏覽器如何選擇要使用的選項,以及如何控管這項選擇。

優先權

本單元將深入探討詳細性,這是架構的重要部分。

繼承

如果沒有為 CSS 屬性指定值,系統會繼承這些屬性。請透過本單元瞭解運作方式及使用方式。

顏色

在 CSS 中指定顏色的方法有幾種。本單元會檢查最常用的顏色值。

尺寸單位

瞭解如何使用 CSS 調整元素大小,在網頁靈活運用媒介中有效。

版面配置

概略介紹建構元件或網頁版面配置時,可以選用的各種版面配置方法。

Flexbox

Flexbox 是一種版面配置機制,專門用來為單一尺寸項目安排版面配置。歡迎前往本單元瞭解如何使用。

格線

CSS 格線版面配置提供二維的版面配置系統,可控制列和欄中的版面配置。探索格局提供的豐富功能

邏輯屬性

邏輯、流程相關屬性和值會與文字流連結,而非螢幕的實體形狀。瞭解如何利用這種新的 CSS 做法。

間距

瞭解如何針對您使用的版面配置方法和要建構的元件,選取最佳間距元素方法。

虛擬元素

虛擬元素就像在不新增其他 HTML 的情況下,新增或指定額外元素。這些角色具備多種角色,您可以在本單元中瞭解這些角色。

虛擬類別

虛擬類別可讓您根據狀態變更套用 CSS。也就是說,您的設計可以回應使用者輸入內容,例如電子郵件地址無效。

邊界

邊框為邊框。瞭解如何使用 CSS 變更框線的大小、樣式和顏色。

陰影

在 CSS 中,你可以透過多種方式為文字和元素加上陰影。瞭解每個選項的使用方式,以及各自的任務。

對焦

瞭解焦點在網頁應用程式的重要性。您會學到如何管理焦點,以及如何確保網頁的路徑對使用滑鼠和鍵盤的使用者都有效。

Z 索引和堆疊結構定義

瞭解如何使用 Z-index 和堆疊結構定義,控制元素層互相重疊的順序。

函式

CSS 提供一系列內建函式,瞭解部分重要函式及使用方式。

漸層

在本單元中,您將瞭解如何使用 CSS 中各種類型的漸層功能。漸層可以產生一整套有用的效果,無需圖像應用程式建立圖片。

動畫

動畫是突顯互動元素的絕佳方式,還能為您的設計增添興趣和樂趣。瞭解如何透過 CSS 新增及控制動畫效果。

篩選器

CSS 中的篩選器可讓您套用自己只在圖形應用程式中可能存在的特效。在本單元中,您可以瞭解有哪些可用的功能。

混合模式

混合兩個以上圖層來建立組合效果,並瞭解如何在混合模式下以白色背景隔離圖片。

清單

清單結構上由已填滿清單項目的清單容器元素組成。在本單元中,您將學習如何設定清單所有部分的樣式。

轉場

瞭解如何定義元素狀態之間的轉換。利用轉場效果針對使用者互動提供視覺回饋,藉此改善使用者體驗。

溢位

溢位是指如何處理不符合上層設定大小的內容。在本單元中,您將思考如何跳脫傳統框架,並學習如何設定溢位內容的樣式。

背景

瞭解如何使用 CSS 設定方塊的背景樣式。

文字和字體排版

瞭解如何設定網路上的文字樣式。

結論和後續步驟

參考其他資源,瞭解如何執行後續步驟。

準備好學習 CSS 了嗎?開始使用