想美化你的網頁就少不了CSS，使用CSS可以定義字體、顏色、進行佈局和更改更多元素的外觀，讓你的網頁看起來更吸引人! 但開始撰寫CSS之前，我們需要先了解怎麼讓CSS作用在HTML上!
在HTML中使用CSS，有三種主要的方式：外部樣式表、內部樣式表 和 行內樣式表。
外部樣式表（External Style Sheet）：
這是指將CSS規則保存在一個獨立的外部檔中，然後通過HTML文檔中的<link>元素連結到網頁上的一種方式。
1.如何連結外部樣式表?
讓我們來看看如何連結外部樣式表：
(1) 建立外部樣式表檔：
– 建立一個新的檔案，通常以 `.css` 為副檔名，例如 `style.css`。
– 在這個CSS檔中，你可以編寫你的樣式規則，就像在內部樣式表或行內樣式中一樣。
(2) 連結樣式表到HTML頁面：
– 在你的HTML文檔的 `<head>` 部分，使用 `<link>` 元素來連結你的外部樣式表檔。
<link rel="stylesheet" type="text/css" href="styles.css">- `rel=”stylesheet”` 屬性定義了關聯的文檔是一個樣式表。
- `type=”text/css”` 定義了樣式表的類型。
- `href` 屬性指定了外部樣式表的檔案路徑。
(3) 作用範圍與範例：
– 一旦你連結了外部樣式表，它裡面的樣式規則就會作用到HTML文檔中的相應元素。
假設你的 `styles.css` 文件如下所示：
/* styles.css */
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}然後，在你的HTML文檔中，你可以這樣使用這些樣式規則：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>在上面的範例中，`<h1>` 元素將會應用外部樣式表中定義的藍色文字顏色，而 `<p>` 元素將應用字體大小和行高樣式。
2.外部樣式表的應用場合與優缺點
(1) 優點：
a.可維護性：將所有樣式規則保存在一個獨立的CSS檔中，使得更改樣式變得非常容易。一次修改可以影響到整個網站，而不必逐個頁面或元素進行更改
b.一致性：外部樣式表讓整個網站能夠保持一致的外觀和風格，因為所有頁面都共用相同的樣式規則。
c.緩存提高網站載入速度：流覽器可以緩存外部CSS檔，當使用者訪問其他頁面時，不需要重新下載樣式，從而提高網站載入速度。
d.乾淨的程式碼：多個頁面可以連結到同一個外部樣式表，從而實現樣式的重用，減少多餘的程式碼。
e.適合團隊協作：適合大型專案，多個開發人員可以同時編輯個別的CSS檔，使得團隊協作更加順暢。
(2) 缺點：
b.不適合小項目：對於非常小的專案或單一頁面，使用外部樣式表可能會感到繁瑣，不如內部樣式表或行內樣式表方便。
c.多個HTTP請求：每個外部CSS檔都需要一個額外的HTTP請求，如果有太多外部樣式表，可能會增加頁面的載入時間。
(3)應用場合:
總的來說，外部樣式表是一個非常強大和可維護的CSS管理方法，特別適合大型專案和需要一致性和再使用性的情況。然而，在小型專案或需要快速樣式調整的情況下，可能更適合使用內部樣式表或行內樣式表。選擇哪種方法應根據專案的需求和規模來決定。
內部樣式表（Internal Style Sheet）：
這是指將CSS規則嵌入到HTML文檔的<style>元素內部，以在當前頁面中定義樣式的一種方式。
1.如何連結內部樣式表?
(1) 建立內部樣式表：
– 在HTML文檔的 `<head>` 部分，使用 `<style>` 元素來建立內部樣式表。
– 在 `<style>` 元素內部，編寫CSS樣式規則，就像在外部樣式表中一樣。
(2) 作用範圍與範例：
– 在內部樣式表中定義的樣式規則將應用於該文檔中的相應元素。
範例如下：
<!DOCTYPE html>
<html>
<head>
<style>
/* 內部樣式表中的樣式規則 */
h1 {
color: red;
}
p {
font-size: 18px;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with some text.</p>
</body>
</html>
在上述範例中，`<style>` 元素內部的樣式規則會應用該文檔中的 `<h1>` 和 `<p>` 元素。這是一個內部樣式表的典型用法，這種用法適合於小型專案或單個HTML頁面，因為樣式規則與文檔緊密關聯。
2.內部樣式表的應用場合與優缺點
(1) 優點：
b.單個文檔內部有一致性：內部樣式表允許你在同一個HTML文檔中為多個元素定義一致的樣式，確保頁面內的元素具有相同的外觀和風格。
c.較好的可維護性：雖然不如外部樣式表，但內部樣式表仍然提供了一定程度的可維護性，尤其適用於小型專案或單一頁面。
d.較好的性能：與外部樣式表相比，內部樣式表通常具有更快的載入時間，因為不需要額外的HTTP請求來下載外部CSS檔。
(2)缺點：
b.較差的重複使用性：雖然你可以在同一個HTML文檔中重複使用樣式規則，但不能在不同的文檔中輕鬆重用它們。這可能會導致在多個項目中重新編寫相同的樣式規則。
c.混淆HTML和CSS：將樣式規則放在HTML文檔中可能會導致HTML檔變得較長且難以閱讀，尤其是對於大型項目。
3.應用場合：
內部樣式表適合以下情況：
- 單個HTML頁面：當你只需要樣式一個單獨的HTML頁面時，內部樣式表是一個方便的選擇。
- 臨時樣式：如果你需要為某個頁面添加一些臨時樣式，而不希望建立一個獨立的外部樣式表檔，內部樣式表可以派上用場。
- 教育目的：內部樣式表也常用於教育和示範，因為它可以直接嵌入到HTML文檔中，方便學習和演示。
然而，對於大型專案或需要在多個頁面之間共用樣式的情況，更推薦使用外部樣式表，因為它更易於維護和擴展。
行內樣式表
1.如何撰寫行內樣式?
行內樣式是將CSS樣式規則直接應用到單個HTML元素的一種方式。
(1) 如何應用行內樣式：
– 在HTML元素的標籤內部，使用 `style` 屬性來定義行內樣式規則。
– 在 `style` 屬性中，編寫CSS樣式規則，就像在內部樣式表或外部樣式表中一樣。
(2) 應用範圍：
– 在元素的 `style` 屬性中定義的樣式規則將僅應用於該特定元素，不會影響其他元素。
範例如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: blue;">This is a blue heading</h1>
<p style="font-size: 18px; margin-left: 20px;">This is a paragraph with some text.</p>
</body>
</html>`<h1>` 和 `<p>` 元素的 `style` 屬性內部的樣式規則會應用於相應元素。這是一種非常直接的方式，用於為特定元素添加樣式。
2.行內樣式的應用場合與優缺點
(1) 優點：
b.特定元素的個性化樣式：行內樣式表能讓你為特定元素定義樣式，這對於個性化需求非常有用。
c.具有獨立性：行內樣式表不會影響其他元素或其他頁面。
(2)缺點：
b.混淆HTML和CSS：將樣式規則直接嵌入到HTML元素中可能會導致HTML檔變得複雜、難以閱讀和維護，尤其是對於大型項目。
c.不適合整體一致性：行內樣式表通常不適用於需要整個網站或多個頁面保持一致外觀和風格的情況。
d.不利於團隊協作：對於多人團隊開發的專案，行內樣式表可能導致樣式規則分散在不同的HTML檔中，不易協作和統一。
3.使用場合：
行內樣式適合以下情況：
- 臨時或緊急樣式：當你需要快速更改某個元素的樣式，而不希望建立外部樣式表或修改內部樣式表時，可以使用行內樣式。
- 單個元素樣式：如果你只需要樣式一個或少數幾個元素，而不是整個頁面或整個專案，行內樣式是一種便捷的方式。
- 具體的樣式需求：有時，你可能需要為一個元素應用非常特定的樣式規則，這時行內樣式可以實現這種需求。
不過需要注意的是，行內樣式通常不推薦用於大型項目，因為它不易維護和擴展。對於更複雜的樣式需求，建議使用內部樣式表或外部樣式表喔!
