1. 程式人生 > >CSS有哪些引入方式,link和@import的區別

CSS有哪些引入方式,link和@import的區別

添加 ref 外部 css2 業務 imp 導致 完全 哪些

3種方式哦,行內樣式、內部樣式表、外部樣式表

1. 行內樣式又稱為內聯樣式,直接在HTML標簽的style屬性中添加css.

會導致 HTML 代碼變得冗長

2. 內部樣式表又稱為嵌入方式,是在HTML<head>的<style>標簽中寫css代碼

因為嵌入的 CSS 只對當前頁面有效,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗余,也不利於維護。

3. 外部樣式表可以通過,HTML 頭部的 <head> 標簽引入外部的 CSS 文件.

(1)、鏈接式 :
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />

(2)、導入式
<style type="text/css">
@import url("css文件路徑");
</style>

區別:

1. link屬於XHTML標簽,除了加載CSS之外,還可以定義其他業務,@import屬於css2.1,只能加載CSS。

2. link 引入CSS時,在頁面載入時同時加載,@import在頁面加載完全後,再加載css.

3. link無兼容性問題, @import是在CSS2.1提出的,故只可在 IE5+ 才能識別,低版本的瀏覽器不支持。

4. 可以通過JS操作DOM,插入link標簽來改變樣式。

CSS 權重優先級順序簡單表示為:

!important > 行內樣式 > ID > 類、偽類、屬性 > 標簽名 > 繼承 > 通配符

CSS有哪些引入方式,link和@import的區別