文章目錄
- 1、内聯式（行内式樣式表）
- 2、嵌入式（内部樣式表）
- 3、外鍊式（外部樣式表）
- 4、三種方法的優先級
CSS 樣式類型分為三種：内聯式、嵌入式、外鍊式。
1、内聯式（行内式樣式表）
通過标簽的 style 屬性來設定元素的樣式，文法格式為：
<标簽名 style="屬性1:屬性值1; 屬性2:屬性值2; ..."> 内容 </标簽名>
示例：
<body style="background-color: #1A8A0B;color:#FFFFFF;">
<p style="font-size: 30px;">哈喽，要保持微笑哦。</p>
</body>
優點：十分靈活，書寫友善，權重高（後面會講到）。
缺點：隻能操作某一個标簽，沒有實作樣式和結構相分離。
2、嵌入式（内部樣式表）
将 CSS 代碼集中寫在 HTML 文檔的 head 頭部标簽中，并且用 style 标簽定義。文法格式為：
<head>
<style type="text/css">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; ...}
</style>
</head>
内聯式示例的嵌入式寫法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #1A8A0B;
color:#FFFFFF;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>哈喽，要保持微笑哦。</p>
</body>
</html>
優點：可以通過一條語句操作多個标簽或類。
缺點：隻能控制一個頁面，沒有徹底實作樣式和結構分離。
3、外鍊式（外部樣式表）
将所有的樣式放在一個或多個以 .CSS 為擴充名的外部樣式表檔案中，通過 link 标簽将外部樣式表檔案連結到 HTML 文檔中。文法格式為：
<head>
<link href="CSS檔案的路徑" rel="stylesheet" type="text/css"/>
</head>
href
定義所連結外部樣式表檔案的
URL
，可以是相對路徑，也可以是絕對路徑。
rel
定義目前文檔與被連結文檔之間的關系，在這裡需要指定為 “
stylesheet
”，表示被連結的文檔是一個樣式表檔案。
type="text/css"
通知浏覽器要加載一個css檔案。
内聯式示例的外鍊式寫法如下：
首先我們要建立一個 css 檔案，比如：
style.css
。然後在裡面就能直接寫 css 代碼了。比如：
body{
background-color: #1A8A0B;
color:#FFFFFF;
}
p{
font-size: 30px;
}
檔案結構如下：
其次我們在 html 檔案中引入這個 css 檔案。
<link rel="stylesheet" type="text/css" href="css/style.css">
優點：一個單獨的 CSS 檔案，多個 HTML 檔案可以引用一個 CSS 樣式表檔案。HTML 代碼和 CSS 代碼分離,要寫什麼就在哪個檔案去找，修改友善。
注：内聯式（行内樣式表）一般寫在标簽頭部，嵌入式（内部樣式表）、外鍊式（外部樣式表）一般寫在 标簽内。為了編碼規範，希望大家盡量使用外鍊式來編寫CSS 代碼。
4、三種方法的優先級
我們學了三種 CSS 樣式類型，那麼如果對于同一個元素，我們同時使用了三種方法設定了 CSS 樣式，這個時候，哪個方法是有效的呢 ？
我們可以記住一個優先級：
内聯式 > 嵌入式 > 外鍊式
但是
“嵌入式 > 外鍊式”
有一個前提：嵌入式 CSS 樣式的位置一定在外鍊式後面。