css三種引入方式及格式
阿新 • • 發佈：2019-02-12
一：行內式（內聯樣式）
其基本語法格式如下：
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名
如：
| <div style="color: red; font-size: 12px;">行內式</div> |
二：內部樣式表（內嵌樣式表）
其基本語法格式如下：
| <head> <style type="text/CSS"> 選擇器（選擇的標籤） { 屬性1: 屬性值1; 屬性2: 屬性值2; 屬性3: 屬性值3; } </style> </head> |
如：
| <style> div { color: red; font-size: 12px; } </style> |
三：外部樣式表（外鏈式）
是將所有的樣式放在一個或多個以.CSS為副檔名的外部樣式表文件中，通過link標籤將外部樣式表文件連結到HTML文件中。
其基本語法格式如下：
| <head> <link rel="stylesheet" type="text/css" href="css檔案路徑"> </head> |
PS：
link 是個單標籤，link標籤需要放在head頭部標籤中，並且指定link標籤的三個屬性。
| 屬性 | 作用 |
|---|---|
| rel | 定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結的文件是一個樣式表文件。 |
| type | 定義所連結文件的型別，在這裡需要指定為“text/CSS”，表示連結的外部檔案為CSS樣式表。我們都可以省略 |
| href | 定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。 |
三種方式總結：
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標籤（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |