1、CSS(Cascading Style Sheets)
CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
1.選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。
2、多類名選擇器
我們可以給標簽指定多個類名，從而達到更多的選擇目的。
注意：
1、樣式顯示效果跟HTML元素中的類名先后順序沒有關系,受css樣式書寫的上下順序有關。
2、各個類名中間用空格隔開。
多類名選擇器在后期布局比較復雜的情況下，還是較多使用的。
3、行高
ine-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px。
一般頁面中的行高設置比字號大7~8像素左右就可以了, 比如當前使用14像素的字號，行高設為24像素左右合適。
4、標簽語義化
語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用
語義化的網頁的好處，最主要的就是對搜索引擎友好，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取。
核心：合適的地方給一個最為合理的標簽。
語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性。
不管是誰都能看懂這塊內容是什么。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
小技巧：
1.重語義的地方多用有語義的標簽，比如 h 和 p 等等，少用沒有語義的標簽比如 div span 等等。
2. 如果有地方可以用p 又可以用div，特別是文字段落， 優先選用 p標簽（結構更清晰）
3.少用純樣式標簽 比如 b u font，可以運用css樣式。 如果有強調的地方，可以考慮 strong em 等 有強調語義的標簽。
5、標簽顯示模式
1）、塊級元素(block-level)
每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。
常見的塊級元素右h、p、div、ul、ol、li
2）、行內元素(inline-level)
行內元素（內聯元素）不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
常見的行內元素有a、strong、b、em、i、del、s、ins、u、span
注意：
1、只有 文字才 能組成段落 因此 p 里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素。
2、鏈接里面不能再放鏈接。
3）塊級元素和行內元素區別
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。
4）行內塊元素（inline-block）
在行內元素中有幾個特殊的標簽<img>、<input>、<td>,可以對它們設置寬高和對齊屬性
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
6、偽類和偽元素
1）、偽類
偽類可以用于文檔狀態的改變、動態的事件等，例如用戶的鼠標點擊某個元素、未被訪問的鏈接。
:link偽類將應用于未被訪問過的鏈接
:hover偽類將應用于有鼠標指針懸停于其上的元素。
:active偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。
:visited偽類將應用于已經被訪問過的鏈接
:focus偽類將應用于擁有鍵盤輸入焦點的元素。（ie8以上支持）
鏈接偽類，他們規定執行有順序的，不能隨便更改位置：
要按照 :link --> :visited --> :hover --> :active 的順序。
2）偽元素
:first-line 和 :first-letter 偽元素只能用于塊級元素
7、引入CSS樣式表
1）行內式（內聯樣式）
是通過標簽的style屬性來設置元素的樣式，其基本語法格式如下：
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容
語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設置行內式。其中屬性和值的書寫規范與CSS樣式規則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用。
2）內部樣式表（內嵌式）
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義，
語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML文檔的任何地方。
3）外部樣式表（外鏈式）
鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中
注意： link 是個單標簽哦!!!
該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：
-href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
-type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。
-rel：定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
4）導入式
導入式與鏈入式相同，都是針對外部樣式表文件的。對HTML頭部文檔應用style標簽，并在style標簽內的開頭處使用@import語句，即可導入外部樣式表文件。其基本語法格式如下：
8、CSS 三大特性
層疊 繼承 優先級 是我們學習CSS 必須掌握的三個特性。
不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：邊框、外邊距、內邊距、背景、定位、元素高屬性。
在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：
1、 繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
2、行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100。總之，他擁有比上面提高的選擇器都大的優先級。
3、權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。 -- CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。
9、CSS 背景(background)
1）背景位置
（1）position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。
（2）如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。
2）背景附著
scroll : 背景圖像是隨對象內容滾動
fixed : 背景圖像固定
10、盒子模型
CSS就三個大模塊：盒子模型 、 浮動 、 定位
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網頁布局的本質：把網頁元素比如文字圖片等等，放入盒子里面，然后利用css擺放盒子的過程，就是網頁布局。
1）表單的邊框清零
因為表單邊框顏色瀏覽器不同，樣式不同，因此我們需要清零，自己定義樣式和顏色，從而達到瀏覽器兼容效果。
input {border: 0;}
textarea {border: 0;}
2）表格的細線邊框
table{ border-collapse:collapse; border-spacing: 0;}
border-collapse:collapse; 表示邊框合并在一起。
border-spacing:px; 定義邊框之間的間距。
這樣就不用給表格指定 cellpadding 和 cellspacing
3）輪廓 outline
鏈接獲得焦點 有虛線 和 文本框或者文本域獲得焦點時，谷歌等瀏覽器有 藍色邊框，為了提高用戶體驗。
outline:none;
body a:focus {outline:none;}
textarea { outline: none; }
4）a:focus 和 a:active 區別
a:focus 獲得焦點的時候 鼠標松開時顯示的顏色
a:active 當前活動元素 鼠標在元素上按下還沒有松開
5）外邊距實現盒子居中
可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
（1）必須是塊級元素。
（2）盒子必須指定了寬度（width）
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
6）清除元素的默認內外邊距
為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：
*{
padding:0; 清除內邊距
margin:0; 清除外邊距
}
注意： 行內元素是只有左右內外邊距的，是沒有上下內外邊距的。
7）外邊距合并
（1）相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
（2）嵌套塊元素垂直外邊距的合并
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
8）寬度和高度
盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和
