CSS列表ul-ol-dl-dd-p 原创邦

CSS列表ul-ol-dl-dd-p

ul和ol默认的样式， margin-top 和margin-bottom : 16px(1em) padding-left: 40px(2.5em)
dl 默认样式， margin-top,margin-bottom: 16px(1em)
dd默认样式： margin-left:40px(2.5em)
p的默认样式： margin-top和margin-bottom: 16px(1em)

列表和文本的行高，字体大小等要一致，称：垂直节奏，vertical rhythm

list-style-type: square/circle/ upper-roman/ (ordered list/ unordered list)

list-style-position: inside/outside;

list-style-image: url(star.svg) ; 自定义图片代替 square or circle, image: 有文件的图，也有css实现的图如 linear-gradient()

list-style-image: linear-gradient(to left bottom, red, blue);

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

list-style-type: space-counter;

list-style-type: disc;

list-style-type: circle;

list-style-type: "\1F44D"; // thumbs up signlist-style-type: disc;

list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* <string> value */
list-style-type: '-';

lower/upper - alpha/roman/latin/greek/armenian

自定义背景bullet的时候，list-style-type:none, 再设置background-相关属性给background的bullet留足够的位置。

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;
}

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

可以替换成这样：
Could be replaced by this:

ul {
  list-style: square url(example.png) inside;  （没有先后顺序）
}

starting from a number other than 1, or counting backwards, or counting in steps of more than 1
有序的列表，默认是从1开始，也是大于1，也可以倒序，或者每次增加的数大于1.

start: 4
reversed 美 [rɪˈvɜːrst]

<li value="2" ..

阅读量: 547
发布于: 2021-07-23
修改于: 2021-07-23