*CSS的定義
》CSS通常稱為CSS樣式表或?qū)盈B樣式表（級(jí)聯(lián)樣式表）阳似，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小隘膘、對(duì)齊方式等）疑故、圖片的外形（寬高、邊框樣式弯菊、邊距等）以及版面的布局等外觀顯示樣式纵势。
》CSS以HTML為基礎(chǔ)，提供了豐富的功能管钳，如字體钦铁、顏色、背景的控制及整體排版等才漆，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式牛曹。
》CSS就是控制頁面布局和樣式
》HTML和CSS的關(guān)系：
HTML結(jié)構(gòu)層,負(fù)責(zé)從語義的角度搭建頁面結(jié)構(gòu)
CSS樣式層,負(fù)責(zé)從審美的角度美化頁面
JavaScript行為層,負(fù)責(zé)從交互的角度提升用戶體驗(yàn)
*引入CSS的方法
注意：所有的標(biāo)簽都有一個(gè)默認(rèn)樣式，我們稱為瀏覽器樣式醇滥，或者默認(rèn)樣式
》行內(nèi)樣式
通過標(biāo)簽的style屬性設(shè)置標(biāo)簽樣式
》嵌入樣式
在head標(biāo)簽中黎比，嵌套一個(gè)style標(biāo)簽超营，在style標(biāo)簽中可以書寫CSS的樣式內(nèi)容。
》外連式
在head標(biāo)簽中阅虫，嵌套一個(gè)link標(biāo)簽
*CSS注釋
CSS的注釋語法/*注釋的內(nèi)容*/演闭，，颓帝，米碰，一般用于模塊的注釋
*標(biāo)簽選擇器
標(biāo)簽選擇器就是選擇當(dāng)前頁面中相同名字的標(biāo)簽。
*通配符選擇器
通配符*代表所有的標(biāo)簽购城。通過通配符選擇器可以選擇頁面中的所有的標(biāo)簽吕座。穿透力很強(qiáng)。
*ID選擇器
HTML標(biāo)簽中ID的屬性值在一個(gè)頁面中必須是唯一的瘪板。
ID選擇器是可以幫助我們選擇當(dāng)前頁面中唯一id值的標(biāo)簽吴趴，也就是根據(jù)標(biāo)簽的id屬性值進(jìn)行選取設(shè)置樣式。ID選擇器的的符號(hào)是#號(hào)
*類選擇器
類選擇器就是選取頁面中所有標(biāo)簽的class屬性值相同的一類標(biāo)簽篷帅。
類選擇器的符號(hào)是：. ?(點(diǎn))
*ID選擇器和Class選擇器的區(qū)別
1史侣、相同的Class屬性值，可以在HTML中出現(xiàn)多次魏身。ID屬性值在頁面中只能出現(xiàn)一次惊橱。
2、一個(gè)class的屬性可以有多個(gè)值箭昵，也就是說一個(gè)標(biāo)簽可以有多個(gè)類税朴。
注意：建議大家盡量使用類選擇器。使用ID時(shí)候情況：當(dāng)確實(shí)能唯一確定當(dāng)前頁面中標(biāo)簽只會(huì)出現(xiàn)一次家制，這時(shí)候可以使用ID選擇器正林。如果不能保證相同的作用的標(biāo)簽在頁面中只出現(xiàn)一次，那么這時(shí)候就選擇使用類選擇器颤殴。
*復(fù)合選擇器---標(biāo)簽式制定選擇器
標(biāo)簽指定式復(fù)合選擇器觅廓，要求必須是標(biāo)簽開頭然后其他選擇器。
比如：h3.demo {} ,需要同時(shí)滿足既是標(biāo)簽h3又擁有demo類才能被選擇到涵但。
*后代選擇器
后代選擇器用來選擇元素或元素組的后代杈绸，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面矮瘟，中間用空格分隔瞳脓。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代澈侠。
后代不僅僅包括兒子劫侧，還包括子子孫孫。
注意：后代選擇器可以從左向右理解。但是真正瀏覽器在執(zhí)行的時(shí)候是從右向左進(jìn)行執(zhí)行過濾的烧栋。
*子代選擇器
子代選擇器写妥，是讓CSS選擇器智能選擇兒子輩的元素。
例如：h1 > strong {color:red;}
解讀為：選擇器h1 > strong可以解釋為“選擇作為h1元素子元素的所有strong元素”劲弦。
尖括號(hào)和選擇器之間可以有空格也可以沒有耳标，沒有限制醇坝。
建議:選擇器和尖括號(hào)間有空格邑跪。
*屬性選擇器
屬性選擇器就是根據(jù)html標(biāo)簽的屬性進(jìn)行過濾選擇。
》h1[id] { color: red; }
》h1[id][class] { font-size: 17px; }
》input[type="text"] { background-color: purple; }
*偽類選擇器
:link
偽類將應(yīng)用于未被訪問過的鏈接呼猪。IE6不兼容画畅，解決此問題，直接使用a標(biāo)簽宋距。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素轴踱。在IE6只能應(yīng)用于a連接，IE7+所有元素都兼容谚赎。
:active
偽類將應(yīng)用于被激活的元素淫僻，如被點(diǎn)擊的鏈接、被按下的按鈕等壶唤。
:visited
偽類將應(yīng)用于已經(jīng)被訪問過的鏈接
:focus
偽類將應(yīng)用于擁有鍵盤輸入焦點(diǎn)的元素雳灵。
*偽元素選擇器
偽元素是控制內(nèi)容
:first-line偽元素
:first-letter偽元素
注釋：以上兩個(gè)偽元素只能用于塊級(jí)元素
:first-child偽元素，選擇屬于第一個(gè)子元素的元素闸盔。
例如：span:first-child{} ?/*選擇屬于第一個(gè)子元素的所有span標(biāo)簽悯辙。*/
:before與:after偽元素，可以設(shè)置元素之前后之后的 內(nèi)容迎吵，并且配合content設(shè)置相關(guān)內(nèi)容躲撰。比如：#demo:after,#demo:before { ?content:"--";display:block; }
注意：content屬性只能跟 偽元素:before和:after共用。
Display:block.是設(shè)置標(biāo)簽為塊級(jí)元素击费，獨(dú)占行拢蛋。
*CSS層疊性
CSS的層疊性，也就是說后來設(shè)置的樣式會(huì)層疊（覆蓋）之前的樣式蔫巩，層疊性的前提示CSS的選擇器的優(yōu)先級(jí)相同谆棱。
*CSS繼承性
CSS的繼承性是指，子容器的樣式會(huì)繼承父容器的樣式批幌。但并不是所有的樣式都能繼承础锐。只有部分樣式能繼承，比如：文字相關(guān)字體大小荧缘、顏色皆警、字體樣式、行高截粗、鼠標(biāo)樣式等信姓。盒子相關(guān)的樣式都不能繼承鸵隧，比如：寬高、背景色意推、邊距豆瘫、浮動(dòng)、絕對(duì)定位等菊值。
*CSS的優(yōu)先級(jí)
比較CSS的優(yōu)先級(jí)的時(shí)候：
1外驱、首先比較行內(nèi)樣式，行內(nèi)樣式優(yōu)先級(jí)最高腻窒。如果嵌入樣式和行內(nèi)樣式同時(shí)設(shè)置樣式時(shí)昵宇，行內(nèi)樣式優(yōu)先級(jí)最高。
2儿子、其次是內(nèi)嵌樣式的優(yōu)先級(jí)比較：
內(nèi)嵌樣式的瓦哎，ID選擇器對(duì)應(yīng)的樣式優(yōu)先級(jí)最高。
其次是Class樣式
再次是標(biāo)簽選擇器樣式柔逼，
再次是通配符選擇器設(shè)置的樣式
后面是繼承的樣式蒋譬，
結(jié)論一：繼承的樣式要大于默認(rèn)的樣式，demo
結(jié)論二： 通配符選擇器的樣式的優(yōu)先級(jí)比繼承樣式的優(yōu)先級(jí)要高愉适。
結(jié)論三：標(biāo)簽的選擇器的優(yōu)先級(jí)要高于通配符選擇器的優(yōu)先級(jí)犯助。
結(jié)論四：類選擇器的樣式的優(yōu)先級(jí)要高于標(biāo)簽選擇器的樣式的優(yōu)先級(jí)。
結(jié)論五：id選擇器的優(yōu)先級(jí)高于 類選擇器的優(yōu)先級(jí)
結(jié)論六：行內(nèi)樣式的選擇器的優(yōu)先級(jí)高于id選擇器的優(yōu)先級(jí)儡毕。
注意：復(fù)合選擇器的樣式優(yōu)先級(jí)核算：
復(fù)合選擇器的優(yōu)先級(jí)根據(jù)四個(gè)層次來算也切，首先是行內(nèi)最高。
其次腰湾，比較所有的id選擇器的個(gè)數(shù)雷恃，個(gè)數(shù)多的為高。
再次比較類選擇器的個(gè)數(shù)费坊，個(gè)數(shù)多的為高倒槐，
最后比較標(biāo)簽選擇器的個(gè)數(shù)，個(gè)數(shù)多的為高附井。
*CSS的標(biāo)簽?zāi)Ｊ皆O(shè)置Display屬性
isplay可以控制標(biāo)簽的顯示模式讨越。
display：none | inline | block | inline-block
繼承性：無
display值的解釋：
none：此元素不被顯示，在文檔中被移除永毅。
block：此元素按塊級(jí)元素顯示：前后帶換行符把跨，自己占一行。內(nèi)聯(lián)元素 → 塊元素
inline：此元素按內(nèi)聯(lián)元素顯示：1個(gè)挨著1個(gè)沼死。塊元素 → 內(nèi)聯(lián)元素
inline-block：按行內(nèi)標(biāo)簽進(jìn)行排版着逐，但是可以設(shè)置寬高，而且高度可以影響行高
案例1：display改變標(biāo)簽的模式，行內(nèi)轉(zhuǎn)塊級(jí)耸别，塊級(jí)轉(zhuǎn)行內(nèi)健芭。
案例2：通過CSS隱藏HTML標(biāo)簽
通過設(shè)置Display為none，那么可以讓這整個(gè)標(biāo)簽在頁面中移除掉秀姐。
注意：1慈迈、/*display: none;*/? /*直接把當(dāng)前標(biāo)簽從頁面中直接移除了，不影響頁面的布局
? ? ? ? ? ? /*visibility: hidden;*/ ?/*這個(gè)只是不顯示省有，但還是占用頁面的空間
2痒留、行內(nèi)元素不能設(shè)置寬高，只能通過他的內(nèi)容來撐開他的寬度和高度锥咸。如果你設(shè)置了寬高是不會(huì)影響行內(nèi)元素的顯示的狭瞎。
*CSS顏色表示
1、RGB模式
語法：color: rgb(33,33,33);
取值：0-255搏予，也可以用百分比：0% - 100%
2、十六進(jìn)制
*長度單位
px：像素點(diǎn)弧轧，像素就是顯示器顯示的一個(gè)點(diǎn)雪侥。
em：1em等于當(dāng)前的字體大小，例如：當(dāng)前元素的字體大小為16px精绎，那么1em = 16px速缨。
注意：在PC時(shí)代主要以px為主。在移動(dòng)web時(shí)代主要以：em代乃、rem旬牲、pw、ph搁吓、百分比等來做布局的設(shè)置原茅。
*文字大小設(shè)置
font-size
*字體設(shè)置
font-family
注意：
1、各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開堕仔。
2擂橘、中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)摩骨。當(dāng)需要設(shè)置英文字體時(shí)通贞，英文字體名必須位于中文字體名之前娇掏。
3敬飒、如果字體名中包含空格、#饭冬、$等符號(hào)灾馒，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)茎用，例如font-family: "Times New Roman";。
4、盡量使用系統(tǒng)默認(rèn)字體绘搞，保證在任何用戶的瀏覽器中都能正確顯示彤避。
*字體系列
襯線體：字體有一些修飾的東西，讓字體變的美觀夯辖。
非襯線體：沒有修飾琉预。
font-famliy:? tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
1、前面的字體都查找失敗后蒿褂，在系統(tǒng)中找一種sans-serif字體作為默認(rèn)字體圆米。
2、注意順序啄栓，如果把sans-serif放前面去娄帖，后面的都失效了。
*設(shè)置字體顏色
color：
建議最好使用十六進(jìn)制的方式來寫
*設(shè)置字符間距
letter-spacing屬性用于定義字間距昙楚，所謂字間距就是字符與字符之間的空白近速。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值堪旧，默認(rèn)為normal削葱。
可以設(shè)置連續(xù)漢字（漢字間沒有空格）的間距，也可以設(shè)置英文字母之間的間距淳梦。
letter-spacing: 10px;
*設(shè)置單詞間距
word-spacing屬性用于定義英文單詞之間的間距析砸。也可以設(shè)置漢字中出現(xiàn)斷字的距離（比如：文字間出現(xiàn)空格等）
*行高設(shè)置
行高的CSS定義：行高是兩行文本基線的距離。實(shí)際上就是：文本的高度+一倍的行距爆袍。
一行文本的高度正好是：0.5倍行距+文本的高度+ 0.5倍行距
四線：
?文字頂端的線首繁，稱為頂線。
?中線：穿過x中心的線為中線陨囊。
?小寫X字母底部的線為基線弦疮。
?文字底部的線為底線。
*text-decoration:文本裝飾
text-decoration屬性用于設(shè)置文本的下劃線谆扎，上劃線挂捅，刪除線等裝飾效果，其可用屬性值如下：
刪除線
none：沒有裝飾（正常文本默認(rèn)值）堂湖。
underline：下劃線闲先。
overline：上劃線。
line-through：刪除線无蜂。
*text-align:水平對(duì)齊方式
text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊伺糠，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：
left：左對(duì)齊（默認(rèn)值）
right：右對(duì)齊
center：居中對(duì)齊
*text-indent:首行縮進(jìn)
text-indent屬性用于設(shè)置段落首行文本的縮進(jìn)斥季，只能設(shè)置于塊級(jí)標(biāo)簽训桶。其屬性值可為不同單位的數(shù)值累驮、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%舵揭，允許使用負(fù)值,建議使用em作為設(shè)置單位谤专。
*空白符的處理
Normal：正常的顯示，如果寬度不夠進(jìn)行折行顯示午绳。
Nowrap：即使超過盒子的寬度置侍，文本也不進(jìn)行換行顯示。
Pre：寫html代碼的時(shí)候是什么樣式的拦焚，顯示就顯示成什么樣的蜡坊。
