網(wǎng)站建設(shè)網(wǎng)站需要什么日照高端網(wǎng)站建設(shè)
主線程遍歷得到的 DOM 樹(shù),依次為樹(shù)中的每個(gè)節(jié)點(diǎn)計(jì)算出它最終的樣式,稱之為 Computed Style。
通過(guò)前面生成的DOM 樹(shù)和 CSSOM 樹(shù),遍歷 DOM 樹(shù),為每一個(gè) DOM 節(jié)點(diǎn),計(jì)算它的所有 CSS 屬性,最后會(huì)得到一棵帶有樣式的 DOM 樹(shù)–也叫“渲染樹(shù) Render Tree”
可在控制臺(tái)查看樣式計(jì)算
屬性值的計(jì)算過(guò)程
1、確定聲明值
聲明值就是 “自己所書寫的 CSS 樣式+瀏覽器內(nèi)置的樣式表” 相加得到全部的聲明值,并且將部分值進(jìn)行轉(zhuǎn)換
如:color: red;
轉(zhuǎn)換為`color: rgb(255, 0, 0);
? font-size: 2em;轉(zhuǎn)換為
font-size: 14px;`。
2、層疊沖突
在確定聲明值時(shí),聲明的樣式規(guī)則發(fā)生了沖突,解決沖突,下面這三個(gè)步驟:
(一)比較源的重要性
樣式有三種來(lái)源:
1. 瀏覽器默認(rèn)樣式(用戶代理樣式):瀏覽器會(huì)有一個(gè)基本的樣式表來(lái)給任何網(wǎng)頁(yè)設(shè)置默認(rèn)樣式
2. 網(wǎng)頁(yè)設(shè)計(jì)者定義的樣式(頁(yè)面作者樣式):即外聯(lián)樣式、內(nèi)部樣式、style行內(nèi)樣式等
3. 控制臺(tái)調(diào)試樣式(用戶樣式):瀏覽器的用戶在開(kāi)發(fā)者模式里使用自定義樣式表定制使用體驗(yàn)
對(duì)應(yīng)的重要性順序依次為:網(wǎng)頁(yè)設(shè)計(jì)者定義的樣式 > 用戶樣式 > 瀏覽器默認(rèn)樣式
(二)比較優(yōu)先級(jí)–權(quán)重
如果在同一源中出現(xiàn)了樣式聲明沖突,則比較其優(yōu)先級(jí)。
權(quán)重的等級(jí)
!important,權(quán)重最大,會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。
內(nèi)聯(lián)樣式,寫在標(biāo)簽中的,權(quán)重為1000
ID選擇器,權(quán)重為0100
類、偽類、屬性選擇器,權(quán)重為0010
標(biāo)簽、偽元素選擇器,權(quán)重為0001
通配符、子選擇器、相鄰選擇器等,權(quán)重為0000
我手寫了計(jì)算權(quán)重的方法:
案例1
<ul id="nav" class="nav"><li class="active" id="bb"><a href=""></a></li>
</ul>ul#nav li.active a 權(quán)值為(0,1,1,3);`ul li.active a` 權(quán)值為(0,0,1,3);---一個(gè)偽類,三個(gè)標(biāo)簽`ul.nav li.active a` 的權(quán)值為(0,0,2,3);`
如是行內(nèi)樣式(內(nèi)聯(lián)樣式),權(quán)值為(1,0,0,0) ;某項(xiàng) CSS 屬性后面帶 `!important` 時(shí),權(quán)值最大。
案例2
都是設(shè)置文字顏色,應(yīng)該以哪個(gè)為主?
<!DOCTYPE html>
<html lang="en">
<head> <style>/* 權(quán)重 0,0,1,1 */.nav a {color: red;}/* 權(quán)重 0,0,1,0 */.blog {color: yellow;}/* 權(quán)重 0,0,2,0 */.nav .blog {color: blue;}</style>
</head>
<body><div class="nav"><a href="" class="blog">java</a><a href="">python</a><a href="">css</a><a href="">ruby</a></div>
</body>
</html>
分析:
0011>0010 以紅色為主
0020>0011 以藍(lán)色為主
案例3
<!DOCTYPE html>
<html lang="en">
<head><style>a{color: yellow;} /*權(quán)重:0,0,0,1*/div a{color: green;} /*權(quán)重:0,0,0,2*/.demo a{color: black;} /*權(quán)重:0,0,1,1*/.demo input[type="text"]{color: blue;} /*權(quán)重:0,0,2,1*/.demo *[type="text"]{color: grey;} /*權(quán)重:0,0,2,0*/#d1 a{color: orange;} /*權(quán)重:0,1,0,1*/div#d1 a{color: red;} /*權(quán)重:0,1,0,2*/</style>
</head>
<body><a href="">第一</a> <div class="demo"><input type="text" value="第二" /><a href="">第三</a></div><div id="d1"><a href="">第四</a></div>
</body>
</html>
分析:
#d1 a和div#d1 a 設(shè)置相同的屬性,但0101<0102 以紅色為主
(三)比較次序----重要:如權(quán)重值相同,“就近原則”
后聲明的樣式會(huì)覆蓋先聲明的樣式。
p{/* 會(huì)被覆蓋 */color: yellow;
}p{ color: green;
}
3、使用繼承
對(duì)于每一個(gè) DOM 節(jié)點(diǎn),都會(huì)去計(jì)算它的所有 CSS 屬性。
對(duì)于未聲明的屬性,并不是直接使用默認(rèn)值,而是使用繼承值。
<div><p>java</p>
</div>
div{color: red;
}
這里<p>
標(biāo)簽會(huì)繼承來(lái)自<div>
的color: red
樣式。
繼承原則:
- 就近原則,誰(shuí)近就繼承誰(shuí)的,與權(quán)重?zé)o關(guān)。
- 大部分字體相關(guān)的屬性都是可繼承的
4、使用默認(rèn)值
如果最后仍不能確定屬性值,則使用瀏覽器默認(rèn)值。