層疊樣式表(Cascading Style Sheets, CSS)是用來描述 HTMLXML(包含 SVGXHTML 等各種 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 開發工具

Meta 錯誤

參見

Join the Web layout community

Choose your preferred method for joining the discussion:

文件標籤與貢獻者

最近更新: jackblackevo,