有的小伙伴問了,如果有一種情況:對(duì)于同一個(gè)元素我們同時(shí)用了三種方法設(shè)置css樣式,那么哪種方法真正有效呢?在右邊編輯器就出現(xiàn)了這種情況
1、使用內(nèi)聯(lián)式
CSS設(shè)置“超酷的互聯(lián)網(wǎng)”文字為粉色
。
2、然后使用嵌入式
CSS來設(shè)置文字為紅色
。
3、最后又使用外部式
設(shè)置文字為藍(lán)色
(style.css文件中設(shè)置)。
但最終你可以觀察到“超酷的互聯(lián)網(wǎng)”這個(gè)短詞的文本被設(shè)置為了粉色
。因?yàn)檫@三種樣式是有優(yōu)先級(jí)的,記住他們的優(yōu)先級(jí):內(nèi)聯(lián)式 > 嵌入式 > 外部式
但是嵌入式>外部式有一個(gè)前提:嵌入式css樣式的位置一定在外部式的后面。如右代碼編輯器就是這樣,<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面(實(shí)際開發(fā)中也是這么寫的)。感興趣的小伙伴可以試一下,把它們調(diào)換順序,再看他們的優(yōu)先級(jí)是否變化。
其實(shí)總結(jié)來說,就是--就近原則(離被設(shè)置元素越近優(yōu)先級(jí)別越高)
。
但注意上面所總結(jié)的優(yōu)先級(jí)是有一個(gè)前提:內(nèi)聯(lián)式、嵌入式、外部式樣式表中css樣式是在的相同權(quán)值的情況下,什么是權(quán)值呢?在后面的小節(jié)中會(huì)講解到。
我來試試:
分別使用內(nèi)聯(lián)式、嵌入式和外部式CSS樣式,把“超酷的互聯(lián)網(wǎng)”文本字號(hào)進(jìn)行設(shè)置,感受一下這三種方法的優(yōu)先級(jí)。
別忘了設(shè)置字號(hào)的css樣式代碼:
font-size:20px;
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)