css樣式表 樣式表分類 選擇器

2022-08-11 03:36:18 字數 2250 閱讀 2045

一、樣式表分三類:

1.內聯樣式表。——放在元素的開始標記中。——只對當前元素起作用。

例:

結果:2.內嵌樣式表。——放在頁面的中間。——可以對整個頁面。

你好

執行結果:

3.外部樣式表。——放在乙個單獨的.css樣式表檔案中。——可以對整個**。

操作:新建乙個css檔案,用來存放樣式表——>在html中呼叫樣式表,要在html中右鍵——>css樣式表——>附加樣式表。樣式表一般用link連線方式。

(1)外部樣式表的定義

@charset "utf-8";

/* css document */

input

(2)外部樣式表的呼叫

你好

執行結果:

二、樣式表的選擇器:

內嵌、外部樣式表的一般語法:

選擇器{

樣式=值;

樣式=值;

樣式=值;

....

}以下面html為例,了解區分一下各種樣式選擇器。

你好你好

1.基本:

(1)標籤選擇器:用標記名稱來當選擇器。

input    div   span   td都可以做標籤選擇器。標籤選擇器控制的是一類,範圍大。

例:

@charset "utf-8";

/* css document */

input

執行結果:

(2)類別選擇器:在html元素中使用class對元素進行分類,然後使用這個class的值作為選擇器。

.class的名      類別選擇器是想改變誰就單獨改變誰,相對於標籤選擇器要更精確。

選擇器:

@charset "utf-8";

/* css document */

.uu

html表的呼叫為:

你好你好

執行結果:

(3)id選擇器:針對htlm中相應id的元素起作用。

#id的名

選擇器:

@charset "utf-8";

/* css document */

#a3

執行結果:

2.復合:

(1)用逗號隔開。——並列關係,同時起作用。

input,#dd,.yellow,.uu

(2)用空格隔開。——後代關係。

.uu

div .uu         

不管是子代還是孫子代都是後代,只要在div的後代中有uu的就變化。

執行結果:

(3)class二次篩選。

標籤選擇器.class選擇器

input.uu

例:

.uu

div.uu

執行結果 :

div.uu的意思是:div存在的同時.uu也存在,屬於二次篩選。

*對比:div .uu與div.uu的不同。

div空格.uu的意思是:div的後代中(不管是子代還是孫子代中)出現.uu,出現的項就會隨樣式表變化。

div.uu的意思是:div存在的同時.uu也存在時,才會隨樣式表變化,屬於二次篩選。

CSS樣式表基礎知識 樣式表的分類及選擇器

一 css基本概念 css cascading style sheet,疊層樣式表 作用是美化html網頁。注釋區域 此為注釋語法 二 樣式表的分類 1 內聯樣式表 和html聯合顯示,控制精確,但是可重用性差,冗餘多 例 內聯樣式表 以上就是乙個簡單的內聯樣式表,用在中的標籤中,相當於style附...

CSS樣式表與選擇器

html解題思路 1 先大致寫出html框架,即定義內容部分。2 然後根據需要寫對應的css樣式,即定義表現部分。3 根據需要可將css檔案定義在外部,用鏈結樣式表或匯入樣式表將外部css檔案引入到當前頁面,實現了表現與內容的分離。css樣式選擇器分類 1 標籤選擇器。2 類選擇器。3 id選擇器。...

CSS 樣式表與選擇器

3,樣式表特點 4,選擇器分類 4 群組選擇器 為一組元素統一設定樣式 5 後代選擇器 空格表示後代 在選擇器 中查詢所有滿足選擇器 的元素 6 子代選擇器 匹配滿足選擇器的所有直接子元素 7 偽類選擇器 為元素的不同狀態分別設定樣式,5,選擇器的優先順序 借助於style標籤屬性,書寫樣式宣告 樣...