CSS 樣式有三種格式：內嵌樣式、內部樣式和外部樣式。
內嵌樣式
又稱行內樣式，將 CSS 樣式嵌入到 HTML 標簽中。
<p style="width:300px; color:yellow; background-color:red; border:dotted thin blue; text-align:center;">內嵌樣式</p>
內部樣式表
將 CSS 樣式從 HTML 標簽中分離出來，使得 HTML 代碼更加整潔，而且 CSS 樣式可以被多次利用。
- 內部樣式寫在 <style> 標簽中，構成內部樣式表，僅對當前頁面有效。
- 一般情況下，<style> 標簽位於 <head> 標簽內。
- 在頁面加載過程中，先加載樣式，后加載頁面元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css"> p{ width:300px; color:yellow; background-color:red; border:dotted thin blue; text-align:center;
}
</style>
</head>
<body>
<p>內部樣式1</p>
<p>內部樣式2</p>
</body>
</html>
外部樣式表
- 外部樣式寫在獨立的文件中，構成外部樣式表，頁面在使用某一樣式時，需要引入外部樣式所在文件。
- 網站統一引用同一外部樣式表，使頁面風格保持一致，有利於頁面樣式的維護與更新，從而降低網站的維護成本。
- 用戶瀏覽網頁時，CSS 樣式文件會被暫時緩存，繼續瀏覽其他頁面時，會優先使用緩存中的 CSS 文件，避免重復從服務器中下載，從而提高網頁的加載速度。
- 外部樣式表的引入方式有兩種：鏈接外部樣式表和導入外部樣式表。
鏈接外部樣式表
在 HTML 中 <link> 標簽用於將文檔與外部資源進行關聯，常用於鏈接網頁的外部樣式表。
<link type="text/css" rel="stylesheet" href="url"/>
- type 屬性用於設置鏈接目標文件的 MIME 類型，CSS 樣式表的 MIME 類型是 text/css。
- rel 屬性用於設置鏈接目標文件與當前文檔的關系，stylesheet 表示外部文件的類型是 CSS 文件。
鏈接外部樣式表分為兩步：
1. 創建 CSS 樣式表文件。
@charset "UTF-8";
p{
width:300px;
color:#ff0000;
background-color:#0080ff;
border:dotted thin #ff0080;
text-align:center;
}
2. 在頁面 <head> 標簽中使用 <link> 標簽關聯 pStyle.css 樣式文件，然后在 <body> 中通過標簽選擇器引用樣式文件中預定義的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link type="text/css" rel="stylesheet" href="pStyle.css"/>
</head>
<body>
<p>鏈接外部樣式表</p>
</body>
</html>
文件結構為
導入外部樣式表
導入外部樣式表是指在頁面的內部樣式表中導入一個外部樣式表。
@import url("樣式文件的引用地址");
- @import 關鍵字用於導入外部樣式。
- <style> 標簽中，@import 語句需要位於內部樣式之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css"> @import url("pStyle.css"); </style>
</head>
<body>
<p>導入外部樣式表</p>
</body>
</html>
兩種引入方式的區別在於：
- 隸屬關系不同：<link> 標簽屬於 HTML 標簽，而 @import 是 CSS 提供的載入方式。
- 加載時間及順序不同：使用 <link> 鏈接 CSS 樣式文件時，瀏覽器會先將外部的 CSS 文件加載到網頁當中，然后再進行編譯顯示；而 @import 導入 CSS 文件時，瀏覽器會先將 HTML 結構呈現出來，再把外部的 CSS 文件加載到網頁中，當網速較慢時，會先顯示沒有 CSS 的效果，加載完畢后再渲染頁面。
- 兼容性不同：由於 @import 是 CSS 2.1 提出的，只有在 IE 5 以上的版本才能顯示，而 <link> 標簽無此問題。
- DOM 模式控制樣式：使用 JavaScript 控制 DOM 改變樣式時，只能使用 <link> 標簽，而 @import 不受 DOM 模式控制。
- 綜上所述，不論從顯示效果還是網站性能上看，<link> 鏈接方式都更具優勢，應該優先考慮。
樣式表的優先級
多重樣式是指外部樣式、內部樣式和內嵌樣式同時應用於頁面中的某一元素。
在多重樣式情況下，樣式表的優先級采用就近原則。即優先級由高到低為“內嵌 > 內部 > 外部 > 瀏覽器缺省默認”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css"> @import url("pStyle.css"); </style>
</head>
<body>
<p style="color:pink">導入外部樣式表</p>
</body>
</html>
