對于CSS樣式來說,背景色是其中十分重要的一項。在網(wǎng)頁設計中,我們常常需要對不同的Li標簽設置不同的背景色來達到視覺上的區(qū)分效果。
li { background-color: #f2f2f2; padding: 10px; }
上面的代碼實現(xiàn)了對所有Li標簽的背景色進行了設置。#f2f2f2是一個灰色調(diào)的背景色,padding值則為10px。這里需要注意的一點是,如果我們將這段代碼放到了頁面中的樣式表中,那么所有的Li標簽背景色都會被設置為灰色背景,并且都有10px的padding值。
但是,我們可能更需要的是對不同的Li標簽設置不同的背景色,這就需要我們針對每個Li標簽去寫CSS樣式了。
ul li:first-child { background-color: red; } ul li:last-child { background-color: blue; } ul li:nth-child(3) { background-color: yellow; }
上面的代碼,分別對第一個、最后一個和第三個Li標簽設置了不同的背景色。這里介紹了三種不同的標簽選擇器,可以根據(jù)頁面的需要進行不同的選擇,實現(xiàn)想要的效果。
總結一下,CSS樣式中以背景色為特征的屬性是一個在網(wǎng)頁設計中十分重要的內(nèi)容,需要在實際應用時仔細斟酌。我們可以利用不同的標簽選擇器來實現(xiàn)對不同Li標簽的背景色設置,達到視覺上的區(qū)分效果。
上一篇css li 在最左邊
下一篇css3基本筆記