文章

CSS 簡介

發布於 更新於
作者 Ned Hsu 4 分鐘閱讀

CSS 簡介

什麼是 CSS？

CSS（層疊樣式表，Cascading Style Sheets）是一種用於描述 HTML 文件樣式的語言。它決定了網頁的外觀，包括文字顏色、字體、佈局、背景圖片和其他視覺效果。通過使用 CSS，我們可以將網頁的內容（由 HTML 定義）和其樣式分開，使得網頁設計更靈活和易於維護。

CSS 的用途

  1. 樣式化網頁：通過 CSS，我們可以控制整個網頁的視覺風格，包括顏色、字體、間距、大小、背景等等。
  2. 提高可維護性：使用 CSS 可以使得樣式與內容分離，從而更容易維護網站。更新樣式時，只需修改 CSS 文件，而無需更改每個 HTML 文件。
  3. 提高網站性能：使用外部 CSS 文件可以減少重複的代碼，並通過瀏覽器緩存提高加載速度。
  4. 創建響應式設計：CSS 可讓網頁在不同的設備（如手機、平板和桌面）上保持良好的可讀性和易用性。
  5. 增強無障礙性：適當使用 CSS 可以提高網站的可訪問性，使得不同能力的用戶更容易使用網站。

如何在 HTML 中使用 CSS

有三種主要的方法可以在 HTML 文件中使用 CSS：

  1. 內聯樣式（Inline Styles）： 直接在 HTML 標籤的 style 屬性中使用 CSS。
    1

    <h1 style="color: blue; font-size: 24px;">這是一個標題</h1>
  2. 內部樣式表（Internal Style Sheets）： 使用 <style> 標籤在 HTML 文件的 <head> 部分內定義 CSS。
    1
2
3
4
5
6
7
8

    <head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
  3. 外部樣式表（External Style Sheets）： 使用外部 CSS 文件（通常是 .css 文件），並在 HTML 文件的 <head> 部分使用 <link> 標籤進行引用。
    1
2
3

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

層疊性與繼承性

CSS 的「層疊性」指的是當多個樣式規則應用到同一個元素時，哪個樣式優先。這取決於以下幾個因素：

  • 來源（例如，瀏覽器預設樣式、開發者樣式等）
  • 選擇器的權重（如 ID > 類別 > 標籤）
  • 規則的順序（後面的規則會覆蓋前面的）

CSS 的「繼承性」則指的是某些樣式屬性（如字體、顏色）會自動應用到其子元素。

簡單範例

以下是一個簡單的範例，展示了如何使用外部樣式表來控制網頁樣式：

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 簡介範例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>這是一個標題</h1>
    <p>這是一段文字，用於展示基本的 CSS 應用。</p>
</body>
</html>

styles.css 文件內容：

1
2
3
4
5
6
7
8
9

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

p {
    font-family: 'Arial', sans-serif;
    color: #333;
}

透過以上的內容，CSS 能夠幫助我們定義並控制網頁的樣式，使其更具有吸引力和可讀性。

Software, CSS
CSS
本文章以 CC BY 4.0 授權