個人總結，希望可以幫到初學者。
一、Css層疊樣式表，用於控制頁面佈局、顏色以及背景等。W3C組織所有。
二、引入方式：
內嵌式：<style type="text/css">css代碼</style> 寫在當前頁面的head中。
行內式：通過style屬性，寫在指定HTML標籤上面。
鏈接式:將Css代碼樣式表寫在以 .css結尾的文件中； (多個頁面可以引入同一個css文件，達到了Css樣式複用的目的)
三、語法以及選擇器：
語法： 選擇器{
Css屬性：值；
Css屬性：值；
}
註釋：/*註釋內容*/
選擇器：
1、按照標籤名找： 例如 body{ background:#666666;}
2、按照Id屬性找標籤：注意：id屬性在同一個頁面中，id屬性值不允許重複：
例如; #firstTab tr td{樣式} 找id屬性值firstTab的標籤， 然後找他裏面的tr標籤，再找tr裏面的td標籤。
3、按照層次找：
#firstTab tr td{} 中間加空格，只能加一個，表示向指定標籤裏面找其他標籤；
4、按照class找，可以找多個標籤：
例如：.tab_center{css代碼} 找class屬性爲tab_center的所有標籤；
5、同時 找多個標籤（並且）：.tab_center,#sec_tab tr td{} 表示： 找class爲tab_center的，並且還有id爲sec_tab中tr 中td標籤；
優先級別：
行內式優先級最高 ，id>class，標籤名（相同樣式可以覆蓋）
四、css引入方式：
1、 行內式
<h1 style="color:white;background-color:blue">
</h1>
2、 內嵌式
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
3、 鏈接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
五、相關屬性：
1、背景：
背景顏色：background-color:#345761;
背景圖片：background-p_w_picpath:url('12.bmp');
背景圖片是否重複：background-repeat:no-repeat;/*背景縱向重複 repeat-y，橫向重複：repeat-x,*/
背景圖片橫向位置：/*background-position-x:10px;
背景圖片縱向位置：background-position-y:10px;*/
背景圖片位置：background-position:110px 110px;/*控制頁面背景圖片位置*/
背景圖片是否隨着內容滾動：background-p_w_upload:fixed;
簡寫：
background:顏色 url（'圖片路徑'） 是否重複 x位置 y位置
例如：background:#666 url('12.bmp') no-repeat 20px 20px;
2、首行縮進：text-indent:20px;
行高：line-height:50px;
文字間距：letter-spacing:2px;
3、文字：
字體控制： font: italic 12px "黑體"; font-style font-size font-family ;
字體加粗：font-weight:bold 或者100-900
字體顏色：color:#666;
text-align:center;水平居中；(針對文字和行元素)
vertical-align:middle;垂直居中；（針對表格單元格使用）
4、 浮動：float:left;
如果該元素使用這個屬性，此時後面緊挨着他的元素會受影響。
清除浮動效果：
clear:left/right/both;
5、margin位移：指定一個標籤，相對於父容器，在該父容器中一個位移；
略寫：margin：兩個參數： 第一個參數：上下，第二個：左右；
四個參數： 上右下左；
詳細寫法： margin-left;margin-right;margin-bottom;margin-top;
6、讓指定的容器，在父容器中居中（這裏不是文字居中，文字居中使用text-align）
使用：margin:0 auto; 實現水平居中效果； 注意：（center標籤不建議使用）此時必須在該html中加入如下頭文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7、display:屬性值爲：none隱藏元素
inline將塊級元素變爲行級元素
block 將行級（內聯）元素變爲塊級別元素
8、padding：（內邊距或者補白）：
某個容器中內容（包含標籤或者文字）與該標籤相鄰邊框的補白（距離）。
9、margin:（外邊距或者位移）：
某個容器相對於父容器，移動位置。也叫做外邊距。 只要外部容器足夠大，就可以通過margin來移動這個標籤在父容器中的位置。
10、對頁面滾動條的控制：
scrollbar-3dlight-color:#999999;
scrollbar-arrow-color:#666666;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#AEB404;
scrollbar-highlight-color:#EEEEEE;
scrollbar-shadow-color:#EEEEEE;
scrollbar-track-color:#F3F3F3;
11、是否顯示滾動條：
overflow：auto ;超出指定標籤的寬和高，出滾動條，如果不超出，就不顯示滾動條；
scroll一直顯示滾動條。
hidden 超出的內容隱藏，始終不顯示滾動條。
12、文本超出容器需要顯示省略號：
overflow:hidden;/*隱藏滾動條，滾動條永遠不顯示*/
text-overflow:ellipsis;/*文本溢出，溢出部分爲...*/
white-space:nowrap; /*讓文本不允許換行*/
13、文本轉化大小寫：
text-transform:屬性，屬性值如下：
capitalize : 將每個單詞的第一個字母轉換成大寫，其餘無轉換髮生
uppercase : 轉換成大寫
lowercase : 轉換成小寫
14、文字有下劃線：text-decoration：屬性值如下：
underline : 下劃線
line-through : 貫穿線
overline : 上劃線
15、表格控制：常用屬性：
border-collapse:collapse;內外邊框合併。
16、ul列表去掉標示符：list-style:none; list-style-type:none;
17、邊框：border: border-style border-width border-color 同時對這三個屬性設置
實線：solid 虛線：dotted、 dashed
五：相關概念：（面試問題）
行級元素：
1、不獨佔一行。
2、沒有獨立的寬和高。高度和寬度隨着內容變化而變化。給寬高IE9以上可以有效果，以下版本無效果。
3、padding（內邊距有關）有時候不起作用。
4、不能嵌套塊級別元素。
例如：<span></span>
<p_w_picpath></p_w_picpath>
<input/><a>
塊級元素：
1、獨佔一行。
2、有獨立的寬高，有獨立的空間。
例如：<ul><ol> <div><h>
盒子模型：我們將頁面中的元素看做是現實中能盛放東西的盒子，
他們都具有：邊框(border） 填充(padding) 邊距(margin) 內容（content)。
六、Css定位與佈局：
相對定位(relative)：
在相對定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。相對自身位置進行定位處理。
絕對定位(absolute)：
對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的佈局。（對象處於不同層次上）
Position：屬性：
absolute : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom (想激活自定位，必須用上面幾個中至少一個來控制位置)等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。
relative : 對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置
七、Css中僞類:
a:link {color:gray;}/*鏈接沒有被訪問時前景色爲紅色*/
:visited{color:yellow;}/*鏈接被訪問過後前景色爲****/
:hover{color:green;}/*鼠標懸浮在鏈接上時前景色爲綠色*/
:active{color:blue;}/*鼠標點中激活鏈接那一下前景色爲藍色*/
注意：li：hover 對IE6失效。