HTML爲標籤設置CSS的三種方法以及權值問題
內聯式
內聯式是直接把CSS代碼寫在HTML標籤的開始標籤中
如
這裏是文字是紅色的。
## 嵌入式 嵌入式是把css樣式代碼直接寫在`` 如<style type="text/css">
span{
color:red
}
</style>
注意：嵌入式CSS樣式代碼必須寫在<style></style>之間，且一般會寫在<head></head>之間
外部式(外聯式)
外聯式是把css代碼寫到一個單獨的外部文件中，然後文件名是以“.css”爲擴展名，在<head>標籤內用<link>標籤將css樣式代碼文件鏈接到HTML文件內。
<link href="base.css" rel="stylesheet" type="text/css"/>
注意：
rel=“stylesheet” type="text/css"是固定寫法不能修改
三種方法的優先級
優先級：內聯式>嵌入式>外部式
注意：嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面
其實就是就近原則（離被設置元素越近優先級越高）
但是上面總結的優先級是在內聯式、嵌入式、外部式樣式表中css樣式是在相同權值的情況下的
css樣式的權值
瀏覽器是根據權值來判斷使用哪種CSS樣式的，哪種權值高就使用哪種
規則：標籤的權值爲1，類選擇符的權值爲10，ID選擇的權值最高爲100
例子
p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/
注意：內聯式其實最高的，無論嵌入式和外聯式的權值多高，如果該標籤有內聯式的話，就採用內聯式的css
例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css樣式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#id{
color:red;
}
</style>
</head>
<body>
<p>慕課網，<span id="sp" style="color:pink">超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成爲技術高手！</p>
</body>
</html>
上面例子中，用了權值爲100的id選擇器，但是最終結果是字的樣式是按照內聯式的樣式。
我的簡書博客 https://www.jianshu.com/p/e07a02d222f0