CSS - 包含

你好啊，有志於網頁開發的各位！今天，我們將要進入CSS包含的精彩世界。作為你們鄰居的親切計算機老師，我將指導你們如何以各種方式為我們的HTML文件添加風格。所以，拿一杯咖啡（或者如果你喜歡，一杯茶），讓我們開始吧！

CSS - Inclusion

嵌入式CSS - `<style>` 標籤

我們先從最簡單的方式開始，如何在你的HTML文件中包含CSS：<style> 標籤。想像你正在為派對穿衣。<style> 標籤就像是你選擇衣服並在你離開家門前穿上的樣子。

這是它的樣子：

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>歡迎來到我風格十足的頁面！</h1>
</body>
</html>

在這個例子中，我們為 body 和 h1 元素定義了樣式。body 將有淺灰色背景並使用Arial字體，而 h1 將是深灰色並居中對齊。

行內CSS - `style` 屬性

接下來，我們有行內CSS。這就像在你走出门時，為你的衣服搭配一頂時髦的帽子或一條酷炫的項鍊。

這是一個例子：

<p style="color: blue; font-size: 18px;">這是一段藍色且字體更大的文字。</p>

在這個案例中，我們直接在 <p> 標籤上使用 style 屬性應用樣式。文字將是藍色並且有18像素的字體大小。

外部CSS - `<link>` 標籤

現在，讓我們來谈谈外部CSS。這就像有一個獨立的衣櫥，裡面滿滿的是你可以為任何場合選擇的不同衣服。

首先，創建一個獨立的CSS文件（我們稱之為 styles.css）：

/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}

然後，將其鏈接到你的HTML文件：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>歡迎來到我風格十足的頁面！</h1>
</body>
</html>

<link> 標籤告訴瀏覽器我們的CSS文件在哪裡。這就像給你的衣櫥指路！

引入CSS - `@import` 規則

@import 規則就像有一個個人造型師從不同商店為你帶來衣服。它允許你將一個CSS文件引入到另一個中。

在你的主CSS文件中：

/* main.css */
@import url('typography.css');
@import url('colors.css');

body {
background-color: #f0f0f0;
}

在這裡，我們將兩個其他CSS文件引入到我們的主CSS文件中。這是一種組織樣式的絕佳方式！

CSS規則覆蓋

現在，讓我們來談談當樣式發生衝突時會發生什麼。這就像當你在兩套衣服之間做選擇時，其中一套必須獲勝。

這是一個CSS專業性的表格，從最不專業到最專業：

選擇器類型	示例	專業性
元素	`p`	1
類別	`.highlight`	10
ID	`#header`	100
行內	`style="color: red;"`	1000

選擇器越專業，優先級越高。例如：

<style>
p { color: blue; }
.highlight { color: yellow; }
#special { color: green; }
</style>

<p class="highlight" id="special" style="color: red;">我是什么顏色？</p>

在這個案例中，文字將是紅色，因為行內樣式具有最高的專業性。

處理舊瀏覽器

有時候，我們需要迎合可能不理解我們花哨新CSS的舊瀏覽器。這就像準備一套經典衣服以備不時之需。

background-color: #f0f0f0; /* 舊瀏覽器的後備 */
background-color: rgba(240, 240, 240, 0.5); /* 支援alpha透明的現代瀏覽器 */

在這裡，我們為舊瀏覽器提供了一個固體顏色，並為現代瀏覽器提供了一個半透明顏色。

CSS註釋

最後，讓我們來谈谈CSS註釋。它們就像你留給自己（或其他開發者）的小筆記，用於解釋你的樣式選擇。

/* 這是一個CSS註釋 */
body {
background-color: #f0f0f0; /* 淡灰色背景 */
font-family: Arial, sans-serif; /* 使用sans-serif字體以獲得更好的可讀性 */
}

瀏覽器會忽略註釋，但它們對於理解和維護代碼非常有幫助。

這就是全部了，各位！我們已經涵蓋了在HTML文件中包含CSS的各種方式，從嵌入式樣式到外部樣式表。記住，熟練使人嫻熟，所以不要害怕嘗試不同的方法，看看哪一種最適合你的項目。祝你好運，開心設計！

Credits: Image by storyset

CSS - 包含

嵌入式CSS - <style> 標籤

行內CSS - style 屬性

外部CSS - <link> 標籤

引入CSS - @import 規則