Summary of common knowledge about CSS page layout (list style)

There is a lot of knowledge in CSS, and it is impossible for us to remember it all. In my spare time, I compiled some common knowledge about CSS page layout. This article will share with you the common knowledge about CSS list style. Friends in need can refer to it, I hope it can help you.

1. Unordered list

Unordered list means that the list symbols are dots or other graphics instead of numbers. The syntax of the unordered list is:

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

The function of ul is to indicate that the list it contains is an unordered list, and each group of li is used to contain a list item.

2. Ordered list

The list symbol of the ordered list is a number. The syntax of an ordered list is:

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

The function of ol is to indicate that the list it contains is an ordered list, and each group of li is used to contain a list item.

3. Definition list

The definition list rarely appears in use. Its syntax is:

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

The function of dl is to indicate that it contains The list is a list of definitions. Generally, dt defines a concept and dd is the explanation of the concept.

4. Change the style of list symbols

CSS provides list-style-type, list-style-image, and list-style-position attributes to change the style of list symbols. style.

Use the built-in list symbol

Syntax:

list-style-type：type;

If type=none, the list will not have the list symbol. Commonly used types are:

square (solid square)

disc (solid circle)

cicle (hollow circle)

decimal (Arabic numerals)

lower-roman (lower-case Roman letters)

upper-roman (upper-case Roman letters)

Use background images as list symbols

As needed, sometimes The list symbol can be replaced by a smaller picture. The syntax is:

list-style-image：url(picture.png);

Change the position of the list symbol

The list symbol can be embedded in the text or outside the text content. The syntax is:

list-style-position：inside/outside;

Abbreviation of list attribute

The following code:

list-style-image：url(picture.png);
list-style-position：inside/outside;

can be abbreviated as:

list-style: url(picture.png) inside/outside;

Note: In general, list-style-type and list-style-image cannot be used at the same time, because the latter will override the former.

The above is the detailed content of Summary of common knowledge about CSS page layout (list style). For more information, please follow other related articles on the PHP Chinese website!