#00 文章目錄 | 超級簡單寫 CSS (Super Easy CSS)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，以下連結已置換為新站連結。

超級簡單寫 CSS（Super Easy CSS） 是一系列 CSS 與網頁前端相關知識的教學文章，主要寫於 2023 - 2025 年的 iThome 鐵人賽。

本系列文章目標是：

• 學習 CSS 基本知識

• 並且研究 CSS 中酷炫又令人期待新屬性

讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還有提及一些前端基本知識、版本控制、開發經驗、CSS 預處理器 SASS/SCSS 與了解各大 CSS 框架，甚至進一步到 SEO 基本觀念，讓新手對於網頁前端開發有初步且全面的認識。

與其他教學文章不同之處是：這系列文章大部分著重於圖解說明、實務經驗與 DEMO 實作，因為我知道資訊領域許多概念非常抽象，如果能用比喻或圖解，可以讓這些知識更容易理解；而實務經驗與 DEMO 實作才能讓技術落地，讓學習的人清楚自己學習與使用語法的方向。

有幾篇因為寫作的當時生病了，所以內容不夠完整，這個之後會慢慢補齊。
另外，剩下幾篇就要完結了，正在持續更新中。

如果這系列文章對你很有幫助，歡迎你 🧋贊助我杯珍奶 ，對我將會是很大的鼓勵！
還有過去曾經有贊助過我的人，我也統一在這裡，再次跟你們說聲謝謝！🥹

---

鐵人賽連結

• 2023 鐵人賽： 基礎 CSS & 前端開發知識

• 2024 鐵人賽： CSS 顏色、特效等

• 2025 鐵人賽： CSS 滾動相關、新語法補充、SASS/SCSS 預處理器、CSS 框架探討、SEO

---

文章目錄

基礎知識 / 共用觀念

• #01 網頁的基本名詞：UI/UX？切版&切圖？前端&後端？靜態&動態？RWD or Mobile First？

• #02 關於各家瀏覽器，前端必備的小知識：支援度、市佔率、CSS 實驗語法 -webkit-, -moz-... PostCSS Autoprefixer

• #03 人在江湖，版控要有：了解 GIT / GitHub / GitLab / Git Flow

• #04 GIT 實戰練習：GitHub Desktop、GitHub Page 基礎教學

• #05 HTML 基礎語法

• #06 寫一份簡單的 HTML，常用 HTML Tag 總整理

• #06補充 網頁的根、絕對路徑、相對路徑，那些關於路徑的小知識

• #07 CSS 基本語法 & 權重介紹

• #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

• #09 原生的 CSS 變數，基本與進階應用

• #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

• #11 開始寫 CSS 或程式必須知道的 3 個原則：DRY & KISS & YAGNI

• #12 4 個常見的 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

• #71 CSS 偽元素的妙用：「::before」 與「::after」的常見用法

• #72 CSS 偽元素的進階用法：用 ::before 與 ::after 做 RWD 表格 & 客製化樣式的序號清單 (ol, oder list)

• #73 CSS :nth-child 的新寫法：:nth-child of S (N of Selector)

• #74 CSS 也能控制作用域了！@scope 語法

---

版面編排

• #13 CSS 盒子模型 (Box Model)：border-box & content-box

• #14 Reset CSS！用 Reset.css 或 Normalize.css 變回你該有的樣子

• #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

• #16 CSS 數學函式 calc()、max()、min()、clamp()

• #17 CSS block、inline、inline-block：網頁排版的御三家

• #18 CSS Flex：網頁排版的超級寵兒

• #19 CSS Grid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

• #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

• #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

• #22 CSS display: contents：製作 JS Components 時的好東西！

• #23 CSS 邏輯屬性 Logical properties 與 Writing modes

• #79 告別 JS 計算位置！CSS Anchor Positioning 定位的新寫法

---

響應式 RWD

• #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

• #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

• #26 CSS Container Queries 容器查詢：讓 CSS 的計算以容器自身為依據

---

文字

• #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

• #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

• #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

• #75 用 CSS 解決網頁的「標題不平衡」與「孤字不成行」： text-wrap: balance / pretty

• #76 用 CSS 解決文字上下多出來的神秘空間：text-box-trim / text-box-edge

---

顏色

• #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

• #32 CSS currentcolor、accent-color 與混色的 color-mix() 讓規劃色彩系統好方便！

• #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

• #77 實作網頁深色模式及淺色模式必備的 CSS 語法：color-scheme 與 light-dark()

---

多媒體：圖片/影片/音訊處理

• #34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio

• #35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML srcset、CSS image-set() 與 @media resolution

• #36 HTML 用影片當背景，使用 iframe 嵌入 Youtube/ IG/ TikTok/ X (Twitter) 影片

---

繪製漸層與圖形

• #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

• #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

• #39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

• #40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

• #41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

• #42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

• #43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

• #44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow

• #81 CSS 可以寫三角函數？sin()、cos()、tan() 專門處理圓弧、波浪或是特殊角度

---

特效

• #45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

• #46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖片加陰影、調色、毛玻璃、漸進式模糊效果

• #47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

• #48 CSS 噪點漸層 (Grainy Gradients) 的製作方法 (todo)

• #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

• #50 CSS 3D Transform

• #78 CSS + SVG 仿 Apple iOS26 液態玻璃（Liquid Glass）效果 (Safari 不支援)

---

互動 - Transition

• #51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟 (todo hover 巢狀冒泡效果)

• #52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target

• #80 Display: none 也可以做 CSS Transition 動畫了？@starting-style 與 transition-behavior: allow-discrete

---

互動 - Animation

• #53 CSS Animation (todo 逐格動畫 打字動畫 動畫暫停)

• #54 網頁渲染動畫的建議 & will-change 的使用時機

• #55 純 CSS 照片淡入淡出輪播動畫

• #56 純 CSS 跑馬燈動畫，單趟跑、無限跑、要暫停都可以

• #57 CSS @property：變數的再進化！輕易製作純 CSS 漸層動畫、圓餅圖動畫

• #58 CSS offset-path：沿著軌跡行進動畫

---

互動 - click toggle 行為

• #59 客製化 radio、checkbox 樣式，製作開關按鈕 (Switch Button)

• #60 利用 checkbox，做到純 CSS 開關網頁選單、收合側邊欄

• #61 利用 checkbox/ radio 與 CSS grid，做到純 CSS FAQ 開合選單（Collapse 折疊 / Accordion 手風琴效果）

---

互動 - scroll 行為

• #62 使用 CSS overflow 自訂捲動範圍

• #63 CSS 自訂捲軸顏色與樣式：scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*

• #64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作

• #65 CSS 簡易的滑順捲軸滾動動畫 scroll-behavior

• #66 CSS :target / ::target-text —— 在滾動時，強調 hash 連結的目標

• #67 CSS :target 應用：純 CSS 光箱、純 CSS Tab 頁籤

• #68 CSS overscroll-behavior：解決滾動穿透問題 & 阻止手機瀏覽器下拉重整

• #69 CSS scroll snap 做簡單的純 CSS 輪播

• #70 純 CSS 也能做滾動動畫了！animation-timeline 讓東西邊滾邊動

---

Sass/SCSS (CSS 預處理器)

• #82 SASS/SCSS (1) 介紹與簡易環境設定

• #83 SASS/SCSS (2) 變數 Variables / 巢狀寫法 Nesting

• #84 SASS/SCSS (3) 使用檔案管理樣式 Partials / Modules (@use / @import / !default)

• #85 SASS/SCSS (4) Mixins @mixin & @include

• #86 SASS/SCSS (5) Extend

• #87 SASS/SCSS (6) 運算符號（加減乘除）

• #88 SASS/SCSS (7) sass:color 顏色模組——color.adjust 與 color.scale 取代舊的 lighten() 和 darken()

• #89 SASS/SCSS (8) 邏輯 @if, @each, @for 與 @while

• #90 SASS/SCSS (9) 函式 (Function) - 打造你自己的工具箱

• #91 SASS/SCSS (10) 資料結構 List (列表)

• #92 SASS/SCSS (11) 資料結構 Map

• #93 SASS/SCSS (12) 防呆與偵錯 @debug / @warn / @error

---

CSS 框架初探

• #94 原子設計 - 大多數框架所遵循的原則

• #95 Tailwind CSS

• #96 Bootstrap

• #97 其他介紹（shadcn/Ant Design/Materialize CSS/Bulma/Open Props/UnoCSS/Foundation)

---

SEO 與其他實用工具

• #98 SEO 基本概念-1：語意化標籤與注意要點

• #99 SEO 基本概念-2：Open Graph、結構化資料

• #100 AAO：AI 的 SEO

• #101 SEO 工具介紹

• #102 SEO 寫作心法

• #103 省錢自架靜態網站的方法

---

雜記

• 2023 鐵人賽開始：#00 參賽前言 / 文章目錄（本篇）

• 2023 鐵人賽結束：#30 iT 鐵人賽心路歷程 & 我的寫作方法

• 2024 鐵人賽開始：#00 PART 2！參賽前言 / 文章目錄

• 2025 鐵人賽開始：#00 PART 3！參賽前言 / 文章目錄

• #?? 真結局，感言

---

---

2023 年當初寫的參賽前言

本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。

---

這 30 天我想做什麼？

這 30 天我的方向主要是：

• 自我挑戰：研究新穎的 CSS 屬性

  每年都有的 The State of CSS 統計，討論了許多新提出的 CSS 屬性（例如：color-mix()、:has、max()、min()、clamp()、container query 等等），我覺得很有趣，卻未曾實際深究，我想趁此機會加以了解。

• 作為筆記：供自己日後參考
  延續上一點，將這些新學到的東西統整起來。再來是，過去在學習的時候有些容易混淆的部分，我希望也能藉此機會一起釐清。

• 作為紀念：留下些什麼吧！

  工作了多年，我想留下個紀念，統整這些我所學到的知識，並且透過分享，在網路上留下一些痕跡。

• 幫助他人：讓人跨出學習網頁的第一步
  除了統整好基礎前端與 CSS 知識外，並且上述所說未來能變得實用，且目前瀏覽器支援度還不差的新屬性（支援的瀏覽器>=3），一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識，不用再零零散散地去爬文搜尋。

本系列文章會以 CSS 為主，HTML、Git 等網頁開發概念為輔。

---

這個主題適合誰閱讀？

• 主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師，或是想要了解網頁如何運作的 PM 或設計師，都很適合。

  我會介紹基礎的前端知識，因為我發現有時在開發上，PM、設計師或是業主，容易因為不懂前端或網頁上的 Domain Knowledge，造成上工作上的溝通成本或重工，而這往往只是缺乏了幾個簡單的概念。

• 次要則是已經會了，但是想了解 CSS 新屬性的人。

就讓我們開始前端基礎之旅吧！

---

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。