1 CSS的簡介
css:層疊樣式表
層疊：一層一層的
樣式表：很多的屬性和屬性值
css將網頁內容和顯示樣式進行分離，提高了顯示功能
2 css和html的結合方式（四中結合方式）
1 在每個html標籤上面都有一個屬性style，把css與html結合在一起
例：<div style="background-color:read;color:green"></div>
2 使用html的一個標籤實現<style>標籤，寫在head裏面
例：<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）標籤選擇器
使用標籤名作爲選擇器名稱
（2） class選擇器
每個html標籤都有一個屬性 class
<div class="名稱"></div>
div.名稱{}
（3） 每個html標籤上面都有一個屬性id
<div id="名稱"></div>
div#名稱{}
選擇器的優先級
style>id選擇器>class選擇器>標籤選擇器
4 css的擴展選擇器
（1）關聯選擇器
例：<div><p>wwwww</p></div> 對p標籤的內容進行設置樣式
div p{ }
(2) 組合選擇器
例：<div>11111</div> <p>222222</p> 把div與p標籤設置成相同的樣式
div,p{}
（3）僞元素選擇器
css提供了一些定義好的樣式，可以拿過來使用
比如超鏈接的狀態 原始狀態，鼠標懸停狀態 點擊，點擊之後
:lingk :hover :active :visted
a:lingk{ } a:hover{} a:active{} a:visted{}
5 css的盒子模型
（1） 邊框
border 2px(粗細) solid（樣式）顏色
border ：統一設置
分別設置：border-top border-bottom border-right border-left
（2）內邊距
padding:20px;
使用padding統一設置
也可以分別設置上下左右四個內邊距
（3）外邊距
margin:20px
可以使用margin統一設置
也可以分別設置上下左右四個外邊距
6 css的佈局的漂浮
float: 屬性值 right :文本流向對象的右邊
left：文本流向對象的左邊
7 css佈局的定位
position 屬性值
absolute:將對象從文檔流中拖出，之後可以設置left,right,top,bottom
relative:不會把對象從文檔流中拖出，之後可以設置left,right,top,bottom
8 內容總結
1 css和html的四種結合方式
2 css的基本選擇器
標籤選擇器 使用標籤名
class選擇器 .名稱
id選擇器 #名稱
優先級： style>id>class>標籤
3 css的擴展選擇器
關聯選擇器
設置嵌套標籤的樣式 div p{}
組合選擇器
不同的標籤具有相同的樣式 div,p{}
僞元素選擇器
超鏈接的狀態
原始：link
懸停：hover
點擊：active
點擊之後：visted
4 盒子模型
邊框 border:2px solid red;
上下左右
內邊距 padding:20px;
上下左右
外邊距 margin:20px;
上下左右
5 佈局的漂浮
float left:後面的div到右邊
right:後面到div的左邊
6 佈局的定位
poition absolute 從文檔流中拖出
relative 不會從文檔流中拖出