1.級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱爲“風格樣式表（Style Sheet）。
2.Div+css是一種比較流行的網頁佈局技術，Div用來存放需要現實的數據，css用來指定怎麼顯示，從而做到數據和顯示相互的效果。
3.引入css:<link rel="stylesheet" type="text/css" href=""/>
4.類選擇器
.樣式名{}
元素名稱.分類名{}
類選擇符通過直接引用元素中類屬性的值而產生效果 在引用前面用句點(.)來標識一個類選擇符
<span class="類選擇器1 類選擇器2"></span>(當兩個類選擇器發生衝突了，則以寫在css文件中的後面的那個類選擇器爲準）
<p class="xx">xxxxxxxxxxxxxxxxxxxxx</p>
.s1{
color:blue;
font-size:30px;
font-style:italic;
text-decoration:underline;
}
ID選擇器
#樣式名{}
<p ID="xx">xxxxxxxxxxxxxxxxxxxxx</p>
#id1{
background-color:silver;
font-size:40px;
}
類選擇符和ID選擇符的區別
①類可以分配給任何數量的元素 ID 卻只能在某個HTML文檔中使用一次
② ID 對給定元素應用何種樣式比類具有更高的優先權
html元素選擇器:
元素標籤{}
元素名 元素名…{}
Table{
}
通配符選擇器
*{
}
僞元素選擇器
A:link
A:active
A:visited
A:hover
父子選擇器
<h1>祖國的首都<em>北京</em></h1>
h1{
color:red; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
h1 em{ /* 嵌套選擇器 */
color:#004400; /* 顏色 */
font-size:40px; /* 字體大小 */
}
<li class="li1">關係1
<ul>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ul>
</li>
.li1 ol li{ /* 利用CSS繼承關係 */
font-weight:bold; /* 粗體 */
text-decoration:underline; /* 下劃線 */
}
注意點：
1.減少css的重複：把各個類選擇器的公共部分，單獨抽取寫一份，好處是減少css的冗餘
.ad_stu,.ad_2,.ad_house{
公共部分
height:196px;
float:left;
margin:5px 0 0 6px;
}
2.通配符選擇器:如果希望所有的樣式都符合某一樣式時使用
四個選擇器的優先級:!important;>ID選擇器>class選擇器>html選擇器>通配符選擇器
3.塊元素，內聯元素，可變元素
display:block這樣的屬性，讓他也有每次都從新行開始的屬性。也可以把塊元素div加上display:inline，讓他顯示爲內聯元素。
下面是 block 級對象和 inline 級對象的基本區別:
Block 級對象會自然地水平充滿其父容器，因此沒有必要爲之設置 100% 寬度屬性
Block 級對象的起始擺放位置是其父容器的左上邊界，並順排在其前面的兄弟 Block 對象的下方（除非設置 float 或絕對位置）
Inline 級對象會忽略其寬度和高度設置
Inline 級對象會隨着文字排版，並受排版屬性的影響（如 white-space, font-size, letter-spacing）
Inline 級對象可以使用 vertical-align 屬性控制其垂直對齊，block 級對象不可以
Inline 級對象的下方會保留一些自然的空間，以適應字母 g 一類的會向下探出的筆畫
一個設置爲 float 的 inline 對象將變成 block 對象
任何一個HTML元素都是block或者inline的。
block元素的特性包括：
總是另起一行開始顯示
height, line-height, top/bottom margin屬性可以被設置
width缺省值是100%,除非你指定了另外的width值
這一類的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在當前行的後面顯示
height, line-height, top/bottom margin屬性不能改變
width值就等於包含其中的文字/圖片的寬度，並且這個值不能被改變
這一類的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通過設置元素屬性display: inline 或 display: block來改變元素的以上特性。
5.重要概念1：浮動（http://www.cnblogs.com/milaoshu/articles/2511231.html）
CSS的float屬性，作用就是改變塊元素(block element)對象的默認顯示方式。block對象設置了float屬性之後，它將不再獨自佔據一行。可以浮動到左側或右側。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
如果一個元素右浮動/左浮動，它本身會儘可能會向右/左移動，直到碰到邊框或者別的浮動元素，特別強調浮動對塊元素和行內元素都生效。
如果使用浮動屬性：則該元素不管是不是塊元素，都會以塊元素display:block來顯示
清除浮動：如果不希望別的元素在某個元素的左邊或者右邊，可以使用清除浮動的方法：clear:right;clear:left;clear:both
6 .重要概念2：定位(http://www.cnblogs.com/milaoshu/articles/2511233.html)
（http://www.haozi.cn/code/position-static-relative-absolute-float/）
常見的定位:
1.static定位（默認值)
2.relative相對定位（相對自己原來的位置進行定位,left:40px,top:40px,以前的位置也保留下來了)
3.absolute絕對定位（以前的位置會空出來)
4.fixed固定定位（永遠針對body進行定位）
相對定位,相對該元素應當顯示的左上角重新定位，雖然它脫離的標準流，但是它的空間，不能被佔用
絕對定位：對該元素最近的那個脫離了標準流的元素定位，如果沒有父元素，則相對於body左上角定位