CSS（cascading style sheet,層疊式樣式表）是用來(lái)給HTML標(biāo)簽設(shè)置樣式的語(yǔ)言。
一、傳統(tǒng)CSS2.1選擇器
(一)標(biāo)簽選擇器和id選擇器
標(biāo)簽選擇器也稱元素選擇器、類型選擇器。它直接使用元素的標(biāo)簽當(dāng)做選擇器，將選擇頁(yè)面上所有該種標(biāo)簽。
(1)標(biāo)簽選擇器將選擇頁(yè)面上所有該種標(biāo)簽，無(wú)論這個(gè)標(biāo)簽所處位置的深淺。
(2)標(biāo)簽選擇器“覆蓋面”大，所以通常用于標(biāo)簽的初始化
ul{
list-style:none;/***去掉無(wú)須列表的小圓點(diǎn)***/
}
a{
text-decoration: none; /***去掉超鏈接的下劃線***/
}
標(biāo)簽可以有id屬性，是這個(gè)標(biāo)簽的唯一標(biāo)識(shí)
id名稱只能由字母、數(shù)字、下劃線、短橫構(gòu)成，且不能以數(shù)字開頭，字母區(qū)分大小寫。
<p id="p-style">為中華崛起而讀書</p>
#p-style {
font-size: 24px;
color: chartreuse;
}
(二)class選擇器
class屬性表示“類名”
class命名規(guī)范和id命名規(guī)范相同。使用點(diǎn).類名選擇指定class的標(biāo)簽。
同一個(gè)標(biāo)簽可以同時(shí)屬于多個(gè)類，類名用空格隔開。
<p class="warning spec">這是一個(gè)警告</p>
.warning{
color: red;
}
.spec{
font-style:italic /*文字傾斜*/
}
原子類：在制作網(wǎng)頁(yè)項(xiàng)目前，可以將所有的常用字號(hào)、文字顏色、行高、外邊距、內(nèi)邊距等都設(shè)置為單獨(dú)的類
(三)復(fù)合選擇器
復(fù)合選擇器主要有三類
1.后代選擇器例如：.box .spec 選擇類名為box的標(biāo)簽內(nèi)部的類名為spec的標(biāo)簽
CSS選擇器中，使用空格表示"后代"
"后代"并不一定是"兒子"，還包括"孫子，曾孫"
后代選擇器通過(guò)很多空格，隔開好幾代
.box ul li .spec em{
color: red
}
<div class="box">
<ul>
<li><p class="spec">我是一個(gè)段落<em>紅色文字</em><p></li>
</ul>
</div>
2.交集選擇器例如：li.spec 選擇既是li標(biāo)簽，也屬于spec類的標(biāo)簽
3.并集選擇器例如：ul,ol 選擇所有ul和ol標(biāo)簽
并集選擇器也叫做分組選擇器，逗號(hào)表示分組
ul,ol{
list-style:none
}
(四)偽類
偽類是添加到選擇器的描述性詞語(yǔ)，
指定要選擇的元素的特殊狀態(tài)。
超級(jí)鏈接擁有四個(gè)特殊狀態(tài)
a:link沒(méi)有被訪問(wèn)的超級(jí)鏈接
a:visited已經(jīng)被訪問(wèn)的超級(jí)鏈接
a:hover 正鼠標(biāo)懸停的超級(jí)鏈接
a:active正被激活的超級(jí)鏈接 (按下按鍵但是還沒(méi)有松開按鍵)
a標(biāo)簽的偽類書寫，要按照"愛恨準(zhǔn)則"的順序，否則會(huì)有偽類不生效
:link->:visited->:hover->:active
a:link {
color: rgb(84, 6, 241)
}
a:visited {
color: rgb(194, 244, 66);
}
a:hover {
background-color: crimson;
}
a:active {
font-size: 24px;
}
<p> <a target="_blank">網(wǎng)易</a> </p>
<p> <a > 京東 </a> </p>
二、CSS3新增選擇器
(一)元素關(guān)系選擇器
1.子選擇器div>p:div的子標(biāo)簽p
當(dāng)使用
>符號(hào)分隔兩個(gè)元素時(shí)，它只會(huì)匹配那些作為第一個(gè)元素的直接后代元素，即兩個(gè)標(biāo)簽為父子關(guān)系。.box>p{...}
后代選擇器不一定限制時(shí)子元素.box p{...}
2.相鄰兄弟選擇器img+p:圖片后面緊跟著的段落將被選中
相鄰兄弟選擇器
+介于兩個(gè)選擇器之間，當(dāng)?shù)诙€(gè)元素緊跟在第一個(gè)元素之后，并且兩個(gè)元素都是屬于同一個(gè)父元素的子元素，則第二個(gè)元素將被選中。img+span 就是選擇"緊跟在后面的一個(gè)span"
3.通用兄弟選擇器p~span:p元素之后的多有同層級(jí)span元素
(二)序號(hào)選擇器
- :first-child
表示"選擇第一個(gè)子元素"，比如下面的例子就表示選擇.box1盒子中的第一個(gè)p
.box1 p:first-child{color:red;}
- :last-child
表示"選擇最后一個(gè)子元素"，比如后例就表示選擇.box1盒子最后一個(gè)p.
.box1 p:last-child{color:red;}
3.:nth-child()
:nth-child()可以選擇任意序號(hào)的子元素
.box2 p:nth-child(3){color:green;}
:nth-child()可以寫成an+b的形式，表示從b開始每個(gè)a個(gè)選一個(gè)，注意不能攜程b+an。
.box2 p:nth-child(3n+2){color:green}
2n+1等價(jià)于odd表示奇數(shù)，2n等價(jià)于even，表示偶數(shù)
4.:nth-of-type()
選擇同種標(biāo)簽指定序號(hào)的子元素.
.box4 p:nth-of-type(3){color:blue;}
5.：nth-last-child()和:nth-last-of-type() 都是倒數(shù)選擇
(三)屬性選擇器
img[alt]:選擇有alt屬性的img標(biāo)簽
img[alt="太陽(yáng)"]：選擇alt屬性是太陽(yáng)的img標(biāo)簽
img[alt^=''成都"]：選擇alt屬性以成都開頭的 img標(biāo)簽
img[alt$=''夜景"]: 選擇alt屬性以夜景結(jié)尾的img標(biāo)簽
img[alt*="美"]： 選擇alt屬性中含有美字的img標(biāo)簽
img[alt~="手機(jī)攝影"]： 選擇alt屬性中有空格隔開的手機(jī)拍攝字眼的img標(biāo)簽
img[alt|="參賽作品"]： 選擇有alt屬性以“參賽作品”開頭的img標(biāo)簽
用得少。
(四)CSS3新增偽類
empty選擇空標(biāo)簽
focus選擇當(dāng)前獲得焦點(diǎn)的表單元素
enabled選擇當(dāng)前有效的表單元素
disabled選擇當(dāng)前無(wú)效的表單元素
checked選擇當(dāng)前已經(jīng)勾選的單選按鈕或則復(fù)選框
root選擇根元素，即<html>標(biāo)簽
(五)偽元素
css3新增“偽元素”特性，表示虛擬動(dòng)態(tài)創(chuàng)建的元素。偽元素用雙冒號(hào)表示。
::before創(chuàng)建一個(gè)偽元素，其將成為匹配選中的，必須設(shè)置
content屬性表示其中的內(nèi)容。
::after創(chuàng)建一個(gè)偽元素，其將成為匹配選中的，必須設(shè)置
content屬性表示其中的內(nèi)容。
<body>
<p><a href="">我是超鏈一</p>
<p><a href="">我是超鏈二</p>
</body>
<style>
a::before {
content: '@'
}
a::after {
content: '*'
}
</style>
::selectioncss偽元素應(yīng)用于
::first-letter會(huì)選中某元素中（必須是塊級(jí)元素）第一行的第一個(gè)字母
::first-line會(huì)選中某元素中（必須是塊級(jí)元素）第一行的全部文字
三、層疊性和選擇器權(quán)重計(jì)算
層疊性：
層疊性的沖突處理:
復(fù)雜選擇器可以通過(guò)的形式，計(jì)算權(quán)重
需要將某個(gè)選擇器的某條屬性提升權(quán)重，可以再屬性后面添加
四、常用文本樣式屬性
(一）color屬性
color屬性可設(shè)置.可以使用英語(yǔ)單詞、十六進(jìn)制、rgb()、rgba()等表示法
1.通常使用十六進(jìn)制表示
color:#ff0000;
2.rgba()表示法：最后一個(gè)參數(shù)表示透明度，介于0-1之間，0表示純透明，1表示純實(shí)心。color:rgba(255,0,0,.65)
(二)font-size屬性
font-size屬性用來(lái)設(shè)置字號(hào)，通常使用px、em、rem為單位，例如： font-size:30px
(三)font-weight
font-weight屬性設(shè)置字體的粗細(xì)程度，通常就用normal和bold兩個(gè)值
font-weight:normal正常粗細(xì)，與400等值
font-weight:bold加粗，與700等值
font-weight:normal更細(xì)，大多數(shù)中文字體不支持
font-weight:normal更粗，大多數(shù)中文字體不支持
(三)font-style屬性
font-style屬性設(shè)置字體的傾斜
font-style:normal取消傾斜，可以把天生傾斜的i、em等標(biāo)簽設(shè)置為不傾斜
font-style:italic設(shè)置為傾斜字體（常用）
font-style:oblique設(shè)置為傾斜字體（用常規(guī)字體模擬，不常用）
(四)text-decoration屬性
text-decoration:none;沒(méi)有修飾線
text-decoration:underline;下劃線
text-decoration:line-through;刪除線
text-decoration屬性用于設(shè)置文本的修飾線外觀（下劃線、刪除線）
五、字體屬性詳解
(一)font-family屬性
font-family用于設(shè)置字體.font-family:"微軟雅黑"
1.字體可以是列表形式，一般英語(yǔ)字體放到前面，后面的字體是前面的“后備字體”
font-family:serig,"Times New Roman","微軟雅黑"；
2.中文字體也可以使用他們的英語(yǔ)名字表示："微軟雅黑"="microsoft Yahei","宋體"="Simsun"
3.為保證通用性，字體。為了用戶瀏覽器正常使用我們自定義的字體，需要保證用戶加載網(wǎng)頁(yè)的時(shí)候，同時(shí)下載字體文件。
4.字體文件根據(jù)操作系統(tǒng)和瀏覽器的不同，有eot、woff2、woff、ttf、svg文件格式。
（二）定義字體
@font-face定義字體
<style>
@font-face{
font-family:"字體名稱"；
font-display:swap;
src:url("eot字體文件位置")；
src:url("eot字體文件位置") format("embedded-opentype"),
src:url("woff2字體文件位置") format("woff2"),
src:url("woff字體文件位置") format("woff"),
src:url("ttf字體文件位置") format("truetype"),
src:url("svg字體文件位置") format("svg")
}
</style>
六、段落和行相關(guān)屬性
(一)text-indent屬性
text-indent定義首行文本內(nèi)容之前的縮進(jìn)量?？s進(jìn)兩個(gè)字符text-indent:2em;
(二)line-height屬性
line-height屬性定義行高。
行高字面意思是一行文本的高度，行內(nèi)居中文本的行高上下間隙應(yīng)該是一致的。 行高測(cè)量定義可以是：上一行文本頂部到下一行文本頂部的縱向距離；也可以是上一行文本底部到下一行文本底部的縱向距離。
1.line-height屬性的可以是以px為單位的數(shù)值
line-height：30px；
2.line-height屬性也可以是沒(méi)有單位的數(shù)值，
line-height：1.5；
2.line-height屬性也使用百分?jǐn)?shù)
line-height：150%；
(三)單行文本居中
設(shè)置，就可以實(shí)現(xiàn)當(dāng)行文本垂直居中
設(shè)置,實(shí)現(xiàn)文本水平居中。
(四)font合寫屬性
font屬性可以用來(lái)作為font-style,font-weight,font-size,line-height,font-family屬性的合寫
font:20px/1.6 Arial,"微軟雅黑"；
七、繼承性
文本相關(guān)的屬性普遍具有繼承性，只需要給祖先標(biāo)簽設(shè)置，即可在后臺(tái)所有標(biāo)簽中生效。
color、font-開頭、list-開頭、text-開頭、line-開頭、
因?yàn)槔^承性，所以通常設(shè)置等， 即可設(shè)置整個(gè)網(wǎng)頁(yè)的默認(rèn)樣式。
