CSS之應用樣式的四種方式

2021-10-02 03:35:52 字數 1602 閱讀 2085

通過link標籤鏈結的樣式表不是html文件的一部分,但是卻供文件使用。這樣的樣式表稱為外部樣式表。

web瀏覽器遇到link標籤時,會查詢並載入樣式表,並渲染html文件。

屬性

比如:

此時由於文件中關聯的兩個外部樣式表的rel均為stylesheet,因此顯示文件時會合併兩個樣式表中的規則後再應用於文件中

候選樣式表

當把rel定義為alternate stylesheet,該樣式表為候選樣式表。僅當使用者選擇時,文才會用候選樣式表來渲染。

如果瀏覽器支援候選樣式表,可以使用title屬性來作為候選樣式表的名字。

**注意:假設文件中關聯以上兩個外部樣式表,最初顯示文件時會使用main2.css來渲染文件,當使用者選擇使用候選樣式表後,會使用main.css來渲染文件,main2.css就不再使用了。這是因為rel為stylesheet的樣式表為首選樣式表,他的優先順序比候選樣式表的高,顯示文件時預設使用。**
當在link標籤中使用title屬性時,如果有多個首選樣式表,那麼只會顯示其中的乙個,其他的則會被忽略。

這裡由於設定了title屬性,因此每次只能選擇乙個使用,當刪除title屬性後,兩個樣式表會合併規則使用。

style方式引入的樣式表稱為內部樣式表,其屬性type應設定為「text/css" ,另外style元素也可以設定media屬性,用於說明**型別。

style標籤中可以直接包含應用的樣式,也可以通過@import指令來引入外部樣式表

@import url(main.css);

body

< /style>

通過@import規則也可以引入外部樣式表 ,另外也同樣可以設定相應的**型別。

@import url(main.css) screen;
@import規則要放在style元素內部,且要放在其他css規則之前。

注意:

使用@import和使用link標籤的異同在於以下幾點:

link元素為標籤,只能在html文件中使用,@import是一種規則,應用於style標籤中,也可以是外部樣式表中。由於dom可以操作html元素,因此,link標籤中的各種屬性可以通過dom來動態改變。

ling標籤可以設定候選樣式表,只需把rel設定為alternate stylesheet即可,而@import規則匯入的指令全部都會被應用於文件,無法指定候選樣式表。

使用多個 @import規則匯入樣式表會導致效能問題,當我們把同樣大小的樣式規則放在同乙個文件裡載入比把樣式規則分成多個,並使用乙個或多個@import規則匯入的效能要高上很多。因為每一次請求是需要大量時間的,當使用多個@import規則時,會發生多次請求,浪費時間,降低效能。

樣式表載入時間不同。頁面被載入的時,link會同時被載入,而@import引用的css會等到頁面被載入完再載入;

除了以上方式,我們還可以把樣式規則通過html元素的屬性來設定,這種樣式即為內聯樣式。

HTML 引用Css樣式的四種方式

不才,只知道html引用css樣式有四種方式,內部引用和外部引用各兩種,因為老是忘記細節,記下了隨時翻閱亦可方便如我般的初學者 內部引用方式1 直接在標籤內用 style 引用,如 內部引用方式2 在頁面標頭檔案的標籤裡引用,如 如此話,style 標籤最好放到 外部引用方式1 用標籤,如 注意 不...

引入樣式表 css 的四種方式

一 使用style屬性 將style屬性直接加在個別的元件標籤裡。元件 標籤 style 性質 屬性 1 設定值1 性質 屬性 2 設定值2 例如 這種用法的優點 是可靈巧應用樣式於各標籤中,但是缺點則是沒有整篇檔案的 統一性 二 使用style標籤 將樣式規則寫在標籤之中。例如 通常是將整個的結構...

html標籤引入css樣式的四種方式

href css 04test.css rel stylesheet type text css head type text css import url css 04test.css style 也可以在外部檔案中匯入css檔案。標籤屬於xhtml html的過渡版本,但被所有瀏覽器相容 imp...