CSS
層疊樣式表 (Cascading Style Sheets)
?css可以用來為網(wǎng)頁創(chuàng)建樣式表，通過樣式表可以對網(wǎng)頁進行裝飾。所謂層疊你画，可以將整個網(wǎng)頁想象成是一層
一層的結(jié)構(gòu)，層次高的將會覆蓋層次低的锭硼。
? 而css就可以分別為網(wǎng)頁的各個層次設(shè)置樣試旧巾。
基本語法
CSS的樣式表由一個一個的樣式構(gòu)成耸序，一個樣式又由選擇器和聲明塊構(gòu)成。
選擇器 {樣式名:樣式值鲁猩；樣式名:樣式值 ; }
– p {color:red ; font-size:12px;}
行內(nèi)樣式
可以直接將樣式寫到標簽內(nèi)部的style屬性
中坎怪，這種樣式不用填寫選擇器，直接編寫
聲明即可廓握。<p style="color: red;font-size: 30px"></p>這種方式編寫簡單搅窿，定位準確。但是由于
直接將css代碼寫到了html標簽的內(nèi)部隙券，導
致結(jié)構(gòu)與表現(xiàn)耦合男应，同時導致樣式不能夠
復用，所以這種方式我們不使用娱仔。
內(nèi)部樣式表
可以直接將樣式寫到<style>標簽中
<style>
? ??p{color:red; font-size: 30px;}
</style>
這樣使css獨立于html代碼沐飘，而且可以同時為
多個元素設(shè)置樣式，這是我們使用的比較多的
一種方式牲迫。但是這種方式耐朴，樣式只能在一個頁面中使用，不能在多個頁面中重復使用恩溅。
外部樣式表
可以將所有的樣式保存到一個外部的css文
件中隔箍，然后通過<link>標簽將樣式表引入
到文件中。
<link rel="stylesheet" type="text/css"
href="style.css">
這種方式將樣式表放入到了頁面的外部脚乡，
可以在多個頁面中引入蜒滩，同時瀏覽器加載
文件時可以使用緩存，這是我們開發(fā)中使
用的最多的方式奶稠。
選擇器
選擇器（selector）俯艰，會告訴瀏覽器：網(wǎng)頁 上的哪些元素需要設(shè)置什么樣的樣式。
比如：p這個選擇器就表示選擇頁面中的所 有的p元素锌订，在選擇器之后所設(shè)置的樣式會 應(yīng)用到所有的p元素上竹握。
元素選擇器
元素選擇器（標簽選擇器），可以根據(jù)標 簽的名字來從頁面中選取指定的元素辆飘。
語法：
標簽名 { }
比如p則會選中頁面中的所有p標簽啦辐，h1會 選中頁面中的所有h1標簽。
類選擇器
類選擇器蜈项，可以根據(jù)元素的class屬性值選 取元素芹关。
語法：
.className { }
比如.hello會選中頁面所有class屬性為
hello的元素。
iD選擇器
ID選擇器紧卒，可以根據(jù)元素的id屬性值選取 元素侥衬。
語法：
#id { }
比如#box會選中頁面中id屬性值為box的 元素，和class屬性不同，id屬性是不能重 復的轴总。
復合選擇器（交集選擇器）
復合選擇器直颅，可以同時使用多個選擇器， 這樣可以選擇同時滿足多個選擇器的元素怀樟。
語法：
– 選擇器1選擇器2{}
例如div.box1會選中頁面中具有box1這個
class的div元素功偿。
群組選擇器（并集選擇器）
群組選擇器，可以同時使用多個選擇器漂佩， 多個選擇器將被同時應(yīng)用指定的樣式脖含。
語法：
選擇器1,選擇器2,選擇器3 { }
比如p,.hello,#box會同時選中頁面中p元素罪塔，
class為hello的元素投蝉，id為box的元素。
通用選擇器
通用選擇器征堪，可以同時選中頁面中的所有 元素瘩缆。
語法：
*{ }
標簽之間的關(guān)系
祖先元素
直接或間接包含后代元素的元素。
后代元素
直接或間接被祖先元素包含的元素佃蚜。
父元素
直接包含子元素的元素庸娱。
子元素
直接被父元素包含的元素。
兄弟元素
擁有相同父元素的元素
后代選擇器
后代選擇器可以根據(jù)標簽的關(guān)系谐算，為處在 元素內(nèi)部的代元素設(shè)置樣式熟尉。
語法：
祖先元素 后代元素 后代元素 { }
比如p strong 會選中頁面中所有的p元素 內(nèi)的strong元素。
偽類和偽元素
有時候洲脂，你需要選擇本身沒有標簽斤儿，但是 仍然易于識別的網(wǎng)頁部位，比如段落首行 或鼠標滑過的連接恐锦。CSS為他們提供一些選 擇器：偽類和偽元素
給鏈接定義樣式
有四個偽類可以讓你根據(jù)訪問者與該鏈接的交 互方式往果，將鏈接設(shè)置成4種不同的狀態(tài)。
正常鏈接
a:link
訪問過的鏈接
a:visited（只能定義字體顏色）
鼠標滑過的鏈接
a:hover
正在點擊的鏈接
a:active
其他
獲取焦點
:focus
指定元素前
:before
指定元素后
:after
選中的元素
::selection
給段落定義樣式
首字母
:first-letter
首行
:first-line
屬性選擇器
屬性選擇器可以挑選帶有特殊屬性的標簽一铅。
語法:
[屬性名]
[屬性名="屬性值"]
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
子元素選擇器
子元素選擇器可以給另一個元素的子元素 設(shè)置樣式陕贮。
語法：
父元素 > 子元素{}
比如body > h1將選擇body子標簽中的所 有h1標簽。
其他子元素選擇器
:first-child
選擇第一個子標簽
:last-child
選擇最后一個子標簽
:nth-child
選擇指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
選擇指定類型的子元素
兄弟選擇器
除了根據(jù)祖先父子關(guān)系潘飘，還可以根據(jù)兄弟 關(guān)系查找元素肮之。
語法:
查找后邊一個兄弟元素
兄弟元素 + 兄弟元素{}
查找后邊所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
否定偽類
否定偽類可以幫助我們選擇不是其他東西 的某件東西。
語法:
:not(選擇器){}
比如p:not(.hello)表示選擇所有的p元素但 是class為hello的除外卜录。
