CSS引入的方式有哪些? link和@import的區別是?
有 4 種方式可以在 HTML 中引入 CSS。
1.內聯方式
內聯方式指的是直接在 HTML 標籤中的 style 屬性中添加 CSS。
示例:
這通常是個很糟糕的書寫方式,它只能改變當前標籤的樣式,如果想要多個
2.嵌入方式
嵌入方式指的是在 HTML 頭部中的
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對當前的網頁有效。因爲 CSS 代碼是在 HTML 文件中,所以會使得代碼比較集中,當我們寫模板網頁時這通常比較有利。因爲查看模板代碼的人可以一目瞭然地查看 HTML 結構和 CSS 樣式。因爲嵌入的 CSS 只對當前頁面有效,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗餘,也不利於維護。
3.鏈接方式
鏈接方式指的是使用 HTML 頭部的 標籤引入外部的 CSS 文件。
示例:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式,所有的 CSS 代碼只存在於單獨的 CSS 文件中,所以具有良好的可維護性。並且所有的 CSS 代碼只存在於 CSS 文件中,CSS 文件會在第一次加載時引入,以後切換頁面時只需加載 HTML 文件即可。
4.導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
示例:
`
<style>
@import url(style.css);
</style>
兩者都是外部引用CSS的方式,但是存在一定的區別:
區別1:link是XHTML標籤,除了加載CSS外,還可以定義RSS等其他事務;@import屬於CSS範疇,只能加載CSS。
區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以後加載。
區別3:link是XHTML標籤,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區別4:ink支持使用Javascript控制DOM去改變樣式;而@import不支持。