全新更新 CSS語法用法

掌握 CSS
打造絕美網頁

完整繁體中文教學 · 互動式範例 · 即時預覽
從基礎語法到高級動畫，一步一步學習現代 CSS

12+學習章節

50+互動範例

100%免費學習

style.css

預覽

Hello CSS!

這是一個精美的卡片

為什麼選擇我們？

專業設計的學習體驗，讓 CSS 學習更高效有趣

互動式編輯器

即時修改程式碼，立即看到效果。邊學邊練，學習效率倍增。

即時預覽

完整盒模型教學

視覺化圖解盒模型，互動調整 padding、margin、border 值。

視覺化

Flexbox & Grid

透過互動遊樂場掌握現代佈局技術，支援即時調整所有屬性。

互動遊樂場

CSS 動畫特效

豐富的動畫範例，從基礎 transition 到複雜 keyframe 動畫一次學會。

動態效果

CSS 變數與主題

學習現代 CSS 自訂屬性，製作可動態切換主題的設計系統。

設計系統

響應式設計

媒體查詢、Viewport 設定、流動佈局，打造跨裝置完美呈現。

RWD

什麼是 CSS？

CSS（Cascading Style Sheets，階層式樣式表）是用來描述 HTML 元素如何在螢幕、紙張或其他媒體上顯示的語言。

CSS 節省了大量的工作。它可以同時控制多個網頁的佈局。外部樣式表儲存在 CSS 文件中，讓你只需修改一個文件，就能改變整個網站的外觀。

CSS 代表 Cascading Style Sheets（階層式樣式表）

CSS 描述 HTML 元素如何顯示

樣式通常儲存在外部樣式表中

外部樣式表可以節省大量工作

多個樣式定義會「階層式」地合併

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" 
        href="style.css">
</head>
<body>
  <h1>Hello World</h1>
  <p>這是一個段落</p>
</body>
</html>

body {
  background: #1a1a2e;
  color: #eee;
  font-family: sans-serif;
}

h1 {
  color: #00d4ff;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Hello World

這是一個段落

學習路徑

按照順序學習，從零到精通

🔥 熱門章節

最多人學習的精華內容

學習進度

掌握 CSS 打造絕美網頁