CSS第一節(jié)
CSS ：層疊樣式表 (Cascading Style Sheets)或級(jí)聯(lián)樣式表贡羔。
?
CSS用途：主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體刊棕、大小、對(duì)齊方式等）、圖片的外形（寬高吹缔、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
?
HTML.CSS.JavaScript的關(guān)系：
??HTML 結(jié)構(gòu)層 ????負(fù)責(zé)從 語義的角度搭建頁面結(jié)構(gòu)
??CSS 樣式層 ????????負(fù)責(zé)從 審美的角度美化頁面
??JavaScript 行為層 負(fù)責(zé)從 交互的角度提升用戶體驗(yàn)
?
引入CSS的方式
????行內(nèi)樣式狂票，是通過在標(biāo)簽中設(shè)置style屬性來達(dá)到實(shí)現(xiàn)控制標(biāo)簽的樣式的效果。
例如：<h1 style="color: red;">傳智播客-前端與移動(dòng)開發(fā)學(xué)院的CSS基礎(chǔ)視頻教程</h1>
???嵌入樣式：在head標(biāo)簽中熙暴，嵌套一個(gè)style標(biāo)簽闺属，在style標(biāo)簽中可以書寫CSS的樣式內(nèi)容。
Style標(biāo)簽有一個(gè)屬性type屬性周霉，默認(rèn)值就是 text/css,可以省略掂器。
例如：<style type="text/css">
p {
color: green; /*設(shè)置前景色，也就字體的顏色*/
background-color: silver;
}
?
ul {
background-color: red;
}
</style>
???外聯(lián)樣式（link）
通過link標(biāo)簽引入css樣式文件
<link rel="stylesheet" href="a.css" />
type屬性：只有一個(gè)選項(xiàng)俱箱，“text/css"国瓮，指定當(dāng)前為css文本文件
rel：指定當(dāng)前HTML文件與CSS文件的關(guān)系是樣式表。href：指定外聯(lián)樣式表的路徑
???導(dǎo)入樣式：@import，導(dǎo)入樣式會(huì)導(dǎo)致乃摹，css文件不能并行下載禁漓。不推薦使用。
導(dǎo)入樣式的書寫必須在所有的css規(guī)則書寫之前
?
?
CSS注釋
CSS的注釋語法 ?/* 注釋的內(nèi)容 ?*/
注釋不能嵌套
??多行注釋：
/*
放多行的注釋內(nèi)容1
放多行的注釋內(nèi)容2
*/
?
一般用于 模塊的 注釋
例如：/* S 導(dǎo)航條開始*/
ul {
background-color: red;
}
/* E 導(dǎo)航條結(jié)束*/
??文件頭的注釋：
/*
* author: 傳智播客 前端與移動(dòng)開發(fā)學(xué)院
* des： 當(dāng)前文件用于 ....
* date：
*/
?
CSS選擇器
???標(biāo)簽選擇器
標(biāo)簽選擇器就是選擇當(dāng)前頁面中相同名字的標(biāo)簽孵睬。
例如：p {
background-color: yellow;
color: white;
}
???通配符選擇器
通配符* 代表所有的標(biāo)簽播歼。通過通配符選擇器可以選擇頁面中的所有的標(biāo)簽。穿透力很強(qiáng)掰读。
例如：* { color：red; }
設(shè)置當(dāng)前頁面中所有標(biāo)簽的顏色為紅色
???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選擇器咒循。
???復(fù)合選擇器-標(biāo)簽指定式選擇器
標(biāo)簽指定式復(fù)合選擇器据途，要求必須是標(biāo)簽開頭然后其他選擇器。
比如：h3.demo {} ,需要同時(shí)滿足既是標(biāo)簽h3又擁有demo類才能被選擇到叙甸。
注意：使用非常少颖医，一般不用。要么直接用id選擇器裆蒸，要么直接用類選擇器熔萧。
???后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面僚祷，內(nèi)層標(biāo)記寫在后面佛致，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)辙谜，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代俺榆。
后代不僅僅包括兒子，還包括子子孫孫装哆。
???子代選擇器
子代選擇器罐脊，是讓CSS選擇器智能選擇兒子輩的元素定嗓。
????例如：h1 > strong {color:red;}
?????解讀為：選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”。
尖括號(hào)和選擇器之間可以有空格也可以沒有爹殊，沒有限制蜕乡。
建議:選擇器和尖括號(hào)間有空格。
????屬性選擇器
屬性選擇器就是根據(jù)html標(biāo)簽的屬性進(jìn)行過濾選擇梗夸。
常見的幾種方式：
?h1[id] { color: red; }
設(shè)置包含id屬性的h1標(biāo)簽的字體為紅色层玲。
?
/*把擁有id和class屬性的h1標(biāo)題選出來然后設(shè)置字體大小為17px*/
h1[id][class] { font-size: 17px; }
?
input[type="text"] { background-color: purple; }
設(shè)置擁有type屬性并且屬性值是text的input標(biāo)簽的背景為紫色。
????偽類選擇器
: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)的元素卿捎。
順序問題：LoVe ?HAte原則。
????偽元素選擇器
偽元素 是控制內(nèi)容
:first-line?偽元素 ?第一行
:first-letter 偽元素 ?第一個(gè)字
注釋：以上兩個(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的層疊性
CSS的層疊性，也就是說后來設(shè)置的樣式會(huì)層疊（覆蓋）之前的樣式呆盖，層疊性的前提示CSS的選擇器的優(yōu)先級(jí)相同贷笛。
???CSS的繼承性
CSS的繼承性是指应又，子容器的樣式會(huì)繼承父容器的樣式。但并不是所有的樣式都能繼承乏苦。只有部分樣式能繼承尤筐，比如：文字相關(guān)字體大小洞就、顏色盆繁、字體樣式、行高旬蟋、鼠標(biāo)樣式等油昂。盒子相關(guān)的樣式都不能繼承，比如：寬高冕碟、背景色匆浙、邊距、浮動(dòng)首尼、絕對(duì)定位等。
???CSS的特殊性（優(yōu)先級(jí)）
CSS的特殊性迎捺，定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上破加，那么誰的優(yōu)先級(jí)更高呢雹嗦，這就是CSS的特殊性。
比較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è)置的樣式
后面是 繼承的樣式甫贯，
??????????最后是瀏覽器默認(rèn)的樣式。
結(jié)論一：繼承的樣式要大于默認(rèn)的樣式
結(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ù)多的為高咪惠。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
