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

2021-07-23 20:40:22 字數 1730 閱讀 3353

一、css與html的結合

三種方式、html與css結合如下：

方式


一、在標籤的style屬性上設定」key:value value;」，修改標籤樣式。 


例如：分別定義兩個 div、span標籤，


分別修改每個 div 標籤的樣式為：邊框1個畫素，實線，紅色。


此處是方式一的實現：


我是div標籤1


我是div標籤2


我是div標籤3


我是div標籤4


我是span標籤1


我是span標籤2


我是span標籤3
方式一問題：這種方式的缺點？

1.如果標籤多了。樣式多了。**量非常龐大。

2.可讀性非常差。

3.css**沒什麼復用性可方言。

方式二、 在head標籤中，使用style標籤來定義各種自己需要的css樣式。

格式如下：

***

問題：這種方式的缺點。

1.只能在同一頁面內復用**，不能在多個頁面中復用css**。


2.維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了。
方式三、 使用html 的實現：

標籤 匯入 css 樣式檔案。


標籤名選擇器格式:


標籤名
二、css的三種選擇器和組合選擇器

（一）、標籤名選擇器

標籤名選擇器格式：


標籤名
標籤名舉例實現：



我是div標籤1


我是div標籤2


我是span標籤1


我是span標籤2
（二）id選擇器

格式：

id選擇器格式：


#id屬性值


div標籤1


span標籤1


div標籤2


span標籤3
（三）class選擇器

型別選擇器的格式：

.class屬性值
舉例如下：

需求1：修改 class 屬性值為 class01的 span 或 div 標籤，


字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。


需求2：修改 class 屬性值為 class04的 div 或 span標籤，


字型顏色為灰色，字型大小26個畫素。邊框為1畫素紅色實線。


div標籤1 class004


span標籤1 class001


div標籤2 class003


span標籤2 class002


div標籤3 class004


span標籤3 class001
（四）組合選擇器

組合選擇器格式：

選擇器1，選擇器2
如下：



div標籤2 class002


span標籤1 id01


div標籤4 class001


span標籤3 id01


div標籤2 id02


span標籤2 class002


div標籤3 class001

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

所謂實踐出真知，只有自己動手去做了，才能得到正確的結論。首先我們看看三種結合方式 通過link標籤引入外部css檔案 通過style標籤 通過style屬性 測試過的優先順序是 3 2 1。結果圖 這個其他情況我就不在測試了，這裡style屬性的優先順序最高，沒什麼爭議。接下來就是重點了，分為兩種情...

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元素...