在HTML中如何引入CSS樣式

這篇文章給大家分享的是有關在HTML中如何引入CSS樣式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

內聯方式

　　內聯方式指的是直接在HTML標簽中的style屬性中添加CSS。

　　示例：

　　< div >< /div>

　　這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個擁有相同的樣式，你不得不重復地為每個

添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的style中的代碼。很顯然，內聯方式引入CSS代碼會導致HTML代碼變得冗長，且使得網頁難以維護。

嵌入方式

　　嵌入方式指的是在HTML頭部中的< style>標簽下書寫CSS代碼。

　　嵌入方式的CSS只對當前的網頁有效。因為CSS代碼是在HTML文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看HTML結構和CSS樣式。因為嵌入的CSS只對當前頁面有效，所以當多個頁面需要引入相同的CSS代碼時，這樣寫會導致代碼冗余，也不利于維護。

鏈接方式

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

　　這是最常見的也是最推薦的引入CSS的方式。使用這種方式，所有的CSS代碼只存在于單獨的CSS文件中，所以具有良好的可維護性。并且所有的CSS代碼只存在于CSS文件中，CSS文件會在第一次加載時引入，以后切換頁面時只需加載HTML文件即可。

導入方式

　　導入方式指的是使用CSS規則引入外部CSS文件。

比較鏈接方式和導入方式

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

　　link屬于HTML，通過

標簽中的href屬性來引入外部文件，而@import屬于CSS，所以導入語句應寫在CSS中，要注意的是導入語句應寫在樣式表的開頭，否則無法正確導入外部文件；

　　@import是CSS2.1才出現的概念，所以如果瀏覽器版本較低，無法正確導入外部樣式文件；

最后：

　　當HTML文件被加載時，link引用的文件會同時被加載，而@import引用的文件則會等頁面全部下載完畢再被加載；

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