mdn-样式列表

最新推荐文章于 2024-02-15 10:43:44 发布

sanjiaowuhuan

最新推荐文章于 2024-02-15 10:43:44 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/sanjiaowuhuan/article/details/102553194

版权

本文介绍了如何在CSS中处理列表的样式，包括调整列表间距、设定符号样式如`list-style-type`，控制项目符号的位置如`list-style-position`，使用`list-style-image`设置自定义图片符号，以及通过`start`、`reversed`和`value`属性管理列表的计数方式。

摘要由CSDN通过智能技术生成

处理列表间距

      /* General styles */
      /*设置一个网站字体，基准字体大小为10px*/
      html {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 10px;
      }
      h2 {
        font-size: 2rem;
      }
      /*设置相对字体大小*/
      ul,ol,dl,p {
        font-size: 1.5rem;
      }
      /*段落和列表设置行高*/
      li, p {
        line-height: 1.5;
      }

      /* Unordered list styles */
      /**/
      ul {
        padding-left: 2rem;
        list-style-type: none;
      }

      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }

      /* Ordered list styles */

      ol {
        list-style-type: upper-roman;
      }

      /* Description list styles */

      dd, dt {
        line-height: 1.5;
      }
      /*描述术语加粗*/
      dt {
        font-weight: bold;
      }