相同選擇器給設定相同的樣式,此時乙個樣式就會覆蓋(層疊)另乙個衝突的樣式。 層疊性主要解決樣式衝突的問題
層疊性原則:
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中的...