筆記 CSS的三大特性和css元素顯示模式

2021-10-07 18:04:30 字數 2382 閱讀 8514

相同選擇器給設定相同的樣式,此時乙個樣式就會覆蓋(層疊)另乙個衝突的樣式。 層疊性主要解決樣式衝突的問題

層疊性原則:

div

div

先給div背景顏色設定成黑色,後設定成橙色。因為div離設定成橙色這個樣式近,所以最終div會顯示成橙色子標籤會繼承父標籤的某些樣式,如文字顏色和字型大小(text- , font- , line-這些元素開頭的可以繼承,以及color屬性)

案例:

我是子標籤,沒有設定樣式,但是

父標籤設定了,所以我繼承後字型變大變紫了

效果顯示:

繼承中的特殊情況——行高的繼承

body

當同乙個元素指定多個選擇器

如下:

"new">

這時就會有乙個原則告訴我們,到底該選擇誰,因此也就會有優先順序的產生。

選擇器權重大小如下表所示:

選擇器選擇器權重

繼承 或 *

0,0,0,0

元素選擇器

0,0,0,1

類選擇器 ,偽類選擇器

0,0,1,0

id選擇器

0,1,0,0

行內樣式 style=「 」

1,0,0,0

!important

無窮大因此在上述**中,div是元素選擇器,.new是類選擇器。類選擇器的權重大於元素選擇器,所以最後顯示效果為橙色。

優先順序注意事項:

"father">

我會變藍

儘管id選擇器的權重較大,但是p繼承過來的權重過來的權重是0,所以p標籤會執行自己設定的樣式,最終結果是藍色。

/所以以後我們看標籤到底執行那個樣式,就先看這個標籤有沒有直接被選出來/

權重疊加

如果是復合選擇器,則會有權重疊加,需要計算權重

"new">

注意權重會疊加,但永遠不會有進製什麼是元素顯示模式?

元素顯示模式就是元素(標籤)以什麼樣的方式顯示

比如div,它的顯示方式就是自己獨佔一行,而span標籤,一行卻可以放多個。

在網頁中有許許多多的標籤,不同的地方會用到不同的標籤,了解它們的特點能有利幫助我們布局。

常見的塊元素有~、、、

不可以把我放p裡面

/*此種方法是錯誤的*/常見的行內元素有、、、、 、 、等 ,其中標籤是最典型的行內元素。

特點:行內元素中有一些特殊標籤,它們同時具有塊元素和行內元素特點,比如

特點:

input為例:

'text'>

'text'>

顯示效果:

在一些情況下,一種模式的元素需要另外一種模式的元素的特性,這時我們就需要轉換元素顯示模式。比如我們想要給行內元素設定寬和高,這就需要把轉換成塊元素。

轉換為塊元素display: block;

"#">我是行內元素,本來不能設定高度

"#">我是行內元素,但是轉換成了塊元素

效果顯示:

2. 轉換為行內元素diaplay: inline;

3.轉換為行內塊元素display: inline-block

CSS基礎 CSS 三大特性 學習筆記

css層疊性最後的執行口訣 長江後浪推前浪,前浪死在沙灘上。簡單的理解就是 子承父業。css繼承性口訣 龍生龍,鳳生鳳,老鼠生的孩子會打洞。1 權重計算公式 關於css權重,我們需要一套計算公式來去計算,這個就是 css specificity 特殊性 標籤選擇器 計算權重公式 繼承或者 0,0,0...

CSS三大特性(學生筆記)

1 遵守就近原則1 css優先順序就是css樣式在瀏覽器中解析的順序 2 css優先順序的演算法 優先順序就近原則,同權重情況下樣式定義為近者為準 載入樣式以最後載入的定位為準 3 內聯樣式 id 類 標籤 繼承 important的優先順序最高 用法 color pink important 4 ...

CSS三大特性

css三大特性 1.繼承性 作用 子元素可以繼承父元素的樣式 text font line 這些元素開頭的都可以繼承,以及color屬性 特殊性 1 a標籤的字型顏色不能繼承,必須對a標籤自定義字型顏色才能修改 2 h1 h6標籤的字型大小不能繼承,必須對標籤自身修改字型大小才有效。我是div1中的...