CSS 樣式表的分類以及選擇器的分類

2022-09-15 05:12:08 字數 1585 閱讀 7176

樣式表,css:層疊式樣式表

style

字尾名:css

1、樣式表分類

(1)內聯樣式【優先順序最高】【常用】【**重複使用性最差】

(當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 css 屬性。)

(2)內嵌樣式表【優先順序第二】【最不常用】【**重複使用性一般】

(當單個檔案需要特別樣式時,就可以使用內嵌樣式表。你可以在 head 部分通過 標籤定義內部樣式表。)

(3)外部樣式表【優先順序最低】【最常用】【**重複使用性最好】

(當樣式需要被應用到很多頁面的時候,外部樣式表將是理想的選擇。使用外部樣式表,你就可以通過更改乙個檔案來改變整個站點的外觀。)

1、先建立乙個樣式表

2、然後在引入樣式表

3、寫入樣式表內容,調整樣式表位置

2、樣式表選擇器

每一條css樣式定義由兩部分組成,形式如下:

選擇器 

外部樣式表只是說**寫在**而「選擇器」指明了{}中的「樣式」的作用物件,也就是「樣式」作用於網頁中的哪些元素。

(1)類別選擇器( class選擇器)【第二優先順序】【最常用】

前面以"." 來標誌,如:

.d1color:red;

在html頁中:

文字    文字顏色為紅色

文字      文字顏色為紅色 

定義了乙個class類,將樣式應用到了元素中。               

(2)id選擇器【第一優先順序】【最常用】

前面以"#"來標誌,如:

#d2color:blue;

在html頁中:

文字     文字顏色變為藍色     【id選擇器優先順序高於類別選擇器】

(3)標籤選擇器(根據標籤名選擇)【第三優先順序】【如果同時出現類別選擇器和id選擇器,按照優先順序來及執行】【最不常用】

前面以"標籤名"來標誌,如:

divcolor:red;

在html頁中:

文字文字顏色變為紅色    

(4)復合選擇器【有id第一優先順序/都是類別選擇器第二優先順序】【最最常用】

[1]群組選擇器

當幾個元素樣式屬性一樣時,可以共同呼叫乙個宣告,元素之間用逗號分隔。

.d1,#d2

color:red;

在html頁中:

文字    文字顏色為紅色

文字      文字顏色為紅色 

使用群組選擇器,將會大大的簡化css**,將具有多個相同屬性的元素,合併群組進行選擇,定義同樣的css屬性,這大大的提高了編碼效率,同時也減少了css檔案的體積。

[2]後代選擇器

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

.d1 #d2

backgroundcolor red;

在html頁中:

文字     此

的背景色會變成紅色 

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

css樣式表 樣式表分類 選擇器

一 樣式表分三類 1.內聯樣式表。放在元素的開始標記中。只對當前元素起作用。例 結果 2.內嵌樣式表。放在頁面的中間。可以對整個頁面。你好 執行結果 3.外部樣式表。放在乙個單獨的.css樣式表檔案中。可以對整個 操作 新建乙個css檔案,用來存放樣式表 在html中呼叫樣式表,要在html中右鍵 ...

CSS樣式表基礎知識 樣式表的分類及選擇器

一 css基本概念 css cascading style sheet,疊層樣式表 作用是美化html網頁。注釋區域 此為注釋語法 二 樣式表的分類 1 內聯樣式表 和html聯合顯示,控制精確,但是可重用性差,冗餘多 例 內聯樣式表 以上就是乙個簡單的內聯樣式表,用在中的標籤中,相當於style附...

CSS樣式表與選擇器

html解題思路 1 先大致寫出html框架,即定義內容部分。2 然後根據需要寫對應的css樣式,即定義表現部分。3 根據需要可將css檔案定義在外部,用鏈結樣式表或匯入樣式表將外部css檔案引入到當前頁面,實現了表現與內容的分離。css樣式選擇器分類 1 標籤選擇器。2 類選擇器。3 id選擇器。...