1. 引入CSS樣式表（書寫位置）
1.1 三種樣式表總結（位置）
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標籤（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
1.2 行內式（內聯樣式）
-
概念：
稱行內樣式、行間樣式.
是通過標籤的style屬性來設置元素的樣式
-
其基本語法格式如下：
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
實際上任何HTML標籤都擁有style屬性，用來設置行內式。
- 案例：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
- 注意：
- style其實就是標籤的屬性
- 樣式屬性和值中間是
: - 多組屬性值之間用
;隔開。 - 只能控制當前的標籤和以及嵌套在其中的字標籤，造成代碼冗餘
- 缺點：
- 沒有實現樣式和結構相分離
1.3 內部樣式表（內嵌樣式表）
-
概念：
稱內嵌式
是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義
-
其基本語法格式如下：
<head>
<style type="text/CSS">
選擇器（選擇的標籤） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
-
注意：
- style標籤一般位於head標籤中，當然理論上他可以放在HTML文檔的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制當前的頁面
-
缺點：
沒有徹底分離
1.4 外部樣式表（外鏈式）
-
概念：
稱鏈入式
是將所有的樣式放在一個或多個以**.CSS**爲擴展名的外部樣式表文件中，
通過link標籤將外部樣式表文件鏈接到HTML文檔中
-
其基本語法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>
- 注意：
- link 是個單標籤
- link標籤需要放在head頭部標籤中，並且指定link標籤的三個屬性
| 屬性 | 作用 |
|---|---|
| rel | 定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。 |
| type | 定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。我們都可以省略 |
| href | 定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 |
