區(qū)別:1、id對(duì)應(yīng)css是用樣式選擇符“#”;而class對(duì)應(yīng)css是用樣式選擇符“.”。2、class可以在頁(yè)面里面重復(fù)使用;而id由于在頁(yè)面里面只能出現(xiàn)一次,所以不能重復(fù)使用。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3版、Dell G3電腦。
CSS Id 和 Class選擇器
如果你要在HTML元素中設(shè)置CSS樣式,你需要在元素中設(shè)置"id" 和 "class"選擇器。
id 選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。 HTML元素以id屬性來(lái)設(shè)置id選擇器,CSS 中 id 選擇器以 "#
" 來(lái)定義。
下面的兩個(gè) id 選擇器,第一個(gè)可以定義元素的顏色為紅色,第二個(gè)定義元素的顏色為綠色:
#red {color:red;} #green {color:green;}
下面的 HTML 代碼中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red">這個(gè)段落是紅色。</p> <p id="green">這個(gè)段落是綠色。</p>
class 選擇器
class 選擇器用于描述一組元素的樣式,class 選擇器有別于id選擇器,class可以在多個(gè)元素中使用。 class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個(gè)點(diǎn)".
"號(hào)顯示:
.center {text‐align: center}
上面這個(gè)例子,所有擁有 center 類的 HTML 元素均為居中。
當(dāng)然你也可以指定特定的HTML元素使用class。 在下面實(shí)例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
p.center {text‐align:center;}
css中id和class的區(qū)別
1、語(yǔ)法區(qū)別:
id對(duì)應(yīng)css是用樣式選擇符“#”(井號(hào))。
class對(duì)應(yīng)css是用樣式選擇符“.”(英文半角輸入句號(hào))。
2、使用次數(shù)區(qū)別:
class可以在頁(yè)面里面重復(fù)使用,
id由于在頁(yè)面里面只能出現(xiàn)一次,所以不能重復(fù)使用,
所以盡量用class來(lái)寫,這樣能在頁(yè)面里面重復(fù)引用你寫的css,減小工作量和代碼量。
(學(xué)習(xí)視頻分享:css視頻教程)