样式化列表—CSS学习笔记

龙二_
146 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

前言

无序列表是一个项目的列表，此列项目默认使用粗体圆点进行标记，有序列表则是使用数字进行标记。浏览器对于这两种列表的样式会有预设值，下面我们来看看默认的样式是怎样的。

列表的默认样式

我们先准备一个无序列表与一个有序列表。

  • name:tom
  • age:13
  • hobby:play basketball
    The types of fruit
  1. apple
  2. pear
  3. orange

效果：

image.png

可以看到默认的话两种列表都有间距，我们使用浏览器调试工具来看下。

image.png

image.png

我们可以看到设置了margin-block-start和margin-block-end和padding-inline-start的值。这几个是CSS逻辑属性，所谓css逻辑属性，指的是*-start，*-end以及*-inline-start，*-inline-end，*-block-start， *-block-end这类css属性，其最终渲染的方向是有逻辑性在里面的。

乍一看，我们可能会误认为margin-inline是对inline元素生效的，margin-block是对block元素生效的。实际上不是的，千万不要被表面迷惑，inline和block其实指的是方向。默认情况下，margin-inline指的是水平方向的margin控制，而margin-block指的是垂直方向的margin控制。

所以实际上margin-block-start和margin-block-end大致相当于margin-top和margin-bottom即上外边距和下外边距。而padding-inline-start相当于左内边距。

我们可以看到还有两个属性display:block即设置为块级元素，list-style-type设置列表项的符号样式，这里decimal指标记为数字，disc指实心圆。现在我们了解了默认的样式，我们便来样式化列表。

样式化列表

我们便以有序列表为例，首先对于边距一般没有特殊需要我们是不动它的。然后就是列表项的符号样式，除此之外还可以设置列表项的图片及位置。

  • list-style-type ：设置用于列表的项目符号的类型，常用的例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字，当然也可以设置为none不设置标记。
  • list-style-position：设置在每个项目开始之前，有inside、outside选项，表示项目符号是出现在列表项内，还是出现在其外（即padding盒内）。
  • list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

下面我们便来试试样式化有序列表。

ul {
    list-style-position: inside;
    list-style-type: upper-alpha;
}

image.png

可以看到列表项的标记出现在了列表项内，且符号被替换成了大写字母。

下面我们来试试将符号替换为图片。

list-style-image: url(./image/star.svg);

image.png

使用简写属性

上面提到的三种属性可以用一个单独的属性来简写。

例如：

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

可被替换为（顺序随意）：

ul {
  list-style: square url(star.svg) inside;
}
avatar
文章
阅读
粉丝