CSS的引入樣式總共有三種：行內樣式（內聯樣式表）、內部樣式表、外部樣式表。下面分別來介紹這三種樣式。
一、行內樣式
行內樣式也叫內聯樣式，使用style屬性引入CSS樣式。看下面的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行內樣式</title> </head> <body> <p style="color:red;font-size: 30px;">p段落通過行內樣式引入CSS樣式</p> </body> </html>
效果：
注意：
1、行內樣式只對應用了此樣式的標簽有效，如果有多個相同的標簽要使用相同的樣式，那么每一個標簽都要引入該樣式，會造成很多重復的代碼，所以，在實際的應用當中，不建議使用行內樣式。
二、內部樣式表
內部樣式表在<head>標簽里面使用<style>標簽書寫CSS代碼。
語法：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內部樣式表</title> <!--內部樣式表--> <style type="text/css"> /*書寫CSS樣式*/ </style> </head>
看下面的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內部樣式表</title> <!--內部樣式表--> <style type="text/css"> div{ background-color: green; } </style> </head> <body> <div>我是DIV，通過內部樣式表引入樣式</div> </body> </html>
效果：
因為DIV是塊級元素，所以DIV占據整行。
三、外部樣式表
顧名思義，外部樣式表表示CSS樣式不寫在HTML代碼中，而是單獨寫在擴展名為.css的樣式表中。
HTML文件引用擴展名為.css的樣式表，有兩種方式：
- 鏈接式
- 導入式
1、鏈接式
語法：
<link rel="styleSheet" type="text/css" href="CSS文件的路徑（包括文件路徑和css文件名）" />
說明：
type：規定被鏈接文檔的類型，這是表示被鏈接的文檔是css樣式表。
rel：定義當前文檔與被鏈接的文檔之間的關系。
href：表示外部css樣式表的路徑，包括文件路徑和css文件名。
示例：
先定義css樣式表
li{ color: green; }
HTML代碼中引入該外部樣式表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>外部樣式表</title> <!--引入外部樣式表--> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <ol> <li>111</li> <li>222</li> </ol> </body> </html>
效果：
2、導入式
語法：
<!--導入式-->
<style type="text/css">
@import url("css文件路徑");
</style>
看下面的示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>外部樣式表</title> <!--引入外部樣式表--> <!-- <link rel="stylesheet" type="text/css" href="style.css" /> --> <!--導入式--> <style type="text/css"> @import url("style.css"); </style> </head> <body> <ol> <li>111</li> <li>222</li> </ol> </body> </html>
效果：
鏈接式和導入式的區別：
導入式：
- 屬於XHTML。
- 優先加載CSS文件到頁面。
鏈接式
- 屬於CSS 2.1.
- 先加載HTML結構在加載CSS文件。
注意：
- 無論是鏈接式還是導入式，都是寫在<head>標簽里面。
- 建議使用鏈接式引入CSS文件。
四、CSS樣式的優先級
優先級
- 行內樣式>內部樣式表>外部樣式表
先看行內樣式和內部樣式表優先級的對比
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行內樣式和內部樣式表優先級比較</title> <!--內部樣式表--> <style type="text/css"> p{ color: blue; } </style> </head> <body> <!--行內樣式--> <p style="color:red;">我是p標簽</p> </body> </html>
效果：
從截圖中可以看出行內樣式的優先級高於內部樣式表。
在看看行內和外部樣式表的優先級
在外部CSS樣式表里面定義p標簽的字體顏色為藍色
p{ color: blue; }
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>行內樣式和外部樣式表優先級</title> <!--引入外部樣式表--> <link rel="styleSheet" type="text/css" href="ExtenStyle.css" </head> <body> <!--行內樣式：定義顏色為綠色--> <p style="color:green;">我的p標簽</p> </body> </html>
效果：
從截圖中可以看出：行內樣式的優先級高於外部樣式表。
最后在看內部樣式表和外部樣式表的比較
外部樣式表還是使用上面的css文件
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內部樣式表和外部樣式表優先級</title> <!--外部樣式表--> <link rel="styleSheet" type="text/css" href="ExtenStyle.css" <!--內部樣式表：定義顏色為黃色--> <style type="text/css"> p{ color: yellow; } </style> </head> <body> <p>我是p標簽</p> </body> </html>
效果：
從截圖中可以看出：內部樣式表的優先級高於外部樣式表。
調整<head>標簽中兩種樣式的先后順序，那效果又是如何呢？調整后的HTML代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內部樣式表和外部樣式表優先級</title> <!--內部樣式表：定義顏色為黃色--> <style type="text/css"> p{ color: yellow; } </style> <!--外部樣式表--> <link rel="styleSheet" type="text/css" href="ExtenStyle.css" </head> <body> <p>我是p標簽</p> </body> </html>
效果：
從截圖中看出：外部樣式表的優先級高於內部樣式表。
總結：
- 因為HTML中代碼的順序是從上往下執行的，所以說內部樣式表和外部樣式表沒有優先級誰高誰低之分，是按照就近原則執行的，哪種樣式最后加載，就以哪種樣式為准。
- 同理，引入外部樣式表的兩種方式(鏈接式和導入式)的優先級也是按照就近原則。