層疊樣式表 — or CSS — 是學習完 HTML 之後,您應該要學習的第二項技能。HTML 是用於定義內容的架構與語意,CSS 則是賦予其樣式並呈現出來。舉例來說,您可以運用 CSS 來改變字體、顏色、字型大小、內容間距、使它切分成多個欄位、加上動畫和其他裝飾性的樣式。

學習路徑

在撰寫 CSS 之前,您應該先了解基本的HTML知識。我們建議先學習HTML 介紹  — 這個模組主要介紹以下內容:

  • CSS, 從 CSS 模組介紹開始
  • 更進階 HTML 模組
  • JavaScript, 如何使用它在網頁加上動態功能

在您了解最基礎的 HTML 運作思維後,我們推薦您同時學習 HTML 與 CSS,使兩者之間互相搭配。因為 HTML 搭配上 CSS 會變得無比有趣,兩者是密不可分的,您無法在不理解 HTML 的情況下獨立學習 CSS。

在開始這個主題之前,您應該要有使用電腦的基礎概念並被動地使用網頁(例如: 單純地瀏覽,吸收內容)。您應該要有基本的環境設定如同安裝基本軟體所敘述的細項,並理解如何建立與管理檔案,如同處理檔案提到的內容 — 這兩者都是完成初學者模組初學Web的一部分。

建議您在開始實作前先閱讀初學Web,但並不完全強迫,大部分包含在 CSS 概念的文章的內容也概括在認識CSS的模組中了,雖然多了更多更清楚的細項。

模組

這個主題概括了以下模組,根據建議的學習順序列出。強烈建議您從第一項開始:

CSS 介紹
這個模組帶您了解 CSS 最基礎的運作流程,包刮選擇器 (selectors) 和屬性 (properties)、CSS的撰寫規則、套用CSS到HTML上、如何透過CSS賦予其長度、顏色和各種單位、層疊和繼承、盒模型的概念和CSS的bug解決方式。
文字樣式 Styling text
這邊您可以了解基礎文字樣式,包括設定字體、字型粗度、斜體、行距與字距、陰影與其它的文字效果。我們套用客製的文字到您的頁面,並給予清單與連結樣式,使這個模組簡單化。
盒樣式 Styling boxes
接下來,來看看盒樣式,在渲染出網頁的基本步驟之一。在這個單元中,我們回顧盒模型並控制渲染項目如 間距(padding)、邊框 (borders )和邊緣(margins)、設定專屬的背景顏色、圖片和其他樣式,和一些新潮的應用,例如陰影效果和濾鏡效果。
CSS排版 layout
到目前為止,我們討論過CSS的基礎概念,如何給予文字樣式,如何操作讓你網頁中的元素得到樣式。現在就要來看看如何把盒模型放在正確的位置,我們已經提及了必須預先具備的樣式,所以現在就能更深入學習CSS排版、了解不同裝置的設定、傳統排版方法包含:浮動、定位和最新潮的排版工具如flexbox。
響應式設計 Responsive design (TBD)
由於現今擁有各種不同的裝置能夠瀏覽網頁,響應式設計變成一項重要的網頁開發技能。這個模組概括了RWD的基本原理與工具,解釋如何根據不同裝置套用不同的樣式,例如螢幕寬度、解析度和探究在不同裝置上如何瀏覽影片與圖片的技術。

解決 CSS 常見問題

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.

參見

CSS on MDN
The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.

文件標籤與貢獻者

此頁面的貢獻者: anniesnoopymd, PtCt, jackblackevo
最近更新: anniesnoopymd,