Basic.md

CSS(Cascading Style Sheets)是用來控制 HTML 元素的樣式表語言。透過 CSS,可以設定顏色、字型、排版、位置與動畫等視覺效果。

1. CSS 基本語法結構

選擇器 {
  屬性: ;
}

例如:

h1 {
  color: blue;
  font-size: 24px;
}

2. 常見選擇器

元素選擇器

針對 HTML 標籤名稱指定樣式。

p {
  line-height: 1.6;
}

類別選擇器(class)

. 開頭,選擇具有該 class 的元素。

.card {
  border: 1px solid #ccc;
}

ID 選擇器

# 開頭,選擇特定 id 的元素。

#header {
  background-color: lightgray;
}

群組選擇器

一次設定多個元素。

h1, h2, h3 {
  font-family: sans-serif;
}

3. 選擇器的專一性(Specificity)

當多個樣式同時套用到同一元素時,CSS 會依照「專一性」決定哪一個樣式優先。

專一性計算規則:

每種選擇器對應一個數值:

  • 行內樣式(如 style=""):1000 分

  • ID 選擇器:100 分

  • 類別、屬性與偽類選擇器:10 分

  • 元素與偽元素選擇器:1 分

範例說明:

h1 { color: black; }           /* specificity: 1 */
.title { color: green; }       /* specificity: 10 */
#mainTitle { color: red; }     /* specificity: 100 */

若同時套用,最終文字顏色為紅色,因為 ID 選擇器的專一性最高。

補充:專一性的實際運作原理

上述「1000 / 100 / 10 / 1」的分數是一種教學用比喻。實際上,CSS 會計算一個四位數向量 (a, b, c, d) 來比較不同選擇器的優先順序:

  • a: 是否有行內樣式(有則為 1)

  • b: ID 選擇器的數量

  • c: 類別、屬性選擇器、偽類的數量

  • d: 元素選擇器與偽元素的數量

這個向量的比較是逐位進行的。例如:

  • #main → (0,1,0,0)

  • .title → (0,0,1,0)

  • h1 → (0,0,0,1)

因此 ID 選擇器會優先於類別選擇器,而類別又優先於元素。

注意事項:

  • !important 會強制覆蓋所有其他規則,但不建議常用。

  • 維持選擇器簡潔清晰,可提升維護性。


4. 常見屬性與範例

文字樣式

p {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

區塊樣式與邊框

div {
  width: 300px;
  height: 200px;
  padding: 10px;
  margin: 20px auto;
  border: 1px solid black;
}

背景與顏色

body {
  background-color: #f2f2f2;
}

連結樣式

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

5. 引入 CSS 的方式

行內樣式(Inline Style)

直接在 HTML 標籤中使用 style 屬性。

<p style="color: red;">紅色文字</p>

內部樣式表(Internal CSS)

寫在 HTML 的 <style> 區塊中。

<style>
  h1 { color: green; }
</style>

外部樣式表(External CSS)

將樣式寫在 .css 檔案中,並用 <link> 標籤引入。

<link rel="stylesheet" href="styles.css">

CSS 是網頁設計與前端開發的基礎工具,學會它可以讓網頁更具吸引力與可用性。

Last updated