CSS高階特性

2021-10-01 11:38:55 字數 2752 閱讀 4602

標籤指定式選擇器

標籤指定式選擇器又稱交集選擇器,由兩個選擇器構成,其中第乙個為標記選擇器,第二個為class選擇器或id選擇器,兩個選擇器之間不能有空格

1 

3 smeta htty-equlv- "conter.t-type" content=" tex stit1e>標籤指定式選擇器的應用

7 8 p

9.spec1al

10p. special

/*標答 指定式選擇器*/

1112

1314普通段落文字(藍色)

15sp class="special">指定 了. special類的段落文字(紅色)

1617

18

後代選擇器

後代選擇器用來選擇元素或元素組的後代,其寫法就是把外層標記寫在前面,內層標記寫在後面,中間用空格分隔。當標記發生巢狀時,內層標記就成為外層標記的後代。

3 13段落文字巢狀在段落中,使用strong標記定義的文字(紅色)

14巢狀之外由strong標記定義的文字(藍色)。

15< /body>

16

並集選擇器

並集選擇器是各個選擇器通過逗號連線而成的,任何並集選擇器時各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標記選擇器、class選擇器、id選擇器等),都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同、或部分相同,就可以利用並集選擇器為他們定義顏色相同的css樣式。

"special" id="one">段落文字1

段落文字2

段落文字3

繼承性

所謂繼承性是指書寫css樣式表時,子標記會繼承父標記的某些樣式,如文字顏色和字型大小。例如,定義主體元素body的文字顏色為黑色,那麼頁面中所有的文字都將顯示為黑色,這是因為其他的標記都巢狀在標記的子標記。

繼承性非常有用,它使設計師不必在元素的每個後代上新增相同的樣式。如果設定的屬性是乙個可繼承的屬性,只需將其應用于父元素即可。到相同的控制效果,且**更簡潔。

恰當的使用繼承可以簡化**,降低css樣式的複雜性。但是,如果在網頁中所有的元素都大量繼承樣式,那麼判斷樣式的**就會很困難,所以對於字型、文字屬性等網頁中通用的樣式可以使用繼承。例如,字型、字型大小、顏色、行距等可以在body元素中統一設定,然後通過繼續影響文件中所有的文字。

並不是所有的css屬性都可以繼承,例如,下面的屬性就不具有繼承性:

1.邊框屬性

2.外邊距屬性

3.背景屬性

4.定位屬性

5.布局屬性

6.元素寬高屬性

css優先順序

為了體驗css優先順序,首先看乙個具體的例子,其css樣式**如下:

p /標記樣式/ .blue /class樣式/ #header /id樣式/ 的html結構為:

面的例子中,使用不同的選擇器對同乙個元素設定文字顏色,這時瀏覽器會根據選擇器的優先順序規則解析css樣式。其實,css為每一種基礎選擇器都分配了乙個權重,其中,標記選擇器具有權重1,類選擇器具有權重10,id選擇器具有權重100.這樣,id選擇器#header就具有最大優先順序,因此文字顯示為藍色。

對於由多個基礎選擇器構成的復合選擇器(並集選擇器除外),其權重為這些基礎選擇器選擇器權重的疊加,例如下面的css**:

p strong /權重為1+1/ strong.blue /權重為:1+10/ .father strong /權重為:10+1/ p.father strong /權重為:1+10+1/ p.father .blue /權重為:1+10+10/ #header strong /權重為:100+1/ #header strong.blue /權重為:100+1+10/ :

"father" id="header">"blue">文字的顏色

.繼承樣式的權重為0.即在巢狀結構中,不管父元素樣式的權重多大,被子元素繼承時,他的權重都為0.也就是說子元素定義的樣式會覆蓋繼承來的樣式。]例如下面的css**:

strong

#header

應的html結構為:

"header" class="blue">繼承樣式不如自己定義

.行內式優先。應用style屬性的元素,其行內式的權重非常高,可以理解為遠大於100.總之,它擁有比上面提高的選擇器都大於的優先順序。】

【3.權重相同時,css遵循就近原則。也就是說,靠近元素的樣式具有最大的優先順序,或者說排在最後的樣式優先順序最大。例如:

/css文件,檔名為style.css/ #header*/

應的html結構為:

"-//w3c//dtd xhtml 1.0 transistional.dtd"> 

"">

"content-type" content="text/html; chareat=utf-8"

/>

無標題文件

"header">權重相同時,就近有先

css定義了乙個!important命令,該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近,!important都具有最大的優先順序。

三十六 CSS高階特性

box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 1.邊框 border style solid border style ...

CSS入門 3 3 CSS高階特性

標籤指定式選擇器又稱交集選擇器,由連個選擇器構成,其中第乙個為標記選擇器,第二個為class選擇器或id選擇器,兩個選擇器之間不能有空格,如h3.special或p one.如 這是一段藍色段落文字 普通 special 指定了.special類的段落文字 綠色 後代選擇器用來選擇元素或元素組的後代...

Python高階特性

l csx sarah tracy bob jack print l 0 l 1 l 2 輸出 csx sarah tracy l 0 3 輸出 csx sarah tracy 如果第乙個索引是0,還可以省略 print l 2 輸出 bob jack print l 2 1 輸出 bob d fo...