span标签style的优先级_css样式引入优先级?
css中的優(yōu)先級(jí)講的有
1.選擇器的優(yōu)先級(jí)。
2.樣式引入的優(yōu)先級(jí)。
今天要研究的是樣式引入的優(yōu)先級(jí)。網(wǎng)上又很多答案都是如下的,但是真的是這樣的嗎,讓我們來(lái)探一探究竟是如何。
四種樣式的優(yōu)先級(jí)別是:行內(nèi)樣式最高、
?優(yōu)先級(jí)? ?內(nèi)嵌樣式>鏈接樣式>導(dǎo)入樣式?
在這四種的優(yōu)先中,行內(nèi)樣式最高(內(nèi)嵌樣式),大家都是認(rèn)可的。但剩下的3中就會(huì)是我們想的那樣嗎?
測(cè)試代碼如下。很簡(jiǎn)單,先測(cè)試內(nèi)聯(lián)樣式 。一段文本,給設(shè)置個(gè)color:red;紅色。
無(wú)標(biāo)題文檔Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?
瀏覽器顯示如下。沒(méi)什么問(wèn)題。
在接著來(lái)看看,用link的方式引入一個(gè)外部樣式。
引入方式如下。
外部樣式看下列代碼:
p{
color:blue;
}
瀏覽器顯示如下:為什么什么顯示的不是藍(lán)色?
顯示還是紅色,難道就是 ?內(nèi)聯(lián)樣式>連接樣式?接下來(lái)調(diào)換了調(diào)用的下位置。代碼如下。
瀏覽器顯示如下。
這樣瀏覽器顯示的卻是藍(lán)色,這時(shí)候我們就能看出個(gè)大概了。
優(yōu)先就是個(gè)順序解析問(wèn)題,誰(shuí)的引入樣式在前面,后面的樣式就會(huì)被覆蓋前面的樣式。也就是說(shuō),哪個(gè)樣式離標(biāo)簽越近,哪個(gè)樣式的優(yōu)先就越高。
然后接下要解決的就是@import的問(wèn)題了。
解釋是這樣:
@import既可以為頁(yè)面引入外部樣式表,也可以在一個(gè)樣式表中引入另一個(gè)樣式表。
例如:
1.@import?url("style.css");一個(gè)樣式表中引入另一個(gè)樣式表。
2.
@import?"mytest/div+css/mytest.css";
也就是用style,或者是使用外部樣式文件再去引入多個(gè)樣式文件。
第一種中,直接在style標(biāo)簽內(nèi)容中使用。@import。
另開(kāi)一個(gè)css樣式文件,代碼如下:
p{
color:yellow;
}
html代碼如下:
無(wú)標(biāo)題文檔Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?
瀏覽器顯示沒(méi)有問(wèn)題:
接著使用在使用link標(biāo)簽去測(cè)試優(yōu)先級(jí)。
先放在前面。引入代碼如下:
瀏覽器顯示看到的是還是上面講到,誰(shuí)越靠近p標(biāo)簽,就會(huì)采用誰(shuí)的樣式。有個(gè)詞叫上面來(lái)著。近水樓臺(tái)先得月。。。
在看看放在后面會(huì)如何。
瀏覽器顯示如下。
沒(méi)有什么問(wèn)題。還是一樣,近水樓臺(tái)先得月。。
四種樣式的優(yōu)先級(jí)別是:
行內(nèi)樣式最高、
內(nèi)嵌樣式 ?與 ?鏈接樣式(哪個(gè)更靠近標(biāo)簽,哪個(gè)樣式的優(yōu)先級(jí)就越高)
導(dǎo)入樣式?
@import的優(yōu)先級(jí)問(wèn)題就請(qǐng)等下篇。
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證,附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的span标签style的优先级_css样式引入优先级?的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 手机借款哪个最好通过 办理时要选择正规
- 下一篇: qt插件元数据不包含一个有效的元数据_Q