CSS中,常用的幾種樣式書(shū)寫(xiě)方式是行內(nèi)樣式、內(nèi)聯(lián)樣式和鏈接樣式。
但是,當(dāng)我們有一個(gè)樣式需要在多個(gè)地方使用時(shí),我們可以使用CSS委類(Class)來(lái)編寫(xiě)樣式。
.my-class { background-color: green; color: white; font-size: 20px; }
在上述代碼中,我們使用了CSS委類的語(yǔ)法來(lái)定義一個(gè)名為“my-class”的類,以此來(lái)給一組元素應(yīng)用相同的樣式。
現(xiàn)在,如果我們想要使用這個(gè)樣式,只需要在HTML中的元素中添加class="my-class"屬性即可:
<div class="my-class"> <p>這是一段有綠色背景和白色字體的文字</p> </div>
這樣就可以讓這個(gè)元素繼承.my-class的樣式了。
在CSS中,我們也可以使用多個(gè)委類,以逗號(hào)分隔:
.my-class1, .my-class2 { /* 這里放置樣式 */ }
這樣,我們就可以同時(shí)給兩個(gè)不同的委類應(yīng)用相同的樣式了。
最后,我們還可以使用CSS委類來(lái)修改現(xiàn)有樣式,這種技術(shù)也被稱為“樣式繼承”:
.my-class1 { background-color: green; color: white; font-size: 20px; } .my-class2 { background-color: red; /* 這里未修改color和font-size */ }
上述代碼中,元素如果同時(shí)擁有.my-class1和.my-class2兩個(gè)委類,它會(huì)繼承.my-class1的所有樣式,但只修改了背景色為紅色。
通過(guò)CSS委類,我們可以更加方便地管理和修改樣式,使得代碼更加模塊化和可重用。