在CSS中,我們可以使用list-style
屬性來設(shè)置列表項的樣式,如無序列表(<ul>
)和有序列表(<ol>
)。
ul { list-style: disc; } ol { list-style: decimal; }
以上代碼設(shè)置無序列表項為實心圓點(disc),有序列表項為數(shù)字(decimal)。
除了這兩種常見的樣式值,list-style
屬性還有其他值可用:
ul { list-style: none; } ol { list-style: upper-roman; }
none
值可以讓列表項不顯示任何標志符,upper-roman
值可以讓有序列表項以大寫羅馬數(shù)字表示。
除了以上所述的三個樣式值外,還有其他的樣式值可用,如circle
、square
、lower-alpha
、lower-roman
、upper-alpha
和disclosure-closed
等等。
ul { list-style: circle; } ol { list-style: lower-roman; }
以上代碼設(shè)置無序列表項為圓圈(circle),有序列表項為小寫羅馬數(shù)字(lower-roman)。
需要注意的是,list-style
屬性是一個簡寫屬性,可以設(shè)置三個值分別為:list-style-type
、list-style-image
和list-style-position
,分別表示標志符的類型、圖片和位置。
ul { list-style-type: disc; list-style-image: none; list-style-position: inside; } ol { list-style-type: decimal; list-style-image: url("bullet.png"); list-style-position: outside; }
以上代碼將無序列表項的標志符設(shè)置為實心圓點(disc),背景圖片為無,位置為列表項內(nèi)部(inside);有序列表項的標志符設(shè)置為數(shù)字(decimal),背景圖片為一個名為bullet.png
的圖片,位置為列表項外部(outside)。
總之,list-style
屬性是一個非常有用的CSS屬性,可以幫助我們靈活地控制列表項的樣式。