【CSS 筆記】從零開始的 CSS - part 1

Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。

簡介（Introduction）

CSS 全名為 Cascading Style Sheets（串樣式列表、級聯樣式表、串接樣式表、階層式樣式表），為一種用於將結構化語言（HTML、XML 等）添加樣式的電腦語言。簡單來說就是幫 HTML、XML 等這些語言渲染、美化。

以下圖片的左側是有用 CSS 的網頁，右邊沒有用，顯眼可見的差異。

example

Image Source：That Time I Tried Browsing the Web Without CSS | CSS-Tricks

CSS was released (in 1996), 3 years after HTML (in 1993). The main idea behind its use is that it allows the separation of content (HTML) from presentation (CSS). This makes websites easier to maintain and more flexible.

CSS 最早在 1996 年發行，晚於 HTML（1993 年） 3 年。其用背後的主要想法是它允許將內容（HTML）與展示（CSS）分開。這使得網站能更容易維護且具有彈性。

以下是 CSS 的發展歷史：

css_history

Image Source：https://www.geeksforgeeks.org/css/css-tutorial/

CSS 語法（Syntax）

ruleset（規則集）為 CSS 的基本單位，用於定義哪些 HTML 元素要套用哪些樣式。

一個 ruleset 主要結構分為兩部分：

  • Selector（選擇器）
  • Declaration block（宣告區）

Selector 用於指定要套用樣式的 HTML 元素。

Declaration block 以兩個大括號包起來 {}，括號內含有一或多個宣告，每個宣告由 property（屬性） 與 value（值） 組成，用 : 分隔，最後以 ; 結束。

以下是 CSS 的範例：

1
2
3
4
p {
  color: red;
  font-size: 16px;
}

p 代表 HTML 裡面所有的 <p> 元素都套用此類樣式，意思是所有段落顏色為紅色，字體大小都是 16 像素。

所以一個 ruleset 的整體架構可如下所示：

1
2
3
4
Selector {
  Property: Value;
  Property: Value;
}

選擇器（Selector）

有以下四種 Selector：

1. Universal Selector（萬用型選擇器）

Selector 為 *。

1
2
3
4
5
6
* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: darkblue;
}

2. Type Selector（元素選擇器）

以 HTML 元素名稱選擇，如 p、h1、button 等。

1
2
3
4
5
6
7
8
9
10
11
12
h1 {
  color: darkred;
}
p {
  font-size: 18px;
  line-height: 1.5;
}
button {
  background-color: lightblue;
  border: none;
  padding: 8px 12px;
}

3. Class Selector（類別選擇器）

用 . 加上類別名稱，一般而言可重複用在多個元素上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Class Selector 範例</title>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
    .note {
      color: green;
      font-style: italic;
    }
  </style>
</head>
<body>
  <p class="highlight">這段文字有黃色底色。</p>
  <p class="note">這段文字是綠色斜體。</p>
  <p class="highlight">另一段也可以套用 highlight。</p>
</body>
</html>

4. ID Selector（ID 選擇器）

用 # 加上元素的 id，即可對元素特定 id 做 styling。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>ID Selector 範例</title>
  <style>
    #main-title {
      color: navy;
      text-align: center;
    }
    #special-button {
      background-color: orange;
      padding: 10px 20px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1 id="main-title">我是唯一的標題</h1>
  <button id="special-button">特殊按鈕</button>
</body>
</html>

分組化（Grouping）

可將多個 Selector 以 , 分別套用樣式。以下就會 h1, h2, h3 同時套用樣式。

1
2
3
h1, h2, h3 {
    color : red;
}

後代選擇器（Descendant Selector）

用以下範例解釋的話，就是只要 <li> 是屬於某個 <ul>，就會套用以下的樣式。

1
2
3
ul li {
    list-style-type: square;
}

如這個會將無序列表的圓形變方形。

■ 蘋果
■ 香蕉
■ 葡萄

巢狀化（Nesting）

2023 後的 CSS 才支援以下的寫法：

1
2
3
4
5
6
7
8
9
10
11
article {
  color: black;

  h2 {
    color: blue;
  }

  p {
    font-size: 16px;
  }
}

套用效果：

  • <article> 裡所有文字預設是黑色。
  • <article> 裡的 <h2> 特別設為藍色。
  • <article> 裡的 <p> 字體大小為 16px。

虛擬類別和虛擬元素

Pseudo-classes 用於選擇元素在特定狀態下的模式。如當滑鼠移動到該元素時變色，滑鼠點擊該元素後會怎樣怎樣等等的。

註：CSS 的註解以 /* 開頭，*/ 結尾。

範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 滑鼠移入 */
a:hover {
  color: red;
}

/* 被點擊後 */
a:active {
  color: blue;
}

/* 第一個子元素 */
li:first-child {
  font-weight: bold;
}

/* 第三個子元素 */
li:nth-child(3) {
  color: green;
}

Pseudo-elements 可為元素新增功能。

範例：

1
2
3
4
5
6
7
8
9
/* 在元素前新增內容 */
p::before {
  content: "👉 ";
}

/* 在元素後新增內容 */
p::after {
  content: " ✅";
}

以下是結合 Pseudo-classes 和 Pseudo-elements 的 html 範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Pseudo-classes vs Pseudo-elements</title>
  <style>
    /* ----------- Pseudo-classes (偽類) ----------- */
    a:link {
      color: blue;              /* 預設狀態 */
    }
    a:visited {
      color: purple;            /* 已訪問 */
    }
    a:hover {
      color: red;               /* 滑鼠移入 */
    }
    a:active {
      color: orange;            /* 點擊中 */
    }

    li:first-child {
      font-weight: bold;        /* 第一個 li 加粗 */
    }
    li:nth-child(3) {
      color: green;             /* 第三個 li 變綠色 */
    }

    /* ----------- Pseudo-elements (偽元素) ----------- */
    p::first-line {
      font-weight: bold;        /* 段落第一行加粗 */
    }
    p::first-letter {
      font-size: 2em;           /* 第一個字放大 */
      color: red;
    }
    p::before {
      content: "👉 ";           /* 在段落前加上符號 */
      color: blue;
    }
    p::after {
      content: " ✅";           /* 在段落後加上符號 */
      color: green;
    }
  </style>
</head>
<body>

  <h2>Pseudo-classes（偽類）</h2>
  <p>下面是一些連結，滑鼠移過去、點擊看看：</p>
  <a href="#">首頁</a> |
  <a href="#">關於我們</a> |
  <a href="#">聯絡方式</a>

  <h3>清單範例：</h3>
  <ul>
    <li>第一個項目（加粗）</li>
    <li>第二個項目</li>
    <li>第三個項目（變綠色）</li>
    <li>第四個項目</li>
  </ul>

  <hr>

  <h2>Pseudo-elements（偽元素）</h2>
  <p>
    這是一個段落，用來展示偽元素的效果。
    你會看到第一個字被放大變紅色，整段的第一行文字會加粗。
    並且段落的開頭有符號 👉 ，結尾也會自動加上 ✅。
  </p>

</body>
</html>

宣告區（Delcaration Block）

每個宣告都在宣告區內由一個 property 和一個 value 所組成，結尾以分號表示結束如 property : value;。

property 分為以下五種：

  1. color：定義字體顏色。
  2. background-color：定義一個元素的背景顏色。
  3. font-size：定義字體大小。
  4. margin：定義元素與元素之間的距離。
  5. padding：定義元素內容與邊框之間的距離。

總結（Conclusion）

簡介（Introduction）

  • CSS：Cascading Style Sheets（階層式樣式表）。
  • 用途：將 HTML、XML 等結構化語言加上樣式，用於渲染與美化網頁。
  • 核心思想：分離「內容 (HTML)」與「展示(CSS)」，讓網站更易維護且更具彈性。
  • 歷史：HTML（1993）先出，CSS 於 1996 推出。

CSS 語法（Syntax）

一個 CSS ruleset（規則集）包含兩部分：

  1. Selector（選擇器）：指定要套用樣式的 HTML 元素。
  2. Declaration Block（宣告區）：由 {} 包起來，內含多個宣告（property: value;）。

範例：

1
2
3
4
p {
  color: red;
  font-size: 16px;
}

效果：所有 <p> 段落字體變紅色、大小 16px。

選擇器（Selectors）

  1. 萬用選擇器（Universal Selector） *

    1
    * { margin: 0; padding: 0; }

  2. 元素選擇器（Type Selector） h1, p, button

    1
    h1 { color: darkred; }

  3. 類別選擇器（Class Selector） .className

    • 可重複使用，適合一組元素。
    1
    .highlight { background: yellow; }

  4. ID 選擇器（ID Selector） #idName

    • 用於單一唯一元素。
    1
    #main-title { text-align: center; }

選擇器語法（Syntax）

  • 分組化（Grouping）

    1
    h1, h2, h3 { color: red; }

  • 後代選擇器（Descendant Selector）

    1
    ul li { list-style-type: square; }

  • 巢狀化（Nesting，2023+ 支援）

    1
    2
    3
    4
    article {
      color: black;
      h2 { color: blue; }
    }

虛擬類（Pseudo-classes）

描述元素在不同狀態的樣式。

1
2
3
4
a:hover { color: red; }     /* 滑鼠移入 */
a:active { color: blue; }   /* 點擊中 */
li:first-child { font-weight: bold; }
li:nth-child(3) { color: green; }

虛擬元素（Pseudo-elements）

為元素新增特效或內容。

1
2
3
4
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; color: red; }
p::before { content: "👉 "; }
p::after { content: " ✅"; }

宣告區（Declaration Block）常用屬性

  1. color：字體顏色\
  2. background-color：背景顏色\
  3. font-size：字體大小\
  4. margin：元素與外部元素間距\
  5. padding：元素內容與邊框的間距

Reference

CSS Syntax - GeeksforGeeks

CSS Tutorial - GeeksforGeeks

CSS - 維基百科，自由的百科全書

CSS 语法 | 菜鸟教程

CSS Id 和 Class选择器 | 菜鸟教程