智慧生活科技專業社群｜大一新生網頁設計入門

從《勤勞小蜜蜂》部落格文章學 CSS：把內容變成清楚、好讀又能適應手機的網頁

不用先背完所有語法。從一篇真實文章拆解顏色、卡片、格線與響應式設計，理解 CSS 如何把 HTML 的內容組織成完整的視覺介面。

你可能已經知道 HTML 負責標題、段落、圖片與連結，卻不確定 CSS 到底做了什麼。簡單地說，HTML 像是文章的骨架，CSS 則決定骨架穿什麼衣服：字有多大、內容有多寬、卡片如何排列，以及手機畫面太窄時要怎麼調整。

本文以《勤勞小蜜蜂：爸爸教我的四種力量》部落格文章為例。那篇文章同時包含活動資訊、故事卡片、教學重點與 SDGs 說明，很適合觀察 CSS 如何處理一篇內容較長、元件較多的文章。

讀完本文，你將能夠：

看懂選擇器、屬性和值的基本結構。
使用 CSS 變數管理整篇文章的色彩。
利用盒模型、Grid 與偽元素製作卡片和編號。
用媒體查詢讓同一份內容適應電腦與手機。
把樣式限制在文章內，降低與部落格主題互相干擾的機會。

一、先看懂 CSS 的一句話

一條 CSS 規則通常由「選擇器」和一組宣告組成。選擇器回答「要改誰」，屬性回答「要改什麼」，值則回答「要改成什麼」。

基本語法

.css-lead {
  color: #0f4c81;
  font-size: 19px;
  font-weight: 600;
}

.css-lead 是類別選擇器，會找出所有寫著 class="css-lead" 的 HTML 元素。大括號裡的三行宣告，分別設定文字顏色、大小和粗細。每一行最後的分號很重要，漏掉時可能讓後面的宣告無法正確解析。

初學技巧：先從「改一個值、重新整理、觀察結果」開始。一次只改一項，比同時改十項更容易建立屬性與畫面之間的連結。

二、先限制作用範圍，避免改壞整個網站

在部落格文章中直接寫 h1 { color: orange; }，可能讓網站裡所有一級標題都變成橘色，包括導覽列或其他文章。範例文章先用一個外層類別包住全文，再把規則寫成 .slt-post h1，意思是「只選取這篇文章裡的 h1」。

將樣式限定在文章內

/* HTML：先替全文加一個專屬容器 */
<article class="slt-post">...</article>

/* CSS：只有容器裡的 h1 會套用 */
.slt-post h1 {
  color: #dc5a12;
}

這種寫法稱為「設定樣式作用域」。它不是特殊語法，而是善用後代選擇器建立邊界。多人共同維護網站時，清楚的作用域能減少樣式衝突。

三、用 CSS 變數建立一致的配色系統

原文章反覆使用深藍、橘色、綠色與米白色。若每個地方都直接輸入色碼，日後換色會非常辛苦。CSS 自訂屬性可以先替顏色命名，再透過 var() 取用。

變數的宣告與使用

.slt-post {
  --slt-navy: #0f4c81;
  --slt-orange: #dc5a12;
  --slt-cream: #fff8e9;
}

.slt-post h2 {
  color: var(--slt-navy);
  border-left: 7px solid var(--slt-orange);
}

變數名稱可以表達用途，比單純記住 #0f4c81 更容易閱讀。若要把文章主色改成紫色，只需修改變數宣告，不必逐行搜尋整份 CSS。

命名顏色--slt-orange 表示品牌橘色，適合已確定的視覺識別。

命名用途--color-accent 表示強調色，日後更換品牌時較有彈性。

四、理解盒模型：空間感來自四個層次

瀏覽器會把多數元素視為一個矩形盒子。由內而外可以想成：內容（content）、內距（padding）、邊框（border）與外距（margin）。範例文章的標題區之所以像一張完整卡片，就是這幾個屬性共同作用的結果。

卡片樣式

.slt-hero {
  background: linear-gradient(135deg, #fff7df, #eaf7ff);
  border: 2px solid #f2cf7b;
  border-radius: 22px;
  margin-bottom: 28px;
  padding: 34px 38px;
}

這是一張具有背景、邊框、圓角與內距的示範卡片。

padding: 34px 38px 代表上下內距為 34px、左右內距為 38px。適當的內距能讓文字不貼著邊框；外距則用來拉開卡片和下一段內容。

為什麼要使用 box-sizing？

比較容易預測的尺寸計算

.slt-post * {
  box-sizing: border-box;
}

預設情況下，元素的寬度不包含 padding 和 border，容易出現「設定 100% 卻超出容器」的問題。改用 border-box 後，指定寬度會把內距與邊框一起算進去，版面較容易控制。

五、用 Grid 排出會自動調整的資訊卡

活動日期、時間、地點與對象在電腦上適合排成兩欄。CSS Grid 能把容器切成規則欄位，gap 則負責卡片之間的間隔。

兩欄卡片格線

.slt-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

repeat(2, ...) 代表建立兩欄；1fr 表示平均分配剩餘空間；minmax(0, 1fr) 可降低長文字把欄位撐破的機會。這是實務上很常用的安全寫法。

六、用偽元素建立自動編號

四種力量卡片左側的圓形數字不必逐一寫進 HTML。CSS 計數器與 ::before 偽元素可以在每個清單項目前自動產生編號。

CSS 自動編號

.power-list {
  counter-reset: power;
  list-style: none;
}

.power-list li::before {
  content: counter(power);
  counter-increment: power;
  border-radius: 50%;
}

::before 會建立一個位於元素內容之前的裝飾性區塊。這種做法適合視覺編號；但若數字本身具有重要語意，仍應優先使用 HTML 的 <ol>，讓螢幕閱讀器與搜尋引擎理解它是有順序的清單。

七、用媒體查詢照顧手機閱讀

同一篇文章不應只在電腦上好看。當螢幕寬度小於 680px，原文章會縮小標題、減少卡片內距，並把兩欄改成一欄。

手機版規則

@media (max-width: 680px) {
  .slt-post h1 {
    font-size: 28px;
  }

  .slt-info-grid,
  .slt-power-list {
    grid-template-columns: 1fr;
  }
}

媒體查詢可以理解成「條件成立時才使用的 CSS」。設計響應式版面時，先問內容在窄螢幕上是否仍然清楚，再決定斷點，而不是只記住某一個固定數字。

八、從範例整理出的實用屬性

屬性	在文章中的用途	初學者常見問題
`max-width`	限制文章最大寬度，避免一行文字太長。	只設 `width`，導致小螢幕產生水平捲軸。
`line-height`	增加中文字行距，提升長文閱讀性。	設得太小，段落看起來擁擠。
`border-radius`	製作卡片、按鈕與圖片的圓角。	以為它會增加內距；圓角與空間是不同概念。
`box-shadow`	讓圖片與按鈕產生輕微層次。	陰影過黑或範圍太大，使畫面顯得混濁。
`overflow-x: auto`	讓過寬的程式碼或表格可以橫向捲動。	直接隱藏內容，造成手機使用者看不到完整資訊。
`:hover`／`:focus`	提示滑鼠或鍵盤使用者目前選到的連結。	只設 hover，忽略鍵盤操作的 focus 狀態。

九、新生練習：從改色開始，逐步完成自己的卡片

建立 HTML：新增一個 <div class="my-card">，裡面放標題與一小段自我介紹。
加入空間：設定 padding、margin 與 max-width，觀察三者差異。
建立視覺：加入背景色、邊框與圓角，完成第一張資訊卡。
加入變數：把主色存成 --my-color，並在標題與邊框重複使用。
測試手機：縮窄瀏覽器視窗，確認文字沒有被截斷，也沒有不必要的水平捲軸。

挑戰題

把原本兩欄的資訊卡改成：寬螢幕三欄、平板兩欄、手機一欄。你需要兩個媒體查詢。完成後再想一想：斷點應該根據特定手機型號，還是根據內容開始擁擠的位置來決定？

十、交作業前的 CSS 自我檢查

類別名稱能表達用途，不只叫做 .red 或 .big。
文章樣式有外層作用域，不會任意改動整個網站。
重複使用的顏色已整理成 CSS 變數。
文字大小、行距與顏色對比足以閱讀。
圖片使用 max-width: 100%，不會超出容器。
電腦與手機版都實際測試過。
連結除了顏色之外，還有 hover 或 focus 等辨識方式。
刪除某段裝飾後，HTML 內容仍保有正確語意與順序。

CSS 的學習重點不是記住所有屬性，而是建立「選到正確元素—修改一項規則—觀察版面變化—在不同螢幕測試」的工作流程。當你能說明每一條規則為什麼存在，就已經從套用樣式向真正的介面設計跨出重要一步。

智慧生活科技專業社群

2026年8月3日星期一