如何新增 CSS
當瀏覽器讀取樣式表時，它將根據樣式表中的資訊來格式化 HTML 文件。
插入 CSS 的三種方法
插入樣式表有三種方法：
- 外部 CSS
- 內部 CSS
- 內聯 CSS
外部 CSS
使用外部樣式表，您只需更改一個檔案即可改變整個網站的外觀！
每個 HTML 頁面都必須在 head 部分的 <link> 元素中包含對外部樣式表文件的引用。
示例
外部樣式在 HTML 頁面的 <head> 部分的 <link> 元素中定義。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
</body>
</html>
自己動手試一試 »
外部樣式表可以用任何文字編輯器編寫，並必須以 .css 副檔名儲存。
外部 .css 檔案不應包含任何 HTML 標籤。
“mystyle.css” 檔案外觀如下：
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
注意：不要在屬性值 (20) 和單位 (px) 之間新增空格。
錯誤 (有空格): margin-left: 20 px;
正確 (無空格): margin-left: 20px;
內部 CSS
如果只有一個 HTML 頁面具有獨特的樣式，可以使用內部樣式表。
內部樣式在 head 部分的 <style> 元素中定義。
示例
內部樣式在 HTML 頁面的 <head> 部分的 <style> 元素中定義。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>這是一個段落。</p>
</body>
</html>
自己動手試一試 »
內聯 CSS
可以使用內聯樣式為單個元素應用唯一的樣式。
要使用內聯樣式，請將 style 屬性新增到相關元素。style 屬性可以包含任何 CSS 屬性。
示例
內聯樣式在相關元素的 "style" 屬性中定義。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">這是一個標題</h1>
<p style="color:red;">這是一個段落。</p>
</body>
</html>
自己動手試一試 »
提示：內聯樣式會失去樣式表的許多優點（將內容與表示混合在一起）。請謹慎使用此方法。
多個樣式表
如果同一選擇器（元素）在不同的樣式表中定義了某些屬性，將使用最後讀取的樣式表中的值。
假設一個外部樣式表對 <h1> 元素有以下樣式：
h1 {
color: navy;
}然後，假設一個內部樣式表也對 <h1> 元素有以下樣式：
h1 {
color: orange;
}示例
如果內部樣式定義在外部樣式表的連結之後，則 <h1> 元素將顯示為“orange”。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
自己動手試一試 »
示例
然而，如果內部樣式定義在外部樣式表的連結之前，則 <h1> 元素將顯示為“navy”：
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
自己動手試一試 »
層疊順序
當一個 HTML 元素有多個樣式指定時，將使用哪個樣式？
頁面上的所有樣式將按照以下規則“層疊”到一個新的“虛擬”樣式表中，數字 1 的優先順序最高：
- 內聯樣式（HTML 元素內部）
- 外部和內部樣式表（在 head 部分）
- 瀏覽器預設樣式
因此，內聯樣式具有最高優先順序，將覆蓋外部、內部樣式和瀏覽器預設樣式。
影片：如何為 HTML 新增 CSS
