思維導圖
1、CSS概述和與HTML的結合方式（四種）(*******)
2、CSS的基本選擇器(******)
3、CSS的擴展選擇器(瞭解)
4、CSS的盒子模型(瞭解)
5、CSS的佈局（浮動）(瞭解)
6、CSS的佈局（定位）(瞭解)
7、圖文混排案例(瞭解)
一般在目錄裏面，標出符號
（********）：重點，代碼看懂，代碼會寫，代碼理解
- （****重點中的重點***）
（瞭解）：代碼看懂
（理解）：能夠把原理講清楚
=========================================================
CSS知識點：
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(css文件的路徑);
</style>
（4）使用頭標籤 link，引入外部css文件
- 第一步 ，創建一個css文件
- <link rel="stylesheet" type="text/css" href="css文件的路徑" />
*** 第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式
*** 優先級（一般情況）
由上到下，由外到內。優先級由低到高。
*** 後加載的優先級高(因爲後加載的樣式會替換之前設置的樣式)
*** 格式 選擇器名稱 { 屬性名：屬性值；屬性名：屬性值；…….}
3、css的基本選擇器（三種）
** 要對哪個標籤裏面的數據進行操作
（1）id選擇器
* 每個html標籤上面有一個屬性 id
<div id="hehe">bbbbb</div>
#hehe {
background-color: #333300;
}
（2）class選擇器
* 每個html標籤都有一個屬性 class
<div class="haha">aaaaaaa</div>
.haha {
background-color: orange;
}
（3）標籤選擇器
* 使用標籤名作爲選擇器的名稱
div {
background-color:gray;
color:white;
}
*** 優先級
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等屬性進行定位
8、案例 圖文混排案例
** 圖片和文字在一起顯示
9、案例 圖像簽名
** 在圖片上面顯示文字
10、上午內容總結
1、css和html的四種結合方式（****）
2、css的基本選擇器（****）
* id選擇器 #名稱
* class選擇器 .名稱
* 標籤選擇器 使用標籤名
** 優先級
style > id > class > 標籤
3、css的擴展選擇器(瞭解)
* 關聯選擇器
- 設置嵌套標籤的樣式 div p {}
* 組合選擇器
- 不同的標籤具有相同的樣式 div,p{}
* 僞元素選擇器
* 超鏈接的狀態
- 原始 :link
- 懸停 :hover
- 點擊 :active
- 點擊之後 :visited
4、盒子模型(瞭解)
* 邊框 border:2px solid red;
上下左右 border-top border-bottom border-left border-right
* 內邊距 padding:20px
上下左右
* 外邊距 margin:20px
上下左右
* 對數據進行操作，需要把數據放到一個區域裏面（div）
5、佈局的漂浮(瞭解)
float
- left: 當前塊往左浮動，擠壓後面的div到右邊
- right：當前塊往右浮動，擠壓後面的div到左邊
6、佈局的定位(瞭解)
position
- absolute
** 從文檔流中拖出
- relative
** 不會從文檔流中拖出
===================================================