CSS的四種引用方式:
1、行內(nèi)樣式、內(nèi)聯(lián)樣式
2、內(nèi)嵌樣式、內(nèi)部樣式
3、鏈接樣式
4、導(dǎo)入樣式
行內(nèi)樣式 、內(nèi)聯(lián)樣式
行內(nèi)樣式是最簡(jiǎn)單的一種css(Cascading Style Sheets【層疊樣式表】)使用方式,就是在html標(biāo)簽中使用style屬性添加CSS樣式。
例如:
<p style="color:#F00; "></p>
優(yōu)點(diǎn):這樣寫的css樣式的優(yōu)先級(jí)別是最高的。
缺點(diǎn):HTML(結(jié)構(gòu)層)與CSS(表現(xiàn)層)代碼混合在了一起,文件體積變大,代碼混亂不易維護(hù)。
內(nèi)嵌樣式 、內(nèi)部樣式
內(nèi)嵌樣式是寫在<head></head>標(biāo)簽中的;并用<style></style>標(biāo)簽進(jìn)行聲明。
例如:
<style type="text/css"> body,div,a,img,p{ margin:0; }</style>缺點(diǎn):雖然與行內(nèi)樣式相比實(shí)現(xiàn)了HTML與CSS的分離,但是對(duì)于多個(gè)HTML頁面來說,還是不能實(shí)現(xiàn)統(tǒng)一管理與維護(hù);
優(yōu)點(diǎn):一定程度上實(shí)現(xiàn)了結(jié)構(gòu)層與變現(xiàn)層的分離。
鏈接樣式
鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在<head></head>之間加上<link…/>就可以了,如下:
<link type="text/css" rel="stylesheet" href="style.css" />
缺點(diǎn):
優(yōu)點(diǎn):1、使用鏈接式時(shí)與導(dǎo)入式不同的是它會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件,因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的,它不會(huì)象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁,然后再顯示有樣式的網(wǎng)頁,這是鏈接式的優(yōu)點(diǎn)。2、充分實(shí)現(xiàn)了結(jié)構(gòu)層與表現(xiàn)層的分離。
導(dǎo)入樣式
將一個(gè)獨(dú)立的.css文件引入HTML文件中,導(dǎo)入式使用CSS規(guī)則引入外部CSS文件,<style>標(biāo)記也是寫在<head>標(biāo)記中,使用的語法如下:
<head><style type="text/css"> @import url(mystyle.css); 此處要注意.css文件的路徑</style></head>
缺點(diǎn):導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件,因此這就導(dǎo)致了一個(gè)問題,如果網(wǎng)頁比較大則會(huì)兒出現(xiàn)先顯示無樣式的頁面,閃爍一下之后,再出現(xiàn)網(wǎng)頁的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。
優(yōu)點(diǎn):1、充分實(shí)現(xiàn)了結(jié)構(gòu)層與表現(xiàn)層的分離;2、也能實(shí)現(xiàn)一部分的分塊的功能。
四種方式的優(yōu)先級(jí)問題
1.就近原則
2.理論上:行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入
3.實(shí)際上:內(nèi)嵌、鏈接、導(dǎo)入在同一個(gè)文件頭部,誰離相應(yīng)的代碼近,誰的優(yōu)先級(jí)高
總結(jié)
以上所述是小編給大家介紹的CSS的四種引用方式,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選