層疊樣式表(Cascading Style Sheets, CSS)是用來描述 HTML 或 XML(包含 SVG 或 XHTML 等各種 XML 變形)文件外觀的樣式表語言。CSS 會描述文件裡的結構化元素,該如何呈現在螢幕、紙、語音報讀、或其他媒介上。
CSS 是開放網路的核心語言之一,具有標準化的 W3C 規範。歷經不同層級的開發,CSS1 目前已被棄用、CSS2.1 是建議規範,而 CSS3 目前被分作數個較小的模組,持續在標準化的路上行進。
- CSS 介紹
若你剛接觸網路開發,請確定讀過我們的 CSS 基礎以了解何謂 CSS 並知道要怎麼用。
- CSS 教學
我們的 CSS 學習專區包含所有必要的基礎資訊,能讓你從完全新手開始,帶向熟悉 CSS。
- CSS 參考
這是給經驗豐富的網頁開發者的完整參考資訊,說明 CSS 的每一個屬性與概念。
教學
我們的 CSS 學習專區有很多從頭教起的 CSS 模組。你不需要背景知識。
- CSS 介紹
- 此模組讓你理解 CSS 工作原理,包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。
- 樣式化文字
- 在這裡我們專注在樣式化文字的基礎,包含設定字體、粗細、斜體、行距、字距、陰影等等文字特色。最後以應用自訂字體、樣式化列表、樣式化連結結束。
- 樣式化盒子
- 接著,我們關注樣式化盒子,這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型,然後操作盒子的排版,像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色,還有一些酷炫的功能像是陰影、過濾器。
- CSS 排版
- 到了這裡,我們已經看完 CSS 的基礎(樣式化文字、樣式化與操作盒子使你的內容可以合適的展示)。現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識,所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如 flexbox。
參考
- CSS 參考: 一個詳細的參考資料,為資深網頁開發人員設計,包含 CSS 各種屬性和觀念。
- CSS 關鍵思維:
CSS 開發工具
- The W3C CSS 驗證服務 能檢查 CSS 的有效性。OnlineWebCheck.com 也在做相同的事情。它們都是很重要的除錯工具。
- Firefox 開發者工具能透過頁面檢測器與樣式編輯器直接觀察、編輯網頁的 CSS。
- Firefox 的Firebug 套件,navigator 裡面,能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用,而這套件還能做得更多。
- Firefox 的Web Developer 套件 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。
- 其他 CSS 工具。
Meta 錯誤
- Firefox: bug 1323667
參見
- CSS demos 最新的 CSS 技術動向:給予創意的一拔。
- 常與 CSS 相關聯的語言:HTML、SVG、XHTML、XML。
- 廣泛運用 CSS 的 Mozilla 科技:XUL、Firefox 及 Thunderbird 的套件與佈景
Join the Web layout community
- Stack Overflow: CSS topics
- CSS-Discuss: CSS-Discuss mailing list
文件標籤與貢獻者
標籤:
此頁面的貢獻者:
jackblackevo,
iigmir,
flyinglimao,
thomasaria,
irvinfly,
teoli,
ethertank,
sailplaneTW,
Mgjbot,
BobChao
最近更新:
jackblackevo,