1、css的簡介
* css： 層疊樣式表** 層疊：一層一層的
** 樣式表：
很多的屬性和屬性值
* 是頁面顯示效果更加好
* CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
2、css和html的結合方式（四種結合方式）
（1）在每個html標籤上面都有一個屬性 style，把css和html結合在一起
- <div style="background-color:red;color:green;">（2）使用html的一個標籤實現 <style>標籤，寫在head裏面
* <style type="text/css">css代碼;
</style>
* <style type="text/css">
div {
background-color:blue;
color: red;
}
</style>
（3）在style標籤裏面 使用語句（在某些瀏覽器下不起作用）
@import url(css文件的路徑);- 第一步，創建一個css文件
<style type="text/css">
@import url(div.css);
</style>
（4）使用頭標籤 link，引入外部css文件
- 第一步 ，創建一個css文件- <link rel="stylesheet" type="text/css" href="css文件的路徑" />
*** 第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式
*** 優先級（一般情況）
由上到下，由外到內。優先級由低到高。
*** 後加載的優先級高
*** 格式 選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
3、css的基本選擇器（三種）
** 要對哪個標籤裏面的數據進行操作（1）標籤選擇器
* 使用標籤名作爲選擇器的名稱div {
background-color:gray;
color:white;
}
（2）class選擇器
* 每個html標籤都有一個屬性 class- <div class="haha">aaaaaaa</div>
- .haha {
background-color: orange;
}
（3）id選擇器
* 每個html標籤上面有一個屬性 id- <div id="hehe">bbbbb</div>
- #hehe {
background-color: #333300;
}
*** 優先級
style > id選擇器 > class選擇器 > 標籤選擇器
4、css的擴展選擇器
（1）關聯選擇器
* <div><p>wwwwwwww</p></div>* 設置div標籤裏面p標籤的樣式，嵌套標籤裏面的樣式
* div p {
background-color: green;
}
（2）組合選擇器
* <div>1111</div><p>22222</p>
* 把div和p標籤設置成相同的樣式，把不同的標籤設置成相同的樣式
* div,p {
background-color: orange;
}
（3）僞元素選擇器(瞭解，瀏覽器的兼容性比較差)
* css裏面提供了一些定義好的樣式，可以拿過來使用* 比如超鏈接
** 超鏈接的狀態
原始狀態 鼠標放上去狀態 點擊 點擊之後
:link :hover :active :visited
** 記憶的方法
lv ha
5、css的盒子模型
** 在進行佈局前需要把數據封裝到一塊一塊的區域內（div）（1）邊框
border: 2px solid blue;border：統一設置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）內邊距
padding:20px;使用padding統一設置
也可以分別設置
上下左右四個內邊距
（3）外邊距
margin: 20px;可以使用margin統一設置
也可以分別設置
上下左右四個外邊距
6、css的佈局的漂浮(瞭解)
float： ** 屬性值
left : 文本流向對象的右邊
right : 文本流向對象的左邊
7、css的佈局的定位（瞭解）
position：** 屬性值
- absolute ：
*** 將對象從文檔流中拖出
*** 可以是top、bottom等屬性進行定位
- relative ：
*** 不會把對象從文檔流中拖出
*** 可以使用top、bottom等屬性進行定位