一、 CSS概述
1、CSS是什麼？
* CSS 指層疊樣式表
樣式表：存儲樣式的地方
層疊： 一層疊一層
2、CSS有什麼作用？
*CSS就是用來更好地修飾HTML
3、CSS代碼規範
選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
屬性與屬性之間用 分號 隔開
屬性與屬性值直接按用 冒號 連接
如果一個屬性有多個值的話，那麼多個值用 空格 隔開。例如： border:5px solid red;
註釋：/* 註釋內容*/
二、CSS選擇器
*CSS選擇器：指定了CSS樣式作用於哪個HTML標籤上
1、元素選擇器
*就是把HTML標籤名作爲選擇器名稱
*格式： 標籤名 {}
2、類選擇器
*樣式格式： .class名{}
*標籤格式： <p class=”class名”></p>
- *能設置不同標籤的相同樣式
3、Id選擇器
*樣式格式： #id名{}
*標籤格式：<p id=”id名”></p>
- *有針對性地設置樣式
4、屬性選擇器
*根據標籤名和標籤的屬性名以及屬性值來選擇
*樣式格式：標籤名[屬性名稱=’屬性值’]
5、僞元素選擇器
*HTML預定義的選擇器
*格式：標籤名:選擇器{}
*選擇器名稱爲 HTML標籤的狀態。例如：a:link{}表示鏈接標籤在未訪問過 時的樣式。
三、HTML與CSS的結合方式
*CSS必須結合HTML來用。
*4種使用方式：
1、style屬性方式（內聯樣式）
*適合局部修改
*<font style="font-size:150px;color: red;">今天天氣好晴朗</font>
2、style標籤方式：（內嵌樣式）
*<style></style> 存在於head標籤之中的
*例如：<style type="text/css">
font {
font-size:150px;color: red;
}
</style>
*頁面的多個標籤統一設置。
3、導入方式（外部樣式中使用較少）
*格式：@import url("CSS文件路徑");
*存在於<style>標籤中
4、鏈接方式（外部樣式最常用的方式）
*格式：<link rel="stylesheet" type="text/css" href="CSS文件路徑"/>
*存在於<head>標籤中
<link> 標籤定義文檔與外部資源的關係。
<link> 標籤最常見的用途是鏈接樣式表。
外部樣式好處：
提升了代碼的複用性，更加易於維護，從而極大提高工作效率
樣式優先級：
內聯樣式》》內嵌樣式==外部樣式（鏈接方式）（就近原則）
1、 如果加入導入方式 會有截斷CSS代碼的風險
2、 !important
鏈接方式和導入方式區別：
1、鏈接方式引用的CSS會被同時加載。而導入方式引入的CSS在頁面全部加載完以後纔會加載，在網速較慢時會出現網頁沒有樣式的情況。（導入方式硬傷）
2、鏈接方式支持JavaScript修改樣式，而導入方式不支持（導入方式硬傷）
3、鏈接方式可以引入樣式也可以做其他事情。而導入方式只能引CSS
4、鏈接方式導入的CSS任何瀏覽器都OK，而導入方式要求瀏覽器版本必須在IE5以上
建議使用鏈接方式