25 KiB

Raw Permalink Blame History Unescape Escape

Terrarium Project 第二部分：CSS 入門

journey
    title 你的 CSS 樣式旅程
    section 基礎
      連結 CSS 檔案: 3: Student
      了解級聯: 4: Student
      學習繼承: 4: Student
    section 選擇器
      元素定位: 4: Student
      類別模式: 5: Student
      ID 特異性: 5: Student
    section 版面配置
      定位元素: 4: Student
      建立容器: 5: Student
      製作生態箱: 5: Student
    section 精緻化
      添加視覺效果: 5: Student
      響應式設計: 5: Student
      玻璃反射: 5: Student

筆記作者：Tomomi Imura

還記得你的 HTML 陸地生態箱看起來相當簡單嗎？CSS 正是我們將這個樸素結構轉變成視覺吸引之物的關鍵所在。

如果 HTML 就像是建造房屋骨架，那麼 CSS 則是讓它有家的感覺的所有元素——油漆顏色、家具擺設、燈光，以及各個房間如何流暢連結。試想凡爾賽宮最初是簡單的狩獵小屋，但經由細心的裝飾和布局規劃，變成了世界上最宏偉的建築之一。

今天，我們將把你的陸地生態箱從功能性提升到精緻完美。你將學會如何精準定位元素、讓版面配置響應不同螢幕尺寸，以及創造令網站動人的視覺魅力。

到這堂課的結束，你會發現策略性的 CSS 樣式設定能大幅提升你的專案。讓我們為陸地生態箱加點風格吧。

mindmap
  root((CSS 基礎))
    Cascade
      Specificity Rules
      Inheritance
      Priority Order
      Conflict Resolution
    Selectors
      Element Tags
      Classes (.class)
      IDs (#id)
      Combinators
    Box Model
      Margin
      Border
      Padding
      Content
    Layout
      Positioning
      Display Types
      Flexbox
      Grid
    Visual Effects
      Colors
      Shadows
      Transitions
      Animations
    Responsive Design
      Media Queries
      Flexible Units
      Viewport Meta
      Mobile First

課前測驗

CSS 入門

CSS 常被認為是「讓東西變漂亮」的工具，但它的用途遠更廣泛。CSS 就像電影導演——你不僅控制畫面呈現，也能操控動態效果，反應使用者互動，並適應各種狀況。

現代 CSS 功能強大。你可以寫程式碼自動調整版面配置，適用於手機、平板與桌面電腦。你也能創造流暢動畫，引導使用者目光焦點。當所有元素協同運作時，效果驚人。

💡 專家建議：CSS 持續演化，推出新功能與能力。使用新特性時，務必先上 CanIUse.com 查詢各瀏覽器支援度。

本課目標：

建立陸地生態箱完整視覺設計，採用現代 CSS 技巧
探索關鍵觀念如層疊(cascade)、繼承(inheritance)及 CSS 選擇器
實作響應式定位與布局策略
打造利用 CSS 形狀和樣式的陸地生態箱容器

前置條件

請完成上堂課設計的 HTML 結構，並準備好進行樣式設定。

📺 影片資源：這段詳盡的教學影片值得一看

設定你的 CSS 檔案

開始設定樣式前，須先將 CSS 連結到 HTML。這告訴瀏覽器樣式的來源位置。

在你的陸地生態箱資料夾中，建立新的檔案 style.css，然後在 HTML 文件的 <head> 區段加入連結：

<link rel="stylesheet" href="./style.css" />

這段程式碼說明如下：

建立 HTML 與 CSS 檔案間的連結
告訴瀏覽器載入並套用 style.css 內的樣式
使用 rel="stylesheet" 屬性指明這是 CSS 檔案
透過 href="./style.css" 指定檔案路徑

理解 CSS 層疊機制

你是否好奇為什麼稱為「層疊」樣式表？因為樣式像瀑布一樣連續套用，有時彼此會產生衝突。

就像軍隊命令結構——將軍主令「所有軍隊穿綠制服」，但特定單位命令說「典禮穿藍禮服」，則以較具體指令為準。CSS 也遵循類似原理，理解這種層級結構，讓除錯輕鬆許多。

體驗層疊優先順序

讓我們實際演練層疊，先在 <h1> 標籤加上內嵌樣式：

<h1 style="color: red">My Terrarium</h1>

這段程式碼做了什麼：

直接套用紅色字體在 <h1> 元素，使用內嵌樣式
利用 style 屬性，直接在 HTML 中嵌入 CSS
建立該元素最高優先度的樣式規則

接著，在 style.css 內增加此規則：

h1 {
  color: blue;
}

以上範例讓我們：

定義選取所有 <h1> 元素的 CSS 規則
設定使用外部樣式表將文字顏色設為藍色
優先度低於內嵌樣式的規則

✅ 知識確認：在你的網頁中呈現哪個顏色？該顏色為何勝出？你能想到哪些情況會想要覆寫樣式嗎？

flowchart TD
    A["瀏覽器遇到 h1 元素"] --> B{"檢查內嵌樣式"}
    B -->|找到| C["style='color: red'"] 
    B -->|沒有| D{"檢查 ID 規則"}
    C --> E["套用紅色 (1000 分)"]
    D -->|找到| F["#heading { color: green }"]
    D -->|沒有| G{"檢查類別規則"}
    F --> H["套用綠色 (100 分)"]
    G -->|找到| I[".title { color: blue }"]
    G -->|沒有| J{"檢查元素規則"}
    I --> K["套用藍色 (10 分)"]
    J -->|找到| L["h1 { color: purple }"]
    J -->|沒有| M["使用瀏覽器預設"]
    L --> N["套用紫色 (1 分)"]
    
    style C fill:#ff6b6b
    style F fill:#51cf66
    style I fill:#339af0
    style L fill:#9775fa

💡 CSS 優先順序（由高至低）：

內嵌樣式（style 屬性）

ID 選擇器（#myId）

類別選擇器（.myClass）及屬性選擇器

元素選擇器（h1, div, p）

瀏覽器預設

CSS 繼承實例

CSS 繼承猶如遺傳學——子元素會從父元素繼承某些屬性。若你設定 body 的字型，頁面所有文字會自動使用相同字型。就像哈布斯堡王朝的獨特下巴特徵代代相傳，不需個別設定。

但並非所有屬性都會繼承。像文字字型和顏色會，而邊距、邊框等布局屬性則不會。就如同小孩繼承外形特徵，但不一定繼承父母的穿衣打扮。

觀察字型繼承

試試將字型設定在 <body> 元素上：

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

說明這段過程：

設定整個網頁的字型，選取 <body> 元素
使用字型堆疊，提供備用方案以提升瀏覽器相容性
採用現代系統字體，美觀適配多平台
確保除非明確覆寫，子元素都會繼承這個字型

打開瀏覽器開發者工具（F12），切換到元素檢視，查看你的 <h1> 元素。你會看到它繼承了 body 的字型：

✅ 實驗時間：試著在 <body> 設定其他可繼承屬性，如 color、line-height、text-align。你的標題和其他元素會有什麼變化？

📝 可繼承屬性例：color、font-family、font-size、line-height、text-align、visibility

不可繼承屬性例：margin、padding、border、width、height、position

🔄 學習確認

CSS 基礎理解檢核：開始選擇器前，請確定你能：

✅ 述說層疊與繼承的差異
✅ 預測特殊規則下哪個樣式會生效
✅ 辨識父元素會繼承哪些屬性
✅ 正確將 CSS 檔案連結至 HTML

快速測試：有以下樣式， <div class="special"> 內的 <h1> 會是什麼顏色？

div { color: blue; }
.special { color: green; }
h1 { color: red; }

答案：紅色（元素選擇器直接針對 h1）

精通 CSS 選擇器

CSS 選擇器是你針對特定元素套用樣式的方式。它們像精確指示——不只是說「那棟房子」，而是說「楓樹街上有紅門的藍色房子」。

CSS 提供多種定義精確度的方式，挑對選擇器就如挑對工具。有時候你要統一規劃一整區大門，有時候想特別裝飾某扇獨門。

元素選擇器（標籤）

元素選擇器以標籤名稱選取 HTML 元素，適合制定全頁基礎樣式：

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

理解這些樣式：

採用 body 選擇器設定網頁統一字型樣式
移除瀏覽器預設邊距與內距，方便控制排版
為所有標題元素添加文字色彩、對齊與間距
運用 rem 單位打造可縮放、易讀字體大小

元素選擇器非常適合全面設定，但若要單獨修飾陸地生態箱中的特定植物元件，則需更具體選擇器。

ID 選擇器用於獨特元素

ID 選擇器以 # 開頭，選取帶有指定 id 屬性的元素。因為 ID 必須唯一，很適合為個別特殊元素設定樣式，例如我們的左、右兩個植物容器。

建立陸地生態箱側邊植物容器的樣式：

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

這段程式碼成果說明：

使用 absolute 定位將容器置於左右兩邊邊緣
採用 vh（視窗高度）單位，隨螢幕尺寸響應高度
設定 box-sizing: border-box，確保內距包含於寬度內
精簡將零值的 px 單位去除，讓程式碼更簡潔乾淨
塗上柔和的背景色，比嚴肅的灰色更舒適

✅ 程式碼質量挑戰：注意這份 CSS 違反 DRY（不要重複你自己）原則。你能用一組 ID 結合類別重構它嗎？

改良版方式：

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

類別選擇器用於重複利用樣式

類別選擇器以 . 開頭，適合套用同樣樣式給多個元素。相比 ID，類別可多次使用，方便統一風格。

在陸地生態箱中，所有植物需有類似樣式，但每株植物又要獨立定位。用類別管理共有樣式，ID 則負責個別配置。

植物的 HTML 結構如下：

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/zh-TW/plant1.d18b18ffe73da18f.png" />
</div>

主要組件解析：

統一容器使用 class="plant-holder" 來套用一致樣式
植物圖片使用 class="plant" 管理共通風格與行為
獨特定位用 id="plant1" 等作為唯一識別與 JavaScript 互動
提供輔助閱讀器的描述文字以提升無障礙性

接著將這些樣式加入你的 style.css：

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

解析這些樣式：

設定植物容器為相對定位，建立定位參考框架
調整每個容器高度為 13%，確保所有植物垂直排放不需捲動
稍微將容器左移，讓植物在容器內更靠中間
讓植物圖片可響應縮放，透過 max-width 與 max-height
利用 z-index 將植物層級提高，置於其他陸地元素之上
新增平滑過渡的滑鼠懸停效果，增進互動性

✅ 關鍵思考：為何需要同時用 .plant-holder 和 .plant？如果只用一個會怎樣？

💡 設計模式：容器（.plant-holder）控制排版和定位，內容（.plant）負責外觀和縮放。此分工讓程式碼更易維護及彈性擴充。

認識 CSS 定位

CSS 定位如同舞台導演——你決定每個演員站哪裡、如何移動。有些演員遵循標準陣型，有些因戲劇效果需特殊定位。

掌握定位，許多版面挑戰都迎刃而解。想要滾動時導航列固定？定位幫你辦到。想要在特定位置顯示工具提示？也是定位的功勞。

五種定位值

quadrantChart
    title CSS 定位策略
    x-axis 文件流程 --> 從流程中移除
    y-axis 靜態定位 --> 精確控制
    quadrant-1 絕對定位
    quadrant-2 固定定位
    quadrant-3 靜態定位
    quadrant-4 黏著定位
    
    Static: [0.2, 0.2]
    Relative: [0.3, 0.6]
    Absolute: [0.8, 0.8]
    Fixed: [0.9, 0.7]
    Sticky: [0.5, 0.9]

定位值	行為	使用範例
`static`	預設，忽略 top/left/right/bottom 屬性	正常文件流佈局
`relative`	相對於正常位置定位	小幅調整，建立定位上下文
`absolute`	相對最近定位祖先元素定位	精確放置，覆蓋元素
`fixed`	相對視窗定位	導航列、浮動元素
`sticky`	根據捲動位置在 relative 與 fixed 間切換	捲動時黏著的標頭

我們陸地生態箱的定位策略

我們透過定位組合，打造理想版面配置：

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

定位策略說明：

絕對定位容器脫離正常文檔流，固定於畫面邊緣
相對定位植物容器既在文檔流內又建立定位框架
絕對定位植物可在相對容器中精確擺放
此組合允許植物垂直堆疊且可獨立調整位置

🎯 重要關鍵：植物元素需絕對定位，才能在下一堂課實作拖拉功能。絕對定位把元素從正常佈局中拉出，使拖放交互可行。

✅ 實驗時間：改變定位值並觀察效果：

若將 .container 從 absolute 改成 relative 會怎樣？
如果 .plant-holder 使用 absolute 而非 relative，佈局會如何變化？
當你將 .plant 改成 relative 定位時會發生什麼？

🔄 教學檢測

CSS 定位掌握：暫停確認你的理解：

✅ 你能解釋為什麼植物需要絕對定位才能拖放嗎？
✅ 你了解相對容器如何創建定位上下文嗎？
✅ 為什麼側邊容器使用絕對定位？
✅ 如果完全移除定位聲明會發生什麼？

現實世界連結：想想 CSS 定位如何反映現實佈局：

Static：書架上的書（自然排序）
Relative：稍微移動書但保持位置
Absolute：將書籤放在特定頁碼
Fixed：摺頁時仍保持可見的便利貼

使用 CSS 建構玻璃瓶生態缸

現在我們將使用純 CSS 建立玻璃罐—不需要圖片或繪圖軟體。

透過定位和透明度創造逼真的玻璃、陰影和深度效果，展現 CSS 的視覺能力。這種技術類似包浩斯建築師用簡單幾何形狀打造複雜、美麗結構。理解這些原理後，你將能認出許多網頁設計背後的 CSS 技巧。

flowchart LR
    A[罐子頂部] --> E[完整生態瓶]
    B[罐壁] --> E
    C[土層] --> E
    D[罐底部] --> E
    F[玻璃效果] --> E
    
    A1["寬度50%<br/>高度5%<br/>頂部位置"] --> A
    B1["寬度60%<br/>高度80%<br/>圓角<br/>不透明度0.5"] --> B
    C1["寬度60%<br/>高度5%<br/>深棕色<br/>底層"] --> C
    D1["寬度50%<br/>高度1%<br/>底部位置"] --> D
    F1["細微陰影<br/>透明度<br/>Z軸層次"] --> F
    
    style E fill:#d1e1df,stroke:#3a241d
    style A fill:#e8f5e8
    style B fill:#e8f5e8
    style C fill:#8B4513
    style D fill:#e8f5e8

建立玻璃罐元件

讓我們逐部分構建生態缸玻璃罐。每個部分使用絕對定位和百分比尺寸以達到響應式設計：

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

理解生態缸構造：

使用百分比尺寸以適應各種螢幕大小
絕對定位 元素，以精確堆疊和對齊
套用不同透明度來營造玻璃透明效果
實現 z-index 分層，使植物出現在罐內
添加細緻陰影和圓角，提升真實感

百分比響應設計

注意所有尺寸均使用百分比而非固定像素：

為什麼重要：

確保生態缸在任何螢幕尺寸上都能等比例縮放
維持罐內各元件的視覺關係
提供從手機到大螢幕一貫的使用體驗
讓設計自適應且不破壞畫面佈局

CSS 單位實踐

我們使用 rem 單位設定邊框圓角，與根字體大小成比例。這讓設計更容易被使用者字型偏好接受。欲了解更多CSS 相對單位的官方規範。

✅ 視覺實驗：試著修改這些數值並觀察效果：

將罐身透明度從 0.5 調高至 0.8 — 玻璃呈現如何改變？
將土壤色從 #3a241d 換成 #8B4513 — 視覺效果差異？
將土層 z-index 調整為 2 — 分層效果如何？

🔄 教學檢測

CSS 視覺設計理解：確認你的視覺 CSS 掌握：

✅ 百分比尺寸如何創造響應式設計？
✅ 為何透明度產生玻璃透明效果？
✅ z-index 在元素分層中扮演什麼角色？
✅ 邊框圓角如何塑造罐子形狀？

設計原則：注意我們如何從簡單形狀打造複雜視覺：

矩形 → 圓角矩形 → 玻璃罐元件
平面色彩 → 透明度 → 玻璃效果
單一元素 → 分層組合 → 3D 外觀

GitHub Copilot Agent 挑戰 🚀

使用 Agent 模式完成以下挑戰：

描述： 創造一個 CSS 動畫，使生態缸中的植物輕柔搖擺，模擬自然微風效果。這將幫助你練習 CSS 動畫、轉換與關鍵影格，同時提升生態缸的視覺吸引力。

提示： 為 .plant 類別新增 CSS 關鍵影格動畫，使植物輕輕從左到右搖擺。動畫旋轉角度約 2-3 度，持續時間 3-4 秒，並無限循環，使用緩動函數模擬自然動作。

在此了解 agent mode。

🚀 挑戰：新增玻璃反光

準備好利用真實玻璃反光效果強化生態缸嗎？此技術將為設計增添深度與真實感。

你將製作細膩高光，模擬光線如何在玻璃表面反射。此作法類似文藝復興畫家揚·范艾克運用光與反射使玻璃畫作呈現立體感。目標如下：

你的挑戰：

製作細膩的白色或淺色橢圓形反光
將它們置於 罐子的左側策略性位置
套用適合的透明度與模糊效果以呈現真實光反射
利用 border-radius 造出有機泡泡狀形狀
嘗試漸層或盒陰影效果增加真實感

課後小測驗

擴充你的 CSS 知識

CSS 初學或許感覺複雜，但理解這些核心概念將提供你扎實基礎以進階技巧。

你的下一步 CSS 學習領域：

Flexbox - 簡化元素對齊與分配
CSS Grid - 強大工具製作複雜佈局
CSS 變數 - 減少重複提升維護性
響應式設計 - 確保網站適用不同螢幕尺寸

互動學習資源

透過這些趣味且實際的遊戲練習概念：

🐸 Flexbox Froggy - 透過有趣挑戰精通 Flexbox
🌱 Grid Garden - 透過種胡蘿蔔學習 CSS Grid
🎯 CSS Battle - 以程式挑戰測試你的 CSS 技能

進階學習

欲了解完整 CSS 基礎，請完成微軟學習模組：用 CSS 風格化你的 HTML 應用

⚡ 接下來 5 分鐘你可以做的事

開啟 DevTools，使用 Elements 面板檢查任一網站的 CSS 樣式
製作簡單 CSS 檔案並連結至 HTML 頁面
嘗試以十六進位、RGB 與命名色彩改變顏色
練習盒模型，為 div 加 padding 與 margin

🎯 這一小時你能完成的目標

完成課後小測驗，複習 CSS 基礎
使用字體、顏色與間距為 HTML 頁面加上風格
使用 flexbox 或 grid 製作簡易佈局
嘗試 CSS 過渡打造順暢效果
使用 media query 練習響應式設計

📅 你的一週 CSS 冒險

創意完成生態缸樣式作業
精通 CSS Grid，打造照片畫廊佈局
學習 CSS 動畫，讓設計更生動
探索 Sass 或 Less 預處理器
研究設計原則並融入 CSS
分析並重現網路上有趣的設計

🌟 你的一個月設計大師之路

建置完整響應式網站設計系統
學習 CSS-in-JS 或 Tailwind 這類實用框架
為開源專案貢獻 CSS 優化
掌握 CSS 進階概念如自訂屬性及 containment
創建可重用的模組化元件庫
指導其他 CSS 學習者並分享設計心得

🎯 你的 CSS 精通時間軸

timeline
    title CSS 學習進度
    
    section 基礎 (10 分鐘)
        檔案連結: 連結 CSS 至 HTML
                 : 理解層疊規則
                 : 學習繼承基礎
        
    section 選擇器 (15 分鐘)
        目標元素: 元素選擇器
               : 類別模式
               : ID 特殊性
               : 組合器
        
    section 盒模型 (20 分鐘)
        版面基礎: 外距與內距
               : 邊框屬性
               : 內容尺寸
               : 盒模型行為
        
    section 定位 (25 分鐘)
        元素定位: 靜態與相對
               : 絕對定位
               : Z-index 堆疊
               : 響應單位
        
    section 視覺設計 (30 分鐘)
        樣式精通: 顏色與透明度
               : 陰影與效果
               : 過渡效果
               : 轉換屬性
        
    section 響應式設計 (45 分鐘)
        多裝置支援: 媒體查詢
                  : 彈性版面
                  : 行動優先策略
                  : 視口最佳化
        
    section 進階技巧 (1 週)
        現代 CSS: Flexbox 佈局
                : CSS Grid 系統
                : 自訂屬性
                : 動畫關鍵影格
        
    section 專業技能 (1 個月)
        CSS 架構: 元件模式
                : 可維護程式碼
                : 效能優化
                : 跨瀏覽器相容性

🛠️ 你的 CSS 工具箱總結

完成本課後，你具備：

繼承與覆寫理解：樣式如何繼承與覆寫
選擇器精通：元素、類別與 ID 精準選取
定位技巧：策略性元素放置與分層
視覺設計：製作玻璃效果、陰影與透明度
響應技術：百分比佈局適應各種螢幕
程式碼組織：乾淨且易維護的 CSS 結構
現代實務：使用相對單位與無障礙設計模式

下一步：你的生態缸現在有結構（HTML）與樣式（CSS）。最後一課將增添 JavaScript 互動功能！

作業

CSS 重構

免責聲明：
本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原文文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或曲解負責。

25 KiB Raw Permalink Blame History Unescape Escape

Terrarium Project 第二部分：CSS 入門

課前測驗

CSS 入門

前置條件

設定你的 CSS 檔案

理解 CSS 層疊機制

體驗層疊優先順序

CSS 繼承實例

觀察字型繼承

🔄 學習確認

精通 CSS 選擇器

元素選擇器（標籤）

ID 選擇器用於獨特元素

類別選擇器用於重複利用樣式

認識 CSS 定位

五種定位值

我們陸地生態箱的定位策略

🔄 教學檢測

使用 CSS 建構玻璃瓶生態缸

建立玻璃罐元件

百分比響應設計

CSS 單位實踐

🔄 教學檢測

GitHub Copilot Agent 挑戰 🚀

🚀 挑戰：新增玻璃反光

課後小測驗

擴充你的 CSS 知識

互動學習資源

進階學習

⚡ 接下來 5 分鐘你可以做的事

🎯 這一小時你能完成的目標

📅 你的一週 CSS 冒險

🌟 你的一個月設計大師之路

🎯 你的 CSS 精通時間軸

🛠️ 你的 CSS 工具箱總結

作業

25 KiB

Raw Permalink Blame History Unescape Escape