CSS樣式表

發(fā)布時間：2020-07-01 07:54:47 來源：網(wǎng)絡(luò) 閱讀：365 作者：kinrey 欄目：開發(fā)技術(shù)

CSS（Cascading Style Sheets）：層疊樣式表，又叫級聯(lián)樣式表，簡稱樣式表

CSS實(shí)現(xiàn)了將結(jié)構(gòu)與表現(xiàn)分離

提高了代碼的可重用性和可維護(hù)性

CSS與XHTML之間的關(guān)系

XHTML用于構(gòu)建網(wǎng)頁的結(jié)構(gòu)

CSS用于構(gòu)建HTML元素的樣式

XHTML是結(jié)構(gòu)，CSS樣式是表現(xiàn)

XHTML屬性與CSS樣式的使用原則

W3C建議盡量使用CSS樣式取代XHTML屬性

如果屬性為XHTML特有屬性，則使用XHTML屬性

如果屬性為CSS樣式特有屬性，則使用CSS樣式屬性

鏈接到外部CSS文件

創(chuàng)建CSS文件，并且書寫CSS規(guī)則

-CSS文件的拓展名.css

鏈接到外部CSS文件

在HTML文檔的<head>元素內(nèi)添加<link/>元素

書寫于頭部文檔中

在<head>元素內(nèi)部書寫<style>元素

在<style>元素中添加樣式規(guī)則

h2 {color:blue;}

</style>

書寫于標(biāo)記內(nèi)部

內(nèi)部CSS樣式是通過XHTML標(biāo)記的style屬性來實(shí)現(xiàn)的

CSS應(yīng)用方式的優(yōu)先級

內(nèi)聯(lián)樣式最高

內(nèi)部樣式其次

外部樣式最低

內(nèi)部樣式和外部樣式?jīng)_突的話，取決于二者的書寫順序

CSS選擇器

類型選擇器

類型選擇器也被稱為元素選擇器

類型選擇器匹配文檔樹中的特定的HTML元素

<style>
p{
text-align: left;
color: red;
}
</style>

類選擇器

類選擇器以點(diǎn)開頭，類名稱不能以數(shù)字開頭。

類選擇器匹配使用指定類的元素

類選擇器的使用通過元素的class屬性來實(shí)現(xiàn)

多個類名稱之間以空格分隔

<style>
.class{
text-align: left;
color: red;
}
<style>
span.class{
text-align: left;
color: red;
}

僅對具有class屬性的span元素生效

ID選擇器

ID選擇器以#開頭

ID選擇器匹配文檔中的唯一元素

ID選擇器的使用通過HTML元素的ID實(shí)現(xiàn)

注：某HTML元素存在ID屬性，那么該ID可以應(yīng)用于

-CSS樣式

-JavaScript

-jQuery

群組選擇器

群組選擇器是具有相同屬性的選擇器的簡寫方式

選擇器之間以逗號分隔

后代選擇器

后代選擇器也被稱為派生選擇器

依據(jù)元素在其位置的上下文關(guān)系來定義樣式

后代選擇器要求選擇器之間至少存在父子關(guān)系

選擇器之間以空格分隔

子代選擇器

依據(jù)元素在其位置的上下文關(guān)系來定義樣式

后代選擇器要求選擇器之間只能存在父子關(guān)系

選擇器之間以大于號分隔

偽類選擇器

CSS偽類用于向某些選擇器添加特殊的效果

CSS偽類選擇器的語法是：

選擇器：偽類選擇器

CSS偽類選擇器可以分為

-動態(tài)元素

-UI元素狀態(tài)偽類

動態(tài)偽類是基于HTML元素的特征進(jìn)行分類

動態(tài)偽類不能出現(xiàn)在文檔源代碼或者文檔樹

動態(tài)偽類又可以分為

-鏈接偽類

：link，適用于尚未訪問的鏈接

：visited，適用于訪問過的鏈接

-用戶動作偽類，用于呈現(xiàn)用戶操作

：hover，用戶指定HTML元素

：active，HTML元素被用戶激活

：focus，應(yīng)用于HTML元素獲取焦點(diǎn)

a:link {
color : red;
text-decoration : none;
}
a:visited{
color : black;
text-decoration : underline;
}

UI元素狀態(tài)偽類

：enabled，表示處于啟用狀態(tài)的UI元素

：disabled，表示處于禁用狀態(tài)的UI元素

：checked，表示被選定的UI元素

偽元素選擇器

CSS偽元素用于向某些選擇器設(shè)置特殊效果

：before，用于在呀un蘇的內(nèi)容前面插入新內(nèi)容

：after，用于在元素的內(nèi)容后面插入新內(nèi)容

選擇器的優(yōu)先級

選擇器類型	權(quán)值
類型選擇器	0,0,0,1
偽元素選擇器	0,0,0,1
類選擇器	0,0,1,0
偽類選擇器	0,0,1,0
ID選擇器	0,1,0,0
內(nèi)聯(lián)樣式	1,0,0,0

選擇器的權(quán)值加到一起，大的優(yōu)先；如果權(quán)值相同，后定義的優(yōu)先

向AI問一下細(xì)節(jié)

CSS樣式表

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽