CSS 基礎完整指南：從語法、選擇器到盒模型與定位

CSS 基礎完整指南：從語法、選擇器到盒模型與定位

CSS（Cascading Style Sheets，層疊樣式表）是網頁設計的核心技術之一，用於定義 HTML 元素的顯示樣式。掌握 CSS 基礎是前端開發的必經之路。本文系統整理了 CSS 的核心概念，包括引入方式、選擇器類型、層疊優先級、常用屬性（文本、圖像、表格、盒模型、浮動與定位），幫助你建立扎實的樣式開發基礎。

一、CSS 引入 HTML 的三種方式

1. 外部樣式表（推薦）：<link rel="stylesheet" href="style.css">，利於維護與複用。
2. 嵌入樣式表：寫在 <style> 標籤內，適合單頁面特有樣式。
3. 內聯樣式：直接寫在元素的 style 屬性中，優先級最高但不利於維護。

二、核心選擇器詳解

1. 簡單選擇器

• 元素選擇器：p { color: red; }
• 類選擇器：.classname { ... }，可多次複用。
• ID 選擇器：#idname { ... }，頁面唯一，優先級高於類。
• 偽類選擇器：針對鏈接狀態：:link（未訪問）、:visited（已訪問）、:hover（滑過）、:active（點擊）。
• 偽元素選擇器：::first-line、::first-letter 針對文本首行/首字。

2. 復合選擇器

• 交集選擇器：p.special（標籤+類，無空格）。
• 並集選擇器：h1, h2, .class（逗號分隔，共享樣式）。
• 後代選擇器：div p（空格分隔，選中所有後代元素）。

三、樣式層疊與優先級

優先級從低到高：

1. 外部樣式表 < 嵌入樣式表 < 內聯樣式
2. 同一樣式表內：元素選擇器 < 類選擇器 < ID 選擇器
3. !important 可強制提升優先級（慎用）。

四、常用 CSS 屬性分類

1. 文本樣式

• 字體：font-family、font-size、font-weight、font-style
• 顏色：color、background-color
• 文本修飾：text-decoration（underline/line-through）、text-transform（大小寫轉換）
• 間距對齊：text-indent、letter-spacing、word-spacing、line-height、text-align、vertical-align

2. 圖像與背景

• 邊框：border-width/style/color，可單獨設四邊。
• 尺寸：width、height（支持 px、%）。
• 浮動佈局：float: left/right，配合 clear 清除影響。
• 背景：background-image、background-repeat（平鋪控制）、background-position、background-attachment: fixed/scroll。

3. 表格與表單樣式

• 表格：border-collapse 合併邊框、border-spacing、table-layout、語義標籤 <thead>/<tbody>/<tfoot>。
• 表單美化：透明按鈕、下拉選單、底線輸入框等技巧。

4. 盒模型——佈局基石

每個元素都是一個盒子：content（內容）+ padding（內邊距）+ border（邊框）+ margin（外邊距）。

• padding/margin 支援 1~4 值順時針設定（上右下左）。
• 塊級元素垂直 margin 會發生外邊距合併（取較大值）。
• display: block/inline/inline-block/none 控制元素顯示類型。

5. 浮動與定位

• 浮動：float: left/right 讓元素脫離標準流並排，需配合 clear: both 防止父元素高度塌陷。
• 定位：
  • static：默認，不定位。
  • relative：相對自身原位置偏移，佔據原空間。
  • absolute：相對最近的已定位祖先元素，脫離文檔流。
  • fixed：相對視窗固定，滾動不動。
• z-index 控制堆疊順序（值大者在上）。

6. 進階屬性補充

• overflow: visible/hidden/auto/scroll 處理內容溢出。
• clip 配合 position: absolute 進行裁剪。
• opacity 設置透明度（0~1）。
• CSS3 新增：transform: rotate(deg) 旋轉、:nth-of-type(n) 結構偽類。

五、實戰建議

1. 優先使用外部樣式表，保持結構與樣式分離。
2. 善用類選擇器，減少 ID 選擇器使用，降低耦合。
3. 理解盒模型與 BFC（塊級格式化上下文），避免佈局塌陷與 margin 合併問題。
4. 靈活運用 float、flex（現代佈局）與 grid 實現響應式設計。
5. 利用瀏覽器開發者工具調試樣式優先級與盒模型尺寸。

CSS 雖然入門容易，但精通需要大量實踐與對渲染機制的深入理解。建議從盒模型、定位、浮動這三大佈局核心切入，逐步掌握響應式設計與動畫過渡等進階技巧。