HTML與CSS結合的三種方式 優先順序比較

2021-10-11 21:38:34 字數 1172 閱讀 2605

所謂實踐出真知,只有自己動手去做了,才能得到正確的結論。

首先我們看看三種結合方式:

通過link標籤引入外部css檔案

通過style標籤

通過style屬性

測試過的優先順序是:3>2=1。

結果圖:

這個其他情況我就不在測試了,這裡style屬性的優先順序最高,沒什麼爭議。

接下來就是重點了,分為兩種情況來說明問題:

測試一:style標籤在link標籤上方

測試二:style標籤在link標籤下方

測試一:style標籤在link標籤上方。不在給測試標籤div設定style屬性。只比較style標籤和外部引入的優先順序

測試一結論:外部引入的優先順序高

測試二:style標籤在link標籤下方。不在給測試標籤div設定style屬性。只比較style標籤和外部引入的優先順序

測試二結論:style標籤優先順序高

測試二結論:style標籤優先順序高

總結:通過測試一和測試二不難知道,style標籤和外部引入的css檔案是沒有絕對的優先順序的,決定優先順序的是位置先後。從圖中可以看出,位置在後的優先順序高。

Css與html三種結合方式 Css四種選擇器

一 css與html的結合 三種方式 html與css結合如下 方式 一 在標籤的style屬性上設定 key value value 修改標籤樣式。例如 分別定義兩個 div span標籤,分別修改每個 div 標籤的樣式為 邊框1個畫素,實線,紅色。此處是方式一的實現 我是div標籤1 我是di...

css檔案鏈結html的三種方式

html view plain copy 在code上檢視 片派生到我的 片 html view plain copy 在code上檢視 片派生到我的 片 html view plain copy 在code上檢視 片派生到我的 片 鏈入外部csstitle type text css rel st...

html裡嵌入CSS的三種方式

在html中定義css的方式有 embedding 嵌入式 linking 引用式 inline 內聯式 下面通過例項為大家詳細介紹下它們的特點 在html中常用以下3種方式定義css embedding 嵌入式 linking 引用式 inline 內聯式 一 嵌入式 使用html的style元素...