初學者指南：在 HTML 中引入 CSS 的方法

FacebookLinkedInTweet更新日期： 2025 年 2 月 14 日

在網頁開發中，HTML 用於定義網頁的結構，而 CSS（階層樣式表）則用於控制網頁的外觀和佈局。

掌握如何在 HTML 中引入 CSS 是製作美觀、響應式網頁的關鍵。

本文將為新手介紹三種在 HTML 中添加 CSS 的方法：內聯樣式、內部樣式表和外部樣式表。

內聯樣式（Inline CSS）

內聯樣式是將 CSS 直接寫在 HTML 標籤的 style 屬性中。

適用於對單個元素進行快速、簡單的樣式調整。

範例：

這是一個使用內聯樣式的段落。

優點：

方便快捷，適合小範圍的樣式調整。

缺點：

不利於程式碼的可讀性和維護。

無法在多個元素中重複使用相同的樣式。

內部樣式表（Internal CSS）

內部樣式表是將 CSS 代碼寫在 HTML 文件的 標籤內，用

這是一個使用內部樣式表的段落。

優點：

所有樣式集中管理，程式碼清晰。

可以在同一頁面內重複使用樣式。

缺點：

樣式只能應用於當前頁面，無法跨頁面共享。

外部樣式表（External CSS）

外部樣式表是將 CSS 代碼寫在獨立的 .css 文件中，然後在 HTML 文件的 標籤內使用 標籤進行引用。

適用於大型項目和多頁面網站。

步驟：

建立外部 CSS 文件 新建一個名為 styles.css 的文件，添加以下內容：

p {

color: red;

font-size: 20px;

}

在 HTML 中引用外部 CSS 文件

這是一個使用外部樣式表的段落。

優點：

樣式與內容分離，程式碼更易維護。

可以在多個頁面間共享同一套樣式，提高開發效率。

有利於瀏覽器快取，提升頁面加載速度。

缺點：

需要額外的 HTTP 請求（但可通過合併和壓縮來優化）。

使用 @import 匯入其他 CSS 文件

除了在 HTML 中引用外部 CSS 文件，還可以在主樣式表中使用 @import 規則將其他 CSS 文件匯入。這種方法有助於將樣式分割成多個模組化的文件，便於維護和管理。

步驟：

建立多個 CSS 文件

創建一個主樣式表 main.css。

創建其他樣式表，例如 reset.css 和 layout.css。

reset.css：

/* 重置瀏覽器預設樣式 */

* {

margin: 0;

padding: 0;

}

layout.css：

/* 定義佈局樣式 */

.container {

width: 80%;

margin: 0 auto;

}

在主樣式表中使用 @import 匯入其他 CSS 文件 main.css：

@import url('reset.css');

@import url('layout.css');

/* 主樣式 */

body {

font-family: Arial, sans-serif;

}

在 HTML 中引用主樣式表

優點：

將樣式模組化，便於管理和維護。

主樣式表更加簡潔，可清晰了解樣式依賴關係。

缺點：

使用 @import 可能增加頁面加載時間，因為瀏覽器在處理 @import 時需要多次 HTTP 請求。

在某些舊版瀏覽器中可能不被支援。

注意事項：

@import 應該放在樣式表的最頂部，否則可能導致樣式未正確加載。

為了最佳性能，建議使用工具（如 CSS 預處理器或構建工具）將多個 CSS 文件合併，減少 HTTP 請求。

總結

了解如何在 HTML 中引入 CSS 是網頁開發的基礎技能。根據項目需求選擇合適的引入方式：

內聯樣式：適合小範圍、一次性的樣式調整。

內部樣式表：適用於單個頁面的樣式定義。

外部樣式表：推薦的最佳實踐，適合多頁面和大型項目。

使用 @import 匯入：適合將樣式模組化，但需注意性能影響。

透過正確地引入和管理 CSS，你可以創建出專業、精美的網頁。

希望本文能幫助你邁出網頁開發的第一步！