初學者指南：在 HTML 中引入 CSS 的方法
更新日期： 2025 年 2 月 14 日
在網頁開發中，HTML 用於定義網頁的結構，而 CSS（階層樣式表）則用於控制網頁的外觀和佈局。
掌握如何在 HTML 中引入 CSS 是製作美觀、響應式網頁的關鍵。
本文將為新手介紹三種在 HTML 中添加 CSS 的方法：內聯樣式、內部樣式表和外部樣式表。
內聯樣式（Inline CSS）
內聯樣式是將 CSS 直接寫在 HTML 標籤的 style 屬性中。
適用於對單個元素進行快速、簡單的樣式調整。
範例：
<p style="color: blue; font-size: 16px;">這是一個使用內聯樣式的段落。</p>優點：
- 方便快捷，適合小範圍的樣式調整。
缺點：
- 不利於程式碼的可讀性和維護。
- 無法在多個元素中重複使用相同的樣式。
內部樣式表（Internal CSS）
內部樣式表是將 CSS 代碼寫在 HTML 文件的 <head> 標籤內，用 <style> 標籤包裹。
適用於單個頁面的樣式定義。
範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內部樣式表示例</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>這是一個使用內部樣式表的段落。</p>
</body>
</html>優點：
- 所有樣式集中管理，程式碼清晰。
- 可以在同一頁面內重複使用樣式。
缺點：
- 樣式只能應用於當前頁面，無法跨頁面共享。
外部樣式表（External CSS）
外部樣式表是將 CSS 代碼寫在獨立的 .css 文件中，然後在 HTML 文件的 <head> 標籤內使用 <link> 標籤進行引用。
適用於大型項目和多頁面網站。
步驟：
- 建立外部 CSS 文件 新建一個名為
styles.css的文件，添加以下內容：
p {
color: red;
font-size: 20px;
}- 在 HTML 中引用外部 CSS 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>這是一個使用外部樣式表的段落。</p>
</body>
</html>優點：
- 樣式與內容分離，程式碼更易維護。
- 可以在多個頁面間共享同一套樣式，提高開發效率。
- 有利於瀏覽器快取，提升頁面加載速度。
缺點：
- 需要額外的 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 中引用主樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@import 樣式表示例</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<p>這是一個使用 @import 匯入其他 CSS 的示例。</p>
</div>
</body>
</html>優點：
- 將樣式模組化，便於管理和維護。
- 主樣式表更加簡潔，可清晰了解樣式依賴關係。
缺點：
- 使用
@import可能增加頁面加載時間，因為瀏覽器在處理@import時需要多次 HTTP 請求。 - 在某些舊版瀏覽器中可能不被支援。
注意事項：
@import應該放在樣式表的最頂部，否則可能導致樣式未正確加載。- 為了最佳性能，建議使用工具（如 CSS 預處理器或構建工具）將多個 CSS 文件合併，減少 HTTP 請求。
總結
了解如何在 HTML 中引入 CSS 是網頁開發的基礎技能。根據項目需求選擇合適的引入方式：
- 內聯樣式：適合小範圍、一次性的樣式調整。
- 內部樣式表：適用於單個頁面的樣式定義。
- 外部樣式表：推薦的最佳實踐，適合多頁面和大型項目。
- 使用
@import匯入：適合將樣式模組化，但需注意性能影響。
透過正確地引入和管理 CSS，你可以創建出專業、精美的網頁。
希望本文能幫助你邁出網頁開發的第一步！