一 CSS簡介
（Cascading Style Sheets）是層疊樣式表用來定義網頁的效果顯示。可以解決HTML代碼對樣式定義的重複，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
層疊：一層一層的
樣式表：有很多的屬性和屬性值
二 CSS和HTML的四種結合方式（四種）
1 在每個HTML標籤上都有一個屬性—style。把CSS和HTML結合在一起
<html>
<head>
<title>CSS和HTML的結合</title>
</head>
<body>
<div style="background-color:red;color:green"> 三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
</body>
</html>2 使用HTML的一個標籤實現<style>標籤，寫在head裏面
<html>
<head>
<title>CSS和HTML的結合</title>
<style type="text/css">
div{
background-color:blue
}
</style>
</head>
<body>
<div> 三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
</body>
</html>3 在style標籤裏面，使用語句@importurl(CSS文件的路徑)
第一步，創建一個CSS文件:demo.css
demo.css文件代碼：
<style> div{
background-color:blue
}
</style>
HTML代碼
<html>
<head>
<title>CSS和HTML的結合</title>
<style type="text/css">
@import url(demo.css);
</style>
</head>
<body>
<div> 三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
</body>
</html>4 使用頭標籤link,引入外部css文件
<link rel="stylesheet" type="text/css" href="css文件的路徑"/>
css代碼同上
<html>
<head>
<title>CSS和HTML的結合</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
<div> 三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
</body>
</html>
第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式
三 CSS的優先級
樣式優先級
由上到下，由外到內。優先級由低到高（後加載的優先級高）
代碼規範：
選擇器名稱{ 屬性名：屬性值; 屬性名：屬性值; ......} //冒號與分號都是英文格式
屬性與屬性之間用分號隔開
屬性與屬性值直接使用冒號鏈接
如果一個屬性有多個值的話，那麼多個值用空格隔開。
四 CSS的基本選擇器
CSS選擇器就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意爲：選擇哪個容器
CSS選擇器的類型
要對哪個標籤裏面的數據進行操作
HTML標籤選擇器。使用的就是HTML的標籤名
<style> div{
background-color:blue
}
</style>
class選擇器（.）。其實使用的標籤中的class屬性
每個HTML標籤都有一個屬性class。
HTML的body中：
<p class="clazz">三千繁華</p>
在head的style中：
p.clazz{color:red}
id選擇器（#）。其實使用的是標籤中的id屬性
每個標籤都有一個屬性id.
HTML的body中：
<p id="ID">三千繁華</p>
在head的style中：
p#ID{color:red}五 CSS的基本選擇器的優先級
style> id選擇器大於class選擇器 class選擇器優先級大於標籤選擇器
六 CSS的擴展選擇器
1 關聯選擇器
<div><p>wwwww</p></div>
設置div標籤裏面p標籤的樣式，嵌套標籤裏面的樣式
<html>
<head>
<title>擴展選擇器</title>
<style type="text/css">
div p{
background-color:green;
}
</style>
</head>
<body>
<div> 三千繁華，<p>彈指剎那<p>，百年之後，不過一捧黃沙</div>
<p>關聯選擇器</p>
</body>
</html>2 組合選擇器
把不同的標籤設置一樣的樣式
<html>
<head>
<title>組合選擇器</title>
<style type="text/css">
div,p{
background-color:blue;
}
</style>
</head>
<body>
<div> 三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
<p>組合選擇器</p>
</body>
</html>3 僞元素選擇器
超鏈接的狀態：
原始狀態：:link
鼠標放上去狀態：:hover
點擊：:active
點擊之後：:visited
<html>
<head>
<title>僞元素選擇器</title>
<style type="text/css">
a:link{
background-color:red;
}
a:hover{
background-color:green;
}
a;active{
background-color:blue;
}
a:visited{
background-color:gray;
}
</style>
</head>
<body>
<a href="href://www.baidu.com.cn" target="_blank">超鏈接一</a>
</body>
</html>七 CSS的盒子模型
div+CSS
在進行佈局前需要把數據封裝到一塊一塊的區域內，這個區域的專業術語叫盒子。
1 邊框（border）：可統一設置，也可分別設置
上：border-top
下：border-bottom
左：border-left
右：border-right
2 內邊距：文本內容距離div四條邊的距離
padding:統一設置
padding-top.......同邊框
3 外邊距：div距離外邊的距離
margin：同上
<html>
<head>
<title>CSS盒子模型</title>
<style type="text/css">
div{
width:200px;
height:100px;
border:2px solid blue;
}
#div12{
border-right:2px dashed yellow
}
#div11{
padding-top:20px;
}
#div13{
margin-top:20px;
}
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCCCC</div>
</body>
</html>八 CSS的佈局的漂浮
float（漂浮）
none:默認值。對象不漂浮
left：文本流向對象的右邊
right：文本流向對象的左邊
在某些瀏覽器上不好使
<html>
<head>
<title>CSS佈局的漂浮</title>
<style type="text/css">
div{
width:200px;
height:150px;
border:2px solid blue;
}
#div11{
float:left;
}
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCCCC</div>
</body>
</html>九 CSS的佈局的定位
position
static：默認值，無特殊定位，對象遵循HTML定位規則
absolute：將對象從文檔流中拖出，使用left，right，top，bottom等屬性對其進行絕對定位。
relative：不會把對象從文檔流中拖出去，對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。
<html>
<head>
<title>CSS佈局的定位</title>
<style type="text/css">
div{
width:200px;
height:150px;
border:2px solid blue;
}
#div11{
background-color:red;
position:absolute;
top:80px;
left:120px;
}
#div12{
background-color:green;
position:relative;
top:50px;
left:50px;
}
#div13{
background-color:orange;
}
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCCCC</div>
</body>
</html>十 案例—圖文混排
<html>
<head>
<title>案例—圖文混排</title>
<style type="text/css">
#imgtext{
width:400px;
height:300px;
border:2px solid blue;
border:2px dashed orange;
}
#div11{
float:left;
}
#div12{
color:blue;
}
</style>
</head>
<body>
<div id="imgtext">
<div id="div11"><img src="aa.jpg" width="250" height="200"/></div>
<div id="div12">三千繁華，彈指剎那，百年之後，不過一捧黃沙。三千繁華，彈指剎那，百年之後，不過一捧黃沙。
三千繁華，彈指剎那，百年之後，不過一捧黃沙。三千繁華，彈指剎那，百年之後，不過一捧黃沙。
三千繁華，彈指剎那，百年之後，不過一捧黃沙。三千繁華，彈指剎那，百年之後，不過一捧黃沙。
三千繁華，彈指剎那，百年之後，不過一捧黃沙</div>
</div>
</body>
</html>十一 案例—圖像簽名
在圖片上面顯示文字
<html>
<head>
<title>案例—圖像簽名</title>
<style type="text/css">
#div12{
position:absolute;
top:250px;
left:30px;
}
</style>
</head>
<body>
<div id="div11"><img src="77.jpg" width="400" height="300"/></div>
<div id="div12">三千繁華，彈指剎那，百年之後，不過一捧黃沙。</div>
</body>
</html>