Detailed explanation of lists in CSS Word-CSS Tutorial-php.cn

In word, lists are also very frequently used elements. In CSS, lists and list items are block-level elements. That is, a list forms a block box, and each list item within it forms a separate block box. Therefore, all properties of block boxes in the box model apply to lists and list items.

In addition, lists also have three unique attributes list-style-type, list-style-position and list-style-image, which are used to define the style of list bullets and the number of bullets respectively. Pictures of locations, bullets.

Lists can be nested within each other, and lists of one type can be nested with lists of any type. List items can also be cross-defined with any HTML element (such as paragraphs, pictures, links, etc.).

In word, you can often see lists intersecting with paragraphs, pictures, tables, etc. In fact, it is more common for lists to intersect with other elements, while pure lists are rarer. For example:

```
<p>列表的list-style-type、list-style-position…项目符号所使用的图片。</p>
```
Copy after login
- list-style-type属性
1. disc 默认值，实心圆
2. decimal 数字1、2、3、4、5
3. lower-alpha 小写英文字母a、b、c、d、e
4. lower-roman 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
list-style-position属性
list-style-image属性

In the above code, ol is nested in ul. In ol, the paragraph element p is also cross-defined with the list item li element. This is just a very simple example of how to apply styles to a list.

Due to different browsers, the default style of the list may be different. So, in order to behave consistently across all browsers, first clear the list's default styles such as margins, padding, list bullets, etc.

<br>

Copy after login

ul,ol {
    margin: 0;
    padding: 0;
}

Copy after login

By default, the list-style-position attribute value of the list is outside, and the bullets do not occupy the space of the container. When the margin or padding of a list element is 0, the bullet is outside the container and the bullet will not align with the paragraph text. Therefore, if necessary, you can set the list-style-position attribute to inside.

In addition, there is a writing habit in Chinese, which is to indent the first line of a paragraph by two characters. To align lists and paragraphs, list items should also be indented by two characters on the first line.

<br>

Copy after login

ul li, ol li {
   text-indent: 2em;
   list-style-position: inside;
}

Copy after login

Because the default list bullets are too simple and the selection range is very small, it simply cannot meet the needs of most users. In this regard, CSS provides image replacement technology, which allows you to choose images that match the page style to replace the default list item symbols.

When replacing the default list item symbol, the HTML code does not need any modification, just use the list-style-image attribute to define the URL of the image. This is also a manifestation of the superiority of CSS. Here, for unordered lists, square.png is used as bullets, while for ordered lists, the default numeric bullets are used.

<br>

Copy after login

ul {
   list-style-image: url(img/square.png);
}
ol {
   list-style-type: decimal;
}

Copy after login

The above code seems to have no problem and runs normally under Chrome, but under all versions of IE and Opera, the inner ol is still used square.png as bullet points. The reason is that the list-style-image attribute is inheritable, and the inner list inherits the list-style-image attribute of the outer list.

So, if you want to use pictures to replace the default list bullets, when clearing the default style of the list, you must also set the list-style attribute to none.

<br/>

Copy after login

ol {
   list-style-type: decimal;
   list-style-image: none;
}

Copy after login

After the above processing, the list we defined is almost the same as the list in word, and behaves consistently under all browsers. The running results are shown in Figure 11-13:

Detailed explanation of lists in CSS Word Figure 11-13 List style

Although it is easy to achieve the purpose using list-style-image, due to the formatting of the list, It's mostly done by the browser, not the designer, so there's no precise control over the position of the image. As you can see from the image above, it's difficult to align images and text correctly. Moreover, the distance between pictures and text is also different in different browsers.

However, the list-style-image attribute is not the only one that can implement the function of replacing bullets with pictures. As mentioned earlier, CSS treats any element on the page as a box. Most of the public properties of the box model are actually applicable to lists, including the background property. Therefore, the background can come in handy at this time. You can use the background to replace the list-style-image, and then use the background-position attribute to precisely control the position of the bullet.

To use a background as a bullet, first reset the list-style-type property to none. Otherwise, the bullets and background will appear at the same time.

<br/>

Copy after login

```
ul  {
   list-style-type: none;
}
```
Copy after login

然后，为列表的 li 元素定义一个背景图像，并设置为不平铺。为了防止 li 中的文本覆盖背景图像，需要为 li 设置适当的左外边距，为图片腾出空间。再通过 background-position属性来精确控制背景图像的位置，保证背景图像和文本正确对齐。

<br/>

Copy after login

ul  li {
   margin-left: 2em;
   background-position: 0 6px;
   background-repeat: no-repeat;
   background-image: url(img/square.png); 
}

Copy after login

通过调整图片的位置，项目符号和文本可以正确对齐，并且在所有浏览器下的表现一致，比直接使用 list-style-image属性的效果明显要好多了（限于篇幅，就不截图了），这就是使用背景图像的好处。