CSS
層疊樣式表(Cascading Style Sheets, CSS)是用來描述 HTML 或 XML(包含 SVG 或 XHTML 等各種 XML 變形)文件外觀的樣式表語言。CSS 會描述文件裡的結構化元素,該如何呈現在螢幕、紙、語音報讀、或其他媒介上。
CSS 是開放網路的核心語言之一,具有標準化的 W3C 規範。歷經不同層級的開發,CSS1 目前已被棄用、CSS2.1 是建議規範,而 CSS3 目前被分作數個較小的模組,持續在標準化的路上行進。
教學
我們的 CSS 學習專區有很多從頭教起的 CSS 模組。你不需要背景知識。
- CSS 介紹
-
此模組讓你理解 CSS 工作原理,包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。
- 文字樣式
-
在這裡我們專注在文字樣式的基礎,包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。
- 樣式化盒子
-
接著,我們關注樣式化盒子,這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型,然後操作盒子的排版,像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色,還有一些酷炫的功能像是陰影、過濾器。
- CSS 排版
-
到了這裡,我們已經看完 CSS 的基礎(樣式化文字、樣式化與操作盒子使你的內容可以合適的展示)。現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識,所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。
參考
CSS 開發工具
- The W3C CSS 驗證服務 能檢查 CSS 的有效性。它是很重要的除錯工具。
- Firefox 開發者工具能透過頁面檢測器與樣式編輯器直接觀察、編輯網頁的 CSS。
- Firefox 的Web Developer 套件 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。
Meta 錯誤
- Firefox: Firefox bug 1323667