CSS第一節
CSS ：層疊樣式表 (Cascading Style Sheets)或級聯樣式表。
?
CSS用途：主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
?
HTML.CSS.JavaScript的關系：
??HTML 結構層 ????負責從 語義的角度搭建頁面結構
??CSS 樣式層 ????????負責從 審美的角度美化頁面
??JavaScript 行為層 負責從 交互的角度提升用戶體驗
?
引入CSS的方式
????行內樣式，是通過在標簽中設置style屬性來達到實現控制標簽的樣式的效果。
例如：<h1 style="color: red;">傳智播客-前端與移動開發學院的CSS基礎視頻教程</h1>
???嵌入樣式：在head標簽中，嵌套一個style標簽，在style標簽中可以書寫CSS的樣式內容。
Style標簽有一個屬性type屬性，默認值就是 text/css,可以省略。
例如：<style type="text/css">
p {
color: green; /*設置前景色，也就字體的顏色*/
background-color: silver;
}
?
ul {
background-color: red;
}
</style>
???外聯樣式（link）
通過link標簽引入css樣式文件
<link rel="stylesheet" href="a.css" />
type屬性：只有一個選項，“text/css"，指定當前為css文本文件
rel：指定當前HTML文件與CSS文件的關系是樣式表。href：指定外聯樣式表的路徑
???導入樣式：@import，導入樣式會導致，css文件不能并行下載。不推薦使用。
導入樣式的書寫必須在所有的css規則書寫之前
?
?
CSS注釋
CSS的注釋語法 ?/* 注釋的內容 ?*/
注釋不能嵌套
??多行注釋：
/*
放多行的注釋內容1
放多行的注釋內容2
*/
?
一般用于 模塊的 注釋
例如：/* S 導航條開始*/
ul {
background-color: red;
}
/* E 導航條結束*/
??文件頭的注釋：
/*
* author: 傳智播客 前端與移動開發學院
* des： 當前文件用于 ....
* date：
*/
?
CSS選擇器
???標簽選擇器
標簽選擇器就是選擇當前頁面中相同名字的標簽。
例如：p {
background-color: yellow;
color: white;
}
???通配符選擇器
通配符* 代表所有的標簽。通過通配符選擇器可以選擇頁面中的所有的標簽。穿透力很強。
例如：* { color：red; }
設置當前頁面中所有標簽的顏色為紅色
???ID選擇器
HTML標簽中ID的屬性值在一個頁面中必須是唯一的。
ID選擇器是可以幫助我們選擇當前頁面中唯一id值的標簽，也就是根據標簽的id屬性值進行選取設置樣式。ID選擇器的的符號是#號。
???類選擇器
類選擇器就是選取頁面中所有標簽的class屬性值相同的一類標簽。
類選擇器的符號是： . ?(點)
???ID選擇器和class選擇器的區別
1、相同的Class屬性值，可以在HTML中出現多次。ID屬性值在頁面中只能出現一次。
2、一個class的屬性可以有多個值，也就是說一個標簽可以有多個類。
建議大家盡量使用類選擇器。使用ID時候情況：當確實能唯一確定當前頁面中標簽只會出現一次，這時候可以使用ID選擇器。
???復合選擇器-標簽指定式選擇器
標簽指定式復合選擇器，要求必須是標簽開頭然后其他選擇器。
比如：h3.demo {} ,需要同時滿足既是標簽h3又擁有demo類才能被選擇到。
注意：使用非常少，一般不用。要么直接用id選擇器，要么直接用類選擇器。
???后代選擇器
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代。
后代不僅僅包括兒子，還包括子子孫孫。
???子代選擇器
子代選擇器，是讓CSS選擇器智能選擇兒子輩的元素。
????例如：h1 > strong {color:red;}
?????解讀為：選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”。
尖括號和選擇器之間可以有空格也可以沒有，沒有限制。
建議:選擇器和尖括號間有空格。
????屬性選擇器
屬性選擇器就是根據html標簽的屬性進行過濾選擇。
常見的幾種方式：
?h1[id] { color: red; }
設置包含id屬性的h1標簽的字體為紅色。
?
/*把擁有id和class屬性的h1標題選出來然后設置字體大小為17px*/
h1[id][class] { font-size: 17px; }
?
input[type="text"] { background-color: purple; }
設置擁有type屬性并且屬性值是text的input標簽的背景為紫色。
????偽類選擇器
:link
偽類將應用于未被訪問過的鏈接。IE6不兼容，解決此問題，直接使用a標簽。
:hover
偽類將應用于有鼠標指針懸停于其上的元素。在IE6只能應用于a連接，IE7+所有元素都兼容。
:active
偽類將應用于被激活的元素，如被點擊的鏈接、被按下的按鈕等。
:visited
偽類將應用于已經被訪問過的鏈接
:focus
偽類將應用于擁有鍵盤輸入焦點的元素。
順序問題：LoVe ?HAte原則。
????偽元素選擇器
偽元素 是控制內容
:first-line?偽元素 ?第一行
:first-letter 偽元素 ?第一個字
注釋：以上兩個偽元素只能用于塊級元素
:first-child?偽元素，選擇屬于第一個子元素的元素。
例如：span:first-child{} ?/*選擇屬于第一個子元素的所有span標簽。*/
:before與:after偽元素，可以設置元素之前后之后的 內容，并且配合content設置相關內容。比如： ??#demo:after,#demo:before { ?content:"--";display:block; }
注意：content屬性只能跟 偽元素:before 和:after共用。
Display:block.?是設置標簽為塊級元素，獨占行。
?
CSS的特性
???CSS的層疊性
CSS的層疊性，也就是說后來設置的樣式會層疊（覆蓋）之前的樣式，層疊性的前提示CSS的選擇器的優先級相同。
???CSS的繼承性
CSS的繼承性是指，子容器的樣式會繼承父容器的樣式。但并不是所有的樣式都能繼承。只有部分樣式能繼承，比如：文字相關字體大小、顏色、字體樣式、行高、鼠標樣式等。盒子相關的樣式都不能繼承，比如：寬高、背景色、邊距、浮動、絕對定位等。
???CSS的特殊性（優先級）
CSS的特殊性，定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，那么誰的優先級更高呢，這就是CSS的特殊性。
比較CSS的優先級的時候：
1、首先比較行內樣式，行內樣式優先級最高。如果嵌入樣式和行內樣式同時設置樣式時，行內樣式優先級最高。
2、其次是內嵌樣式的優先級比較：
內嵌樣式的，ID選擇器對應的樣式優先級最高。
其次是Class樣式
再次是標簽選擇器樣式，
再次是通配符選擇器設置的樣式
后面是 繼承的樣式，
??????????最后是瀏覽器默認的樣式。
結論一：繼承的樣式要大于默認的樣式
結論二：通配符選擇器的樣式的優先級比繼承樣式的優先級要高。
結論三：標簽的選擇器的優先級要高于通配符選擇器的優先級。
結論四：類選擇器的樣式的優先級要高于?標簽選擇器的樣式的優先級。
結論五：id選擇器的優先級高于 類選擇器的優先級
結論六：行內樣式的選擇器的優先級高于 ?id選擇器的優先級。
????復合選擇器的樣式優先級核算：
復合選擇器?的優先級根據四個層次來算，首先是行內最高。
其次，比較所有的id選擇器的個數，個數多的為高。
再次比較類選擇器的個數，個數多的為高，
最后比較標簽選擇器的個數，個數多的為高。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
