CSS引入方式
阿新 • • 發佈：2020-08-08
CSS引入方式
1. 內部樣式表(內嵌樣式表)
將所有的CSS程式碼抽取出來，單獨放到HTML頁面的一個<style>標籤中。
<style>
div {
color: blue;
}
</style>
注：
- <style>標籤可以放到HTML文件的任何一個地方，但一般放在<head>標籤中
- 沒有實現結構與樣式完全分離
- 也稱為嵌入式引入
2. 行內樣式表(內聯樣式表)
在元素標籤內部的style屬性中設定CSS樣式，適合於修改簡單樣式。
<div style="color: blue;"> </div>
注：
- style是標籤的屬性
- 樣式寫在雙引號中間
- 控制的是當前標籤的樣式
- 只有對當前元素新增簡單樣式的時候可以考慮使用
- 也稱為行內式引入
3. 外部樣式表
樣式單獨寫到CSS檔案中，之後把CSS檔案引入到HTML頁面中使用。
引入外部樣式表分為兩步：
- 新建一個字尾名為.css的樣式檔案，把所有CSS程式碼都放到此檔案中
- 在HTML頁面中，使用<link>標籤引入這個檔案
<head>
<link rel="stylesheet" href="css檔案路徑">
</head>
| 屬性 | 作用 |
|---|---|
| rel | 定義當前文件與被連結文件之間的關係。指定為"stylesheet"表示被連結的文件是一個樣式表文件。 |
| href | 定義所連結外部樣式表文件的url，可以是相對路徑或絕對路徑。 |
注：
- <link>標籤寫在HTML頁面 的head標籤裡
- css檔案裡只有樣式沒有標籤
- 是開發中常用的方式
- 也稱為外鏈式或連結式引入
4. 總結
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 結構樣式沒有分離 | 較少 | 控制一個標籤 |
| 內部樣式表 | 部分樣式和結構相分離 | 結構樣式沒有完全分離 | 較多 | 控制一個頁面 |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多 | 控制多個頁面 |