CSS第一節(jié)
CSS ：層疊樣式表 (Cascading Style Sheets)或級聯(lián)樣式表。
?
CSS用途：主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
?
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;">傳智播客-前端與移動開發(fā)學(xué)院的CSS基礎(chǔ)視頻教程</h1>
???嵌入樣式：在head標(biāo)簽中，嵌套一個style標(biāo)簽，在style標(biāo)簽中可以書寫CSS的樣式內(nèi)容。
Style標(biāo)簽有一個屬性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屬性：只有一個選項(xiàng)，“text/css"，指定當(dāng)前為css文本文件
rel：指定當(dāng)前HTML文件與CSS文件的關(guān)系是樣式表。href：指定外聯(lián)樣式表的路徑
???導(dǎo)入樣式：@import，導(dǎo)入樣式會導(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: 傳智播客 前端與移動開發(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的屬性值在一個頁面中必須是唯一的。
ID選擇器是可以幫助我們選擇當(dāng)前頁面中唯一id值的標(biāo)簽，也就是根據(jù)標(biāo)簽的id屬性值進(jìn)行選取設(shè)置樣式。ID選擇器的的符號是#號。
???類選擇器
類選擇器就是選取頁面中所有標(biāo)簽的class屬性值相同的一類標(biāo)簽。
類選擇器的符號是： . ?(點(diǎn))
???ID選擇器和class選擇器的區(qū)別
1、相同的Class屬性值，可以在HTML中出現(xiàn)多次。ID屬性值在頁面中只能出現(xiàn)一次。
2、一個class的屬性可以有多個值，也就是說一個標(biāo)簽可以有多個類。
建議大家盡量使用類選擇器。使用ID時候情況：當(dāng)確實(shí)能唯一確定當(dāng)前頁面中標(biāo)簽只會出現(xiàn)一次，這時候可以使用ID選擇器。
???復(fù)合選擇器-標(biāo)簽指定式選擇器
標(biāo)簽指定式復(fù)合選擇器，要求必須是標(biāo)簽開頭然后其他選擇器。
比如：h3.demo {} ,需要同時滿足既是標(biāo)簽h3又擁有demo類才能被選擇到。
注意：使用非常少，一般不用。要么直接用id選擇器，要么直接用類選擇器。
???后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。
后代不僅僅包括兒子，還包括子子孫孫。
???子代選擇器
子代選擇器，是讓CSS選擇器智能選擇兒子輩的元素。
????例如：h1 > strong {color:red;}
?????解讀為：選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”。
尖括號和選擇器之間可以有空格也可以沒有，沒有限制。
建議:選擇器和尖括號間有空格。
????屬性選擇器
屬性選擇器就是根據(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 偽元素 ?第一個字
注釋：以上兩個偽元素只能用于塊級元素
:first-child?偽元素，選擇屬于第一個子元素的元素。
例如：span:first-child{} ?/*選擇屬于第一個子元素的所有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)簽為塊級元素，獨(dú)占行。
?
CSS的特性
???CSS的層疊性
CSS的層疊性，也就是說后來設(shè)置的樣式會層疊（覆蓋）之前的樣式，層疊性的前提示CSS的選擇器的優(yōu)先級相同。
???CSS的繼承性
CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。只有部分樣式能繼承，比如：文字相關(guān)字體大小、顏色、字體樣式、行高、鼠標(biāo)樣式等。盒子相關(guān)的樣式都不能繼承，比如：寬高、背景色、邊距、浮動、絕對定位等。
???CSS的特殊性（優(yōu)先級）
CSS的特殊性，定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，那么誰的優(yōu)先級更高呢，這就是CSS的特殊性。
比較CSS的優(yōu)先級的時候：
1、首先比較行內(nèi)樣式，行內(nèi)樣式優(yōu)先級最高。如果嵌入樣式和行內(nèi)樣式同時設(shè)置樣式時，行內(nèi)樣式優(yōu)先級最高。
2、其次是內(nèi)嵌樣式的優(yōu)先級比較：
內(nèi)嵌樣式的，ID選擇器對應(yīng)的樣式優(yōu)先級最高。
其次是Class樣式
再次是標(biāo)簽選擇器樣式，
再次是通配符選擇器設(shè)置的樣式
后面是 繼承的樣式，
??????????最后是瀏覽器默認(rèn)的樣式。
結(jié)論一：繼承的樣式要大于默認(rèn)的樣式
結(jié)論二：通配符選擇器的樣式的優(yōu)先級比繼承樣式的優(yōu)先級要高。
結(jié)論三：標(biāo)簽的選擇器的優(yōu)先級要高于通配符選擇器的優(yōu)先級。
結(jié)論四：類選擇器的樣式的優(yōu)先級要高于?標(biāo)簽選擇器的樣式的優(yōu)先級。
結(jié)論五：id選擇器的優(yōu)先級高于 類選擇器的優(yōu)先級
結(jié)論六：行內(nèi)樣式的選擇器的優(yōu)先級高于 ?id選擇器的優(yōu)先級。
????復(fù)合選擇器的樣式優(yōu)先級核算：
復(fù)合選擇器?的優(yōu)先級根據(jù)四個層次來算，首先是行內(nèi)最高。
其次，比較所有的id選擇器的個數(shù)，個數(shù)多的為高。
再次比較類選擇器的個數(shù)，個數(shù)多的為高，
最后比較標(biāo)簽選擇器的個數(shù)，個數(shù)多的為高。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
