一、概念
Cascading Style Sheets 層疊樣式表
層疊：多個樣式可以作用在同一個html的元素上，同時生效
二、好處
1. 功能強大
2. 將內容展示和樣式控制分離
- 降低耦合度。解耦
- 讓分工協作更容易
- 提高開發效率
三、CSS的使用：CSS與html結合方式
1、內聯樣式
- 在標籤內使用style屬性指定css程式碼
- 如：<div style="color:red;">hello css</div>
2、內部樣式
- 在head標籤內，定義style標籤，style標籤的標籤體內容就是css程式碼
- 如：
<style> div{ color:blue; } </style> <div>hello css</div>
3、外部樣式
1. 定義css資原始檔。
2. 在head標籤內，定義link標籤，引入外部的資原始檔
-
- 如：a.css檔案：
div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>
4、注意：
- 1,2,3種方式 css作用範圍越來越大
- 1方式不常用，後期常用2,3
- 3種格式可以寫為：
<style> @import "css/a.css"; </style>
四、css語法
1、格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
2、選擇器:篩選具有相似特徵的元素
3、注意：每一對屬性需要使用；隔開，最後一對屬性可以不加；
五、選擇器：篩選具有相似特徵的元素
分類：
1、基礎選擇器
1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
語法：#id屬性值{}
2. 元素選擇器：選擇具有相同標籤名稱的元素
語法： 標籤名稱{}
注意：id選擇器優先順序高於元素選擇器
3. 類選擇器：選擇具有相同的class屬性值的元素。
語法：.class屬性值{}
注意：類選擇器選擇器優先順序高於元素選擇器
2、擴充套件選擇器：
1. 選擇所有元素：
-
- 語法： *{}
2. 並集選擇器：
-
- 語法：選擇器1,選擇器2{}
3. 子選擇器：篩選選擇器1元素下的選擇器2元素
-
- 語法： 選擇器1 選擇器2{}
4. 父選擇器：篩選選擇器2的父元素選擇器1
-
- 語法： 選擇器1 > 選擇器2{}
5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
-
- 語法： 元素名稱[屬性名="屬性值"]{}
6. 偽類選擇器：選擇一些元素具有的狀態
-
- 語法： 元素:狀態{}
- 如： <a>
狀態：
* link：初始化的狀態
* visited：被訪問過的狀態
* active：正在訪問狀態
* hover：滑鼠懸浮狀態
六、屬性
1、字型、文字
- font-size：字型大小
- color：文字顏色
- text-align：對其方式
- line-height：行高
2、背景
- background：
3、邊框
- border：設定邊框，符合屬性
4、尺寸
- width：寬度
- height：高度
5、盒子模型：控制佈局
- margin：外邊距
- padding：內邊距
- 預設情況下內邊距會影響整個盒子的大小
- box-sizing: border-box; 設定盒子的屬性，讓width和height就是最終盒子的大小
- float：浮動
- left
- right
七、案例