2.1 外部樣式表
將 CSS (Cascading Style Sheets) 連結到 HTML 文件可以讓網頁更加美觀，提高使用便利性。連結 CSS 到 HTML 有好幾種不同的方式，每種都各有優勢，適用於不同情境。
連結 CSS 的方法：
- 外部樣式表 (External Stylesheets)
- 內部樣式表 (Internal Stylesheets)
- 內聯樣式 (Inline Styles)
外部樣式表 (External Stylesheets)
外部樣式表是獨立的 CSS 文件，透過 <link> 標籤連結到 HTML 文件。這種方式可以分離樣式與文檔的結構，讓樣式管理更方便，且可以在多個頁面重複利用同一 CSS 文件。
優點：
- 管理樣式方便
- 樣式可在多個頁面重複使用
- 改善快取及性能
語法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式表範例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>標題</h1>
<p>文字</p>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部樣式表範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>標題</h1>
<p>文字</p>
</body>
</html>
CSS 文件範例(styles.css):
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 內部樣式表 (Internal Stylesheets)
內部樣式表位於 HTML 文檔內部 <head> 區域，使用 <style> 標籤。此方法適用於只需對單一頁面應用樣式或外部文件不可用的情況。
優點：
- 易於在單一頁面使用
- 不需要額外的文件
語法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內部樣式表範例</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>標題</h1>
<p>文字</p>
</body>
</html>
2.3 內聯樣式 (Inline Styles)
內聯樣式直接應用於 HTML 元素，使用 style 屬性。此方法適合快速測試或針對單個元素改變樣式。
優點：
- 快速而精確地應用樣式
- 適合使用 JavaScript 進行動態更改
缺點：
- 在眾多元素中管理樣式困難
- 樣式重複使用困難
語法：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯樣式範例</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">標題</h1>
<p style="color: #666; background-color: #f4f4f4;">文字</p>
</body>
</html>
在同一頁面上使用所有方法的範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 連結的所有方法範例</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">標題</h1>
<p style="color: #666;">此文本使用內聯樣式設置樣式。</p>
</body>
</html>
2.4 樣式優先順序
當樣式用不同方式連接時，樣式的優先順序如下所示：
- 內聯樣式 (Inline Styles) 擁有最高優先權
- 內部樣式表 (Internal Stylesheets) 其次
- 外部樣式表 (External Stylesheets) 優先權最低
如果對同一元素應用了具有相同優先權的多個樣式，則優先權由選擇器的特異性和聲明順序決定。
樣式優先順序範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣式優先順序範例</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* 內部樣式 */
}
</style>
</head>
<body>
<p style="color: red;">此文本由於內聯樣式的優先權會變成紅色。</p>
</body>
</html>
GO TO FULL VERSION