HTML中引入CSS的方式有哪些

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

　　一、認識CSS

　　CSS：層疊樣式表（Cascading Style Sheets）

　　樣式表：如果把HTML比作人，那么樣式表就是衣帽服飾，就是用來打扮HTML外觀的（俗話說人靠衣服，網頁靠CSS，才能變得漂亮）

　　內容與樣式分離：HTML代碼與CSS代碼分離，讓它們各自去做擅長的事情

　　HTML控制結構和內容；CSS控制樣式

　　這樣有利于代碼的維護

　　舉個栗子：存在已久的QQ空間的裝扮功能就是內容與樣式分離的最好體現

　　當我們點擊切換不同的皮膚時，空間頁面會顯示不同的主題樣式，這就是在給網頁更換皮膚啊

　　既然將HTML與CSS分離，那么又如何讓它們精誠合作呢？向下看

　　二、四種CSS的引入方式

　　1. 內聯樣式（行內式）

　　即：在html標簽內的style屬性中設定CSS樣式，例如：

　　我是段落

　　注：這種方式不推薦使用，因為它只能改變當前標簽樣式，多處使用會導致代碼的可維護性極差

　　2. 內部樣式（嵌入式）

　　即：在html內的head頭部內的style標簽對中設定CSS樣式，例如：

　　注：這種方式使html內容結構和css樣式分開，便于閱讀且代碼比較集中，但CSS樣式只對當前頁面有效。

　　當多個頁面需要引用同一個CSS樣式時，修改CSS樣式將十分麻煩，此時不利于代碼維護，可維護性變差。

　　3. 外部樣式（鏈接式：link）

　　即：使用html的link標簽引入一個外部獨立的 .css 文件

　　link標簽放在html文件內的head頭部中，例如：

　　注：這種方式，CSS代碼存儲在一個外部獨立的文件中，若要更換網站樣式，只需修改CSS文件即可，不需改動html文件，所以采用這種方式使代碼具有良好的可維護性

　　4. 外部樣式（導入式：@import）

　　即：使用CSS的語法規則引入一個外部獨立的 .css 文件

　　@import放在html文件head頭部里的style標簽內（@import也可以放在導入樣式表的開頭，去引用其他樣式），例如：

　　@import url（"style.css"）;

　　注：這種方式與鏈接式link一樣，將CSS代碼存儲在一個外部獨立的文件中，也具有良好的可維護性，但這種方式也有缺點：白屏和無樣式內容閃爍

　　嘿，除了以上引用的樣式外，不要忽略 “ 瀏覽器的默認樣式 ” 哦

　　三、 引用外部樣式時：link 和 @import 的區別

　　1. 從屬關系

　　link屬于HTML的標簽，通過 link 標簽的 href 屬性來引入外部文件；link不僅可以引入CSS樣式表，還可以定義RSS、rel屬性等

　　@import屬于CSS的語法，@import語法只有一項作用：導入樣式表

　　2. 加載順序

　　使用link標簽引入的CSS樣式在加載頁面時被同時加載

　　使用@import導入的CSS樣式將在頁面加載完畢之后才被加載

　　3. 兼容性

　　link 屬于HTML標簽，不存在兼容性問題

　　@import 是 CSS2.1 是在CSS2.1提出的，低版本的瀏覽器不支持，只可在 IE5+ 才能被識別

　　4. DOM可控區

　　link 支持使用Javascript控制DOM去改變樣式（通過 JS 操作 DOM ，插入link標簽來改變樣式）

　　@import不支持使用Javascript控制DOM去改變樣式（ 由于DOM 方法是基于文檔的，所以無法使用@import的方式插入樣式）

　　5. 權重（若有興趣自行查詢它的原因）

　　link引入的樣式權重大于@import引入的樣式

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