一，樣式表分類

（1）內(nèi)聯(lián)樣式。 --優(yōu)先級最高，代碼重復使用最差。

（當特殊的樣式需要應用到單獨某個元素時，可以使用。 直接在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。）

（2）內(nèi)嵌樣式表。 --優(yōu)先級別第二，不常用，代碼重用性一般。

（當單個文件需要特別樣式時可以使用內(nèi)嵌樣式表。在 head 部分通過 <style> 標簽定義內(nèi)部樣式表。）

（3）外部樣式表。 -- ?優(yōu)先級最低，最常用，代碼重用性最高。

（當樣式需要被應用到很多頁面的時候，可以使用。使用外部樣式表可以關聯(lián)多個元素或者文件。）

1、先創(chuàng)建一個樣式表

2、寫入樣式表內(nèi)容，調(diào)整樣式表位置

二。選擇器

每一條css樣式定義由兩部分組成，形式如下： 選擇器 { 屬性 } ? 在{}之前的部分就是“選擇器”。 “選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。

選擇器是選擇器，外部樣式表只是代碼位置

（1）類別選擇器（ class選擇器）

前面以"." 來標志，如：

.d1

{

color：red；

}

在HTML頁中：

<div class="d1";>文字</div> ? ?文字顏色為紅色

<p class="d1";>文字</p> ? ? ?文字顏色為紅色 ?

定義了一個class類，將樣式應用到了元素中。 ? ? ? ? ? ? ? ?

（2）id選擇器 ?優(yōu)先級最高

前面以"#"來標志，如：

#d2

{

color:blue;

}

在HTML頁中：

<div class="d1" id="d2">文字</div> ? ? 文字顏色變?yōu)樗{色 ? ? id選擇器優(yōu)先級高于類別選擇器

（3）標簽選擇器（根據(jù)標簽名選擇）如果同時出現(xiàn)類別選擇器和id選擇器，按照優(yōu)先級來及執(zhí)行。最不常用

前面以"標簽名"來標志，如：

div

{

color：red；

}

在HTML頁中：

<div>文字<div> ? ? ?文字顏色變?yōu)榧t色 ? ??

（4）復合選擇器 。有id第一優(yōu)先級/都是類別選擇器第二優(yōu)先級。最常用

?[1]群組選擇器

當幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔。

.d1,#d2

{

color:red;

}

在HTML頁中：

<div class="d1";>文字</div> ? ?文字顏色為紅色

<p id="d2";>文字</p> ? ? ?文字顏色為紅色 ?

使用群組選擇器，將會大大的簡化CSS代碼，將具有多個相同屬性的元素，合并群組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS文件的體積。

[2]后代選擇器

后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。

.d1 #d2

{

color:blue;

}

在HTML頁中：

<div class="d1" id="d2">文字</div> ? ? 文字顏色變?yōu)樗{色 ??

后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。

轉載于:https://www.cnblogs.com/big-lll/p/6648518.html

總結

以上是生活随笔為你收集整理的css 层叠式样式表（2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。