*CSS的定義
》CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
》CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。
》CSS就是控制頁面布局和樣式
》HTML和CSS的關系：
HTML結構層,負責從語義的角度搭建頁面結構
CSS樣式層,負責從審美的角度美化頁面
行為層,負責從交互的角度提升用戶體驗
*引入CSS的方法
注意：所有的標簽都有一個默認樣式，我們稱為瀏覽器樣式，或者默認樣式
》行內樣式
通過標簽的style屬性設置標簽樣式
》嵌入樣式
在head標簽中，嵌套一個style標簽，在style標簽中可以書寫CSS的樣式內容。
》外連式
在head標簽中，嵌套一個link標簽
*CSS注釋
CSS的注釋語法/*注釋的內容*/，，，，一般用于模塊的注釋
*標簽選擇器
標簽選擇器就是選擇當前頁面中相同名字的標簽。
*通配符選擇器
通配符*代表所有的標簽。通過通配符選擇器可以選擇頁面中的所有的標簽。穿透力很強。
*ID選擇器
HTML標簽中ID的屬性值在一個頁面中必須是唯一的。
ID選擇器是可以幫助我們選擇當前頁面中唯一id值的標簽，也就是根據標簽的id屬性值進行選取設置樣式。ID選擇器的的符號是#號
*類選擇器
類選擇器就是選取頁面中所有標簽的class屬性值相同的一類標簽。
類選擇器的符號是：. (點)
*ID選擇器和Class選擇器的區別
1、相同的Class屬性值，可以在HTML中出現多次。ID屬性值在頁面中只能出現一次。
2、一個class的屬性可以有多個值，也就是說一個標簽可以有多個類。
注意：建議大家盡量使用類選擇器。使用ID時候情況：當確實能唯一確定當前頁面中標簽只會出現一次，這時候可以使用ID選擇器。如果不能保證相同的作用的標簽在頁面中只出現一次，那么這時候就選擇使用類選擇器。
*復合選擇器---標簽式制定選擇器
標簽指定式復合選擇器，要求必須是標簽開頭然后其他選擇器。
比如：h3.demo {} ,需要同時滿足既是標簽h3又擁有demo類才能被選擇到。
*后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代。
后代不僅僅包括兒子，還包括子子孫孫。
注意：后代選擇器可以從左向右理解。但是真正瀏覽器在執行的時候是從右向左進行執行過濾的。
*子代選擇器
子代選擇器，是讓CSS選擇器智能選擇兒子輩的元素。
例如：h1 > {color:red;}
解讀為：選擇器h1 > 可以解釋為“選擇作為h1元素子元素的所有元素”。
尖括號和選擇器之間可以有空格也可以沒有，沒有限制。
建議:選擇器和尖括號間有空格。
*屬性選擇器
屬性選擇器就是根據html標簽的屬性進行過濾選擇。
》h1[id] { color: red; }
》h1[id][class] { font-size: 17px; }
》input[type="text"] { -color: ; }
*偽類選擇器
:link
偽類將應用于未被訪問過的鏈接。IE6不兼容，解決此問題，直接使用a標簽。
:hover
偽類將應用于有鼠標指針懸停于其上的元素。在IE6只能應用于a連接，IE7+所有元素都兼容。
:
偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。
:
偽類將應用于已經被訪問過的鏈接
:focus
偽類將應用于擁有鍵盤輸入焦點的元素。
*偽元素選擇器
偽元素是控制內容
:first-line偽元素
:first-偽元素
注釋：以上兩個偽元素只能用于塊級元素
:first-child偽元素，選擇屬于第一個子元素的元素。
例如：span:first-child{} /*選擇屬于第一個子元素的所有span標簽。*/
:與:after偽元素，可以設置元素之前后之后的 內容，并且配合設置相關內容。比如：#demo:after,#demo: { :"--";:block; }
注意：屬性只能跟 偽元素:和:after共用。
:block.是設置標簽為塊級元素，獨占行。
*CSS層疊性
CSS的層疊性，也就是說后來設置的樣式會層疊（覆蓋）之前的樣式，層疊性的前提示CSS的選擇器的優先級相同。
*CSS繼承性
CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。只有部分樣式能繼承，比如：文字相關字體大小、顏色、字體樣式、行高、鼠標樣式等。盒子相關的樣式都不能繼承，比如：寬高、背景色、邊距、浮動、絕對定位等。
*CSS的優先級
比較CSS的優先級的時候：
1、首先比較行內樣式，行內樣式優先級最高。如果嵌入樣式和行內樣式同時設置樣式時，行內樣式優先級最高。
2、其次是內嵌樣式的優先級比較：
內嵌樣式的，ID選擇器對應的樣式優先級最高。
其次是Class樣式
再次是標簽選擇器樣式，
再次是通配符選擇器設置的樣式
后面是繼承的樣式，
結論一：繼承的樣式要大于默認的樣式，demo
結論二： 通配符選擇器的樣式的優先級比繼承樣式的優先級要高。
結論三：標簽的選擇器的優先級要高于通配符選擇器的優先級。
結論四：類選擇器的樣式的優先級要高于標簽選擇器的樣式的優先級。
結論五：id選擇器的優先級高于 類選擇器的優先級
結論六：行內樣式的選擇器的優先級高于id選擇器的優先級。
注意：復合選擇器的樣式優先級核算：
復合選擇器的優先級根據四個層次來算，首先是行內最高。
其次，比較所有的id選擇器的個數，個數多的為高。
再次比較類選擇器的個數，個數多的為高，
最后比較標簽選擇器的個數，個數多的為高。
*CSS的標簽模式設置屬性
可以控制標簽的顯示模式。
：none | | block | -block
繼承性：無
值的解釋：
none：此元素不被顯示，在文檔中被移除。
block：此元素按塊級元素顯示：前后帶換行符，自己占一行。內聯元素 → 塊元素
：此元素按內聯元素顯示：1個挨著1個。塊元素 → 內聯元素
-block：按行內標簽進行排版，但是可以設置寬高，而且高度可以影響行高
案例1：改變標簽的模式，行內轉塊級，塊級轉行內。
案例2：通過CSS隱藏HTML標簽
通過設置為none，那么可以讓這整個標簽在頁面中移除掉。
注意：1、/*: none;*/ /*直接把當前標簽從頁面中直接移除了，不影響頁面的布局
/*: ;*/ /*這個只是不顯示，但還是占用頁面的空間
2、行內元素不能設置寬高，只能通過他的內容來撐開他的寬度和高度。如果你設置了寬高是不會影響行內元素的顯示的。
*CSS顏色表示
1、RGB模式
語法：color: rgb(33,33,33);
取值：0-255，也可以用百分比：0% - 100%
2、十六進制
*長度單位
px：像素點，像素就是顯示器顯示的一個點。
em：1em等于當前的字體大小，例如：當前元素的字體大小為16px，那么1em = 16px。
注意：在PC時代主要以px為主。在移動web時代主要以：em、rem、pw、ph、百分比等來做布局的設置。
*文字大小設置
font-size
*字體設置
font-
注意：
1、各種字體之間必須使用英文狀態下的逗號隔開。
2、中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3、如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-: "Times New Roman";。
4、盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。
*字體系列
襯線體：字體有一些修飾的東西，讓字體變的美觀。
非襯線體：沒有修飾。
font-: ,arial,' Sans GB',\5b8b\4f53,sans-serif;
1、前面的字體都查找失敗后，在系統中找一種sans-serif字體作為默認字體。
2、注意順序，如果把sans-serif放前面去，后面的都失效了。
*設置字體顏色
color：
建議最好使用十六進制的方式來寫
*設置字符間距
-屬性用于定義字間距css三種樣式中的優先級順序，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為。
可以設置連續漢字（漢字間沒有空格）的間距，也可以設置英文字母之間的間距。
-: 10px;
*設置單詞間距
word-屬性用于定義英文單詞之間的間距。也可以設置漢字中出現斷字的距離（比如：文字間出現空格等）
*行高設置
行高的CSS定義：行高是兩行文本基線的距離。實際上就是：文本的高度+一倍的行距。
一行文本的高度正好是：0.5倍行距+文本的高度+ 0.5倍行距
四線：
?文字頂端的線，稱為頂線。
?中線：穿過x中心的線為中線。
?小寫X字母底部的線為基線。
?文字底部的線為底線。
*text-:文本裝飾
text-屬性用于設置文本的下劃線，上劃線css三種樣式中的優先級順序，刪除線等裝飾效果，其可用屬性值如下：
刪除線
none：沒有裝飾（正常文本默認值）。
：下劃線。
：上劃線。
line-：刪除線。
*text-align:水平對齊方式
text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：
left：左對齊（默認值）
right：右對齊
：居中對齊
*text-:首行縮進
text-屬性用于設置段落首行文本的縮進，只能設置于塊級標簽。其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,建議使用em作為設置單位。
*空白符的處理
：正常的顯示，如果寬度不夠進行折行顯示。
：即使超過盒子的寬度，文本也不進行換行顯示。
Pre：寫html代碼的時候是什么樣式的，顯示就顯示成什么樣的。