css list-style属性怎样用?
list-style属性在一个声明中设置一切的列表属性。
申明:
该属性是一个简写属性,涵盖了一切其他列表款式属性。
因为它应用到一切 display 为 list-item 的元素,所以在一般的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它能够应用到任何元素,并由 list-item 元素继续。
能够按递次设置以下属性:list-style-type,list-style-position,list-style-image。
● list-style-type:设置列表项标记的范例。
● list-style-position:设置在那边安排列表项标记。
● list-style-image:运用图象来替代列表项的标记。
能够不设置个中的某个值,比方 "list-style:circle inside;" 也是许可的。未设置的属性会运用其默认值。
解释:一切浏览器都支撑 list-style 属性。
css list-style属性的运用示例
示例1:差别的列表项标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul.a {list-style:circle;} ul.b {list-style:square;} ol.c {list-style:upper-roman;} ol.d {list-style:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
效果图:
示例2:指定列表项标记的图象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style:url('sqpurple.gif'); } </style> </head> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
效果图:
以上就是css list-style属性怎样用的细致内容,更多请关注ki4网别的相干文章!