在網(wǎng)頁制作中,我們經(jīng)常需要對(duì)多個(gè)元素應(yīng)用相同的樣式。為了避免在每個(gè)元素上重復(fù)書寫樣式,我們可以使用CSS中的類選擇器來定義多個(gè)元素的樣式。
類選擇器的語法為.類名,我們可以在class屬性中添加類名來給元素添加一個(gè)或多個(gè)類。例如:
<p class="red big">這是一個(gè)紅色的大段落</p> <p class="red small">這是一個(gè)紅色的小段落</p> <p class="blue big">這是一個(gè)藍(lán)色的大段落</p> <p class="blue small">這是一個(gè)藍(lán)色的小段落</p>
在上面的例子中,我們定義了兩種顏色和兩種大小的類,然后將它們應(yīng)用到不同的段落中。接下來,我們可以使用類選擇器給它們定義樣式:
.red { color: red; } .blue { color: blue; } .big { font-size: 24px; } .small { font-size: 16px; }
在這段CSS中,我們分別為紅色和藍(lán)色定義了顏色樣式,為大號(hào)和小號(hào)定義了字體大小樣式。現(xiàn)在,我們的段落就可以按照我們定義的樣式展示了。
如果我們想要應(yīng)用多個(gè)樣式,我們可以將它們用空格分隔在class屬性中,例如:
<p class="red big bold">這是一個(gè)紅色的大而粗的段落</p>
在這個(gè)例子中,我們將red、big和bold三個(gè)類應(yīng)用到了這個(gè)段落中。我們可以根據(jù)需要定義這些類的樣式:
.red { color: red; } .blue { color: blue; } .big { font-size: 24px; } .small { font-size: 16px; } .bold { font-weight: bold; }
以此類推,我們可以通過類選擇器方便地定義多個(gè)元素的樣式,減少重復(fù)的工作,提高開發(fā)效率。