什么是css？
CSS是一種用于向用戶指定文檔如何呈現(xiàn)的語(yǔ)言 — 它們?nèi)绾伪恢付邮健⒉季值取?/p>
css如何工作的构韵？
-當(dāng)瀏覽器顯示文檔時(shí)莱衩，它必須將文檔的內(nèi)容與其樣式信息結(jié)合爵嗅。它分兩個(gè)階段處理文檔：
- 瀏覽器將 HTML轉(zhuǎn)化成 DOM（文檔對(duì)象模型）。DOM在計(jì)算機(jī)內(nèi)存中表示文檔膳殷。它把文檔內(nèi)容和其樣式結(jié)合在一起操骡。
- 瀏覽器顯示 DOM 的內(nèi)容九火。]
如何在HTML里應(yīng)用css？
1.外部樣式表
將你的 CSS 保存在一個(gè)獨(dú)立的擴(kuò)展名為 .css 的文件中册招，并從HTML的 <link> 元素中引用它岔激。
<link rel="stylesheet" href="style.css">
2.內(nèi)部樣式表
將你的css放入<style>元素中，該元素包含在HTMLhead內(nèi)是掰。
3.內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是僅影響一個(gè)元素的CSS聲明虑鼎，被 style 屬性包括著。
CSS語(yǔ)句組成
從最基本的層次來看键痛，CSS是由兩塊內(nèi)容組合而成的：
- 屬性（Property）：一些人類可理解的標(biāo)識(shí)符炫彩，這些標(biāo)識(shí)符指出你想修改哪一些樣式，例如：字體，寬度杯聚，背景顏色等辈挂。
-
屬性值（Value）：每個(gè)指定的屬性都需要給定一個(gè)值，這個(gè)值表示你想把那些樣式特征修改成什么樣杉允，例如，你想把字體席里，寬度或背景顏色改成什么叔磷。
屬性和屬性值之間，用英文半角冒號(hào) (:) 隔離奖磁，如下圖所示改基。
聲明
CSS選擇器
在CSS中，選擇器用于定位我們想要樣式化的網(wǎng)頁(yè)HTML元素咖为。各種各樣可用的CSS選擇器允許我們精確選擇要樣式化的元素秕狰。
選擇器可以被分為以下類別：
- 簡(jiǎn)單選擇器（Simple selectors）：通過元素類型、class或 id 匹配一個(gè)或多個(gè)元素案疲。
- 屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個(gè)或多個(gè)元素封恰。
- 偽類（Pseudo-classes）：匹配處于確定狀態(tài)的一個(gè)或多個(gè)元素，比如被鼠標(biāo)指針懸停的元素褐啡，或當(dāng)前被選中或未選中的復(fù)選框诺舔，或元素是DOM樹中一父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。
- 偽元素（Pseudo-elements）:匹配處于相關(guān)的確定位置的一個(gè)或多個(gè)元素备畦，例如每個(gè)段落的第一個(gè)字低飒，或者某個(gè)元素之前生成的內(nèi)容。
- 組合器（Combinators）：這里不僅僅是選擇器本身懂盐，還有以有效的方式組合兩個(gè)或更多的選擇器用于非常特定的選擇的方法褥赊。例如，你可以只選擇divs的直系子節(jié)點(diǎn)的段落莉恼，或者直接跟在headings后面的段落拌喉。
- 多重選擇器（Multiple selectors）：這些也不是單獨(dú)的選擇器速那；這個(gè)思路是將以逗號(hào)分隔開的多個(gè)選擇器放在一個(gè)CSS規(guī)則下面， 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素尿背。
元素選擇器
此選擇器只是一個(gè)選擇器名和指定的HTML元素名的不區(qū)分大小寫的匹配端仰。
p {
color: red;
}
類選擇器
類選擇器由一個(gè)點(diǎn)“.”以及類后面的類名組成。類名是在HTMLclass文檔元素屬性中沒有空格的任何值田藐。
<p class = "first">This is a graph.</p>
<style>
.first{
color = red;
}
</style>
ID選擇器
ID選擇器是由一個(gè)哈希/磅符號(hào) (#)荔烧，后面跟著給定元素的ID名稱組成的。 任何元素都可以使用id屬性設(shè)置唯一的ID名稱汽久。id的名稱必須是文檔中唯一的鹤竭。
<p id="say"> — "Good morning."</p>
#say {
color = red;
}
通用選擇器
它允許選擇在一個(gè)頁(yè)面中的所有元素。用*表示景醇。
* {
padding: 5px;
border: 1px solid black;
}
屬性選擇器
這些屬性選擇器嘗試匹配精確的屬性值：
[attr]：該選擇器選擇包含 attr 屬性的所有元素臀稚，不論 attr 的值為何。
[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素三痰。
[attr~=val]：該選擇器僅選擇具有 attr 屬性的元素烁涌，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個(gè)。
子串值屬性選擇器
這種情況的屬性選擇器也被稱為“偽正則選擇器”酒觅。
[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意，這里的 “-” 不是一個(gè)錯(cuò)誤微峰，這是用來處理語(yǔ)言編碼的）舷丹。
[attr^=val] :選擇attr屬性的值以 val 開頭（包括 val）的元素。
[attr$=val] :選擇attr屬性的值以 val 結(jié)尾（包括 val）的元素蜓肆。
[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素（一個(gè)子字符串就是一個(gè)字符串的一部分而已颜凯，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）仗扬。
偽類選擇器
一個(gè)CSS偽類（pseudo-class）是一個(gè)以冒號(hào)(:)作為前綴症概，被添加到一個(gè)選擇器末尾的關(guān)鍵字，當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時(shí)早芭，你可以往元素的選擇器后面加上對(duì)應(yīng)的偽類（pseudo-class）彼城。
a類選擇
a:link 匹配所有未被點(diǎn)擊的鏈接
a:visited 匹配所有已被點(diǎn)擊的鏈接
a:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
a:hover 匹配鼠標(biāo)懸停其上的E元素
其他
:first-child 匹配作為長(zhǎng)子（第一個(gè)子女）的元素
:nth-child(n) 匹配父元素的第n個(gè)子元素退个，必須先找到父元素募壕，然后再向下找
:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素
:nth-of-type 父元素下，同種標(biāo)簽類型的第一個(gè)元素
:nth-last-type(n) 與nth-last-child(n)语盈，匹配使用同種標(biāo)簽的元素
:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素
:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素
偽元素
偽元素跟偽類很像舱馅，但它們又有不同的地方。它們都是關(guān)鍵字刀荒，但這次偽元素前綴是兩個(gè)冒號(hào) (::) 代嗤， 同樣是添加到選擇器后面去選擇某個(gè)元素的某個(gè)部分棘钞。
::after ::after用來創(chuàng)建一個(gè)偽元素，作為已選中元素的最后一個(gè)子元素干毅。
::before::after用來創(chuàng)建一個(gè)偽元素宜猜，作為已選中元素的最后一個(gè)子元素。
::first-letter第一行的第一個(gè)字母
::first-line第一行應(yīng)用樣式
組合器和選擇器組
選擇器組
A, B匹配滿足A（和/或）B的任意元素
后代選擇器
A B 匹配B元素溶锭，滿足條件：B是A的后代結(jié)點(diǎn)（B是A的子節(jié)點(diǎn)宝恶，或者A的子節(jié)點(diǎn)的子節(jié)點(diǎn)）
子選擇器
A > B 匹配B元素，滿足條件：B是A的直接子節(jié)點(diǎn)
相鄰兄弟選擇器
A + B 匹配B元素趴捅，滿足條件：B是A的下一個(gè)兄弟節(jié)點(diǎn)（AB有相同的父結(jié)點(diǎn)垫毙，并且B緊跟在A的后面）
通用兄弟選擇器
A ~ B 匹配B元素，滿足條件：B是A之后的任意一個(gè)兄弟節(jié)點(diǎn)（AB有相同的父節(jié)點(diǎn)拱绑，B在A之后综芥，但不一定是緊挨著A）
