在HTML中如何引入CSS樣式

這篇文章給大家分享的是有關(guān)在HTML中如何引入CSS樣式的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　有4種方式可以在HTML中引入CSS。其中有2種方式是在HTML文件中直接添加CSS代碼，另外兩種是引入外部CSS文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

　　內(nèi)聯(lián)方式指的是直接在HTML標(biāo)簽中的style屬性中添加CSS。

　　示例：

　　< div >< /div>

　　這通常是個(gè)很糟糕的書(shū)寫(xiě)方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè)擁有相同的樣式，你不得不重復(fù)地為每個(gè)

添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的style中的代碼。很顯然，內(nèi)聯(lián)方式引入CSS代碼會(huì)導(dǎo)致HTML代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。

嵌入方式

　　嵌入方式指的是在HTML頭部中的< style>標(biāo)簽下書(shū)寫(xiě)CSS代碼。

　　嵌入方式的CSS只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)镃SS代碼是在HTML文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看HTML結(jié)構(gòu)和CSS樣式。因?yàn)榍度氲腃SS只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的CSS代碼時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

　　鏈接方式指的是使用HTML頭部的標(biāo)簽引入外部的CSS文件。

　　這是最常見(jiàn)的也是最推薦的引入CSS的方式。使用這種方式，所有的CSS代碼只存在于單獨(dú)的CSS文件中，所以具有良好的可維護(hù)性。并且所有的CSS代碼只存在于CSS文件中，CSS文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載HTML文件即可。

導(dǎo)入方式

　　導(dǎo)入方式指的是使用CSS規(guī)則引入外部CSS文件。

比較鏈接方式和導(dǎo)入方式

　　鏈接方式（下面用link代替）和導(dǎo)入方式（下面用@import代替）都是引入外部的CSS文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用@import。

　　link屬于HTML，通過(guò)

標(biāo)簽中的href屬性來(lái)引入外部文件，而@import屬于CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在CSS中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；

　　@import是CSS2.1才出現(xiàn)的概念，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件；

最后：

　　當(dāng)HTML文件被加載時(shí)，link引用的文件會(huì)同時(shí)被加載，而@import引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；

感謝各位的閱讀！關(guān)于“在HTML中如何引入CSS樣式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！