有关CSS list-style(列表样式)小小编给大家详细讲解点我查看

在网页中小小编很多地方都会用到列表,例如导航菜单、新闻列表、商品分类等等。您除了可以使用 HTML 中的一些属性来对列表进行简单的设置外,在 CSS 中也提供了几种专门用来设置和格式化列表的属性,如下所示:

  • list-style-type:设置列表项前面标记的形状(外观);
  • list-style-position:设置标记和列表中文本之间的距离;
  • list-style-image:使用图像代替默认的标记;
  • list-style:统一设置上面的三个属性。

1. list-style-type

使用 list-style-type 属性可以设置列表中每个列表项前标记的样式,属性的可选值如下:

描述
none 无标记
disc 默认值,标记为实心圆
circle 将标记设置为空心圆
square 将标记设置为实心方块
decimal 将标记设置为数字
decimal-leading-zero 将标记设置为以 0 开头的数字标记,例如 01、02、03
lower-roman 将标记设置为小写罗马数字,例如 i、ii、iii、iv、v
upper-roman 将标记设置为大写罗马数字,例如 I、II、III、IV、V
lower-alpha 将标记设置为小写英文字母,例如 a、b、c、d、e
upper-alpha 将标记设置为大写英文字母,例如 A、B、C、D、E
lower-greek 将标记设置为小写希腊字母,例如 α、β、γ、δ、ε
lower-latin 将标记设置为小写拉丁字母,例如 a、b、c、d、e
upper-latin 将标记设置为大写拉丁字母,例如 A、B、C、D、E
hebrew 将标记设置为传统的希伯来编号
armenian 将标记设置为传统的亚美尼亚编号
georgian 将标记设置为传统的乔治亚编号
cjk-ideographic 将标记设置为中文数字,例如 一、二、三、四、五
hiragana 将标记设置为日文平假名字符,例如 あ、い、う、え、お
katakana 将标记设置为日文片假名字符,例如 ア、イ、ウ、エ、オ
hiragana-iroha 将标记设置为日文平假名序号
katakana-iroha 将标记设置为日文片假名序号

【示例】使用 list-style-type 属性改变无序列表、有序列表中列表项前标记的样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6. list-style-type: circle;
  7. }
  8. ol {
  9. float: left;
  10. }
  11. .ol_one {
  12. list-style-type: lower-roman;
  13. }
  14. .ol_two {
  15. list-style-type: lower-greek;
  16. }
  17. .ol_three {
  18. list-style-type: georgian;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <ul>
  24. <li>CSS链接</li>
  25. <li>CSS边框</li>
  26. <li>CSS表格</li>
  27. </ul>
  28. <ol class=“ol_one”>
  29. <li>CSS链接</li>
  30. <li>CSS边框</li>
  31. <li>CSS表格</li>
  32. </ol>
  33. <ol class=“ol_two”>
  34. <li>CSS链接</li>
  35. <li>CSS边框</li>
  36. <li>CSS表格</li>
  37. </ol>
  38. <ol class=“ol_three”>
  39. <li>CSS链接</li>
  40. <li>CSS边框</li>
  41. <li>CSS表格</li>
  42. </ol>
  43. </body>
  44. </html>

运行结果如下图所示:

144S61F7-0
图:list-style-type 属性演示

2. list-style-position

使用 list-style-position 属性可以设置在何处放置列表项前的标记,属性的可选值如下:

描述
inside 列表项前的标记放置在之后的文本以内,列表项中的文本会根据标记对齐
outside 默认值,保持标记位于文本的左侧,列表项前的标记放置在文本以外,并且列表项中的文本不会根据标记对齐
inherit 从父元素继承 list-style-position 属性的值

【示例】使用 list-style-position 属性设置列表项前标记的位置:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ol {
  6. list-style-type: lower-roman;
  7. }
  8. li {
  9. background: #ccc;
  10. margin-bottom: 2px;
  11. }
  12. .ol_one {
  13. list-style-position: inside;
  14. }
  15. .ol_two {
  16. list-style-position: outside;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <ol class=“ol_one”>
  22. <li>CSS链接</li>
  23. <li>CSS边框</li>
  24. <li>CSS表格</li>
  25. </ol>
  26. <ol class=“ol_two”>
  27. <li>CSS链接</li>
  28. <li>CSS边框</li>
  29. <li>CSS表格</li>
  30. </ol>
  31. </body>
  32. </html>

运行结果如下图所示:

144S63Y6-1
图:list-style-position 属性演示

3. list-style-image

通过 list-style-image 属性可以将列表项前的标记替换为一个图像,属性的可选值如下:

描述
URL 图像的路径
none 默认值,不显示任何图像
inherit 从父元素继承 list-style-image 属性的值

【示例】使用 list-style-image 属性将列表项前的标记替换为一个图像:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6. list-style-image: url(‘./css_icon.png’);
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <ul>
  12. <li>CSS链接</li>
  13. <li>CSS边框</li>
  14. <li>CSS表格</li>
  15. </ul>
  16. </body>
  17. </html>

运行结果如下图所示:

144SCM8-2
图:list-style-image 属性演示

4. list-style

list-style 属性是上述三个属性(list-style-type、list-style-position、list-style-image)的简写,使用 list-style 可以同时设置上面的三个属性,其语法格式如下:

list-style: list-style-type || list-style-position || list-style-image;

提示:在使用 list-style 属性时,需要按照上面的顺序来为参数赋值,只要遵守参数的顺序,即使忽略其中的一项或多项也是可以的,例如list-style: none;list-style:circle inside;,被忽略的参数会设置为参数对应的默认值。

【示例】使用 list-style 属性来统一设置列表项的标记样式、位置和图像:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6. list-style: url(‘./css_icon.png’);;
  7. }
  8. ol {
  9. list-style: lower-greek inside;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <ul>
  15. <li>CSS链接</li>
  16. <li>CSS边框</li>
  17. <li>CSS表格</li>
  18. </ul>
  19. <ol>
  20. <li>CSS链接</li>
  21. <li>CSS边框</li>
  22. <li>CSS表格</li>
  23. </ol>
  24. </body>
  25. </html>

运行结果如下图所示:

144SBA9-3
图:list-style 属性演示
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片