HTML中放置CSS的三種方式和CSS選擇器

2022-07-17 02:12:09 字數 2001 閱讀 9102

(一)在html中使用css樣式的方式一般有三種:

1 內聯引用

2 內部引用

3 外部引用。

第一種:內聯引用(也叫行內引用)

就是把css樣式直接作用在html標籤中。

使用css內聯引用表現段落.

特點:內聯的樣式比其他方法更加靈活,但需要和展示的內容混淆在一起,內聯樣式會失去一些樣式表的優點。

第二種:內部引用(也叫內嵌式)

使用style標籤直接把css檔案中的內容載入到html文件內部的

特點 : 適合用於乙個html文件具有獨一無二的樣式時。

第三種:外部引用

外部引用相對於內部引用和內聯引用來說是高效的是節省寬頻的.

外部引用是w3c推薦使用的

實現外部引用有兩種方式:

(1)使用link標籤引用css

(2)使用@import匯入css

注 : 如果在同乙個選擇器上使用幾個不同的樣式表時,這個屬性值將會疊加幾個樣式表,遇到衝突的地方會以最後定義的為準。

(二)css選擇器有六種選擇符:

1 html選擇符

2 類選擇符

3 id選擇符

4 關聯選擇符

5 組合選擇符

6 偽元素選擇符

1 html選擇符 : 即是html標籤,用來改變乙個指定標籤的樣式,任何html元素都可以是乙個css的選擇符。

語法:html標籤名

p    /*當中的選擇符是p*/

h1  /*當中的選擇符是h1*/

2 類選擇符 : 匹配文件中元素e的class屬性的屬性值為classname的元素

語法:標記名.類名 或 .類名

類選擇符名稱的定義方式是,"."符號,英文"dot",後加類名稱classname

類選擇符的定義需要有.符號(.符號標明是類選擇符),但是html文件中的標籤的class屬性名不能出現.符號,見下面示例:

p.dark-row    /*設定p標籤中class屬性為dark-row的*/

.note            /*為note的類可以被用於任何元素*/

第一段第二段

第三段第四段

3 id選擇符 : 匹配文件中元素e的id屬性的屬性值為idname的元素

語法:id名稱

id選擇符名稱的定義方式是,#符號,英文"pound",後加id名稱idname

id選擇符的定義需要有#符號(#符號標明是id選擇符),但是html文件中的標籤的id屬性名不能出現#符號,見下面示例

id屬性的特殊之處在於,乙個文件中只能有乙個元素使用乙個id選擇符(與class屬性正好相反),id屬性可以用來單一地標識乙個元素 。

#main  /*id名稱main前加上乙個#號*/

文字縮排3em

4 關聯選擇符 : 也稱包含選擇符,可以單獨對某種元素包含關係定義的樣式表,元素1裡包含元素2,這種方式只對在元素1裡的元素2定義,對單獨的元素1或元素2無定義

語法:選擇符1 選擇符2...

table a  

在**內的鏈結改變了樣式,文字大小為12象素,而**外的鏈結的文字仍為預設大小。

5 組合選擇符:也叫選擇符組,可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重複定義。

語法:選擇符1,選擇符2,.,..

h1, h2, h3, h4, h5, h6

p, table

效果完全等效於:

p table

6 偽元素選擇符是指對同乙個html元素不同狀態的一種定義方式。例如對於標籤的正常狀態、訪問狀態、選中狀態、游標移到超連結文字上的狀態,就可以使用偽元素選擇器來定義。

語法:標籤:偽元素

a:link           /* 未訪問的鏈結 */

a:visited         /* 已訪問的鏈結 */

a:hover    /* 滑鼠在鏈結上 */

a:active   /* 啟用鏈結 */

最近整理的所學的淺顯知識,若有錯誤,敬請指正.

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

CSS在HTML中使用的三種方式

css在html中使用的三種方式 1.外部樣式表 test.css 此處省略css 部分使用 或是 2.內部樣式表的使用 3.行內樣式表中使用 下面說說css樣式的優先順序 一般情況下 內聯樣式 inline style 內部樣式 internal style sheet 外部樣式 external...