How to set the style of li with css

How to set the li style in css: 1. Define the bullets of the li list through the list-style-type attribute; 2. Use pictures instead of bullets through the list-style-image attribute; 3. Use the list- The style attribute can comprehensively set the li style.

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

Recommended: css video tutorial

The default style of the li tag is a small dot or a number in front of it. So how to change the default style of the li tag?

How to set the style of li tag in css?

ul and li lists are commonly used elements when using CSS to layout pages. In CSS, there are attributes that specifically control list performance. Commonly used attributes include list-style-type attributes, list-style-image attributes, list-style-position attributes, and list-style attributes.

1. List-style-type attribute

The list-style-type attribute is used to define the bullet of the li list, that is, the modification in front of the list. The list-style-type attribute is an inheritable attribute. Its grammatical structure is as follows: (List some commonly used attribute values)

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

There are many attribute values ​​​​for the list-style-type attribute. Here we only list a few of the more commonly used ones.

none: Do not use bullet points.

disc: solid circle.

circle: hollow circle.

square: solid square.

demical: Arabic numerals.

lower-alpha: lowercase English letters.

upper-alpha: uppercase English letters.

lower-roman: Lowercase Roman numerals.

upper-roman: Uppercase Roman numerals.

The sample code for using the list-style-type attribute is as follows:

li{
    list-style-type:square;
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

2. List-style-image attribute

list-style-image Property used to define the use of pictures instead of bullets. It is also an inheritable attribute, and its syntax structure is as follows:

list-style-image:none/url

list-style-image attribute can take two values:

none: There is no replaced image.

url: The path of the image to be replaced.

Let’s look at a piece of code:

li{
    list-style-image:url(images/bg03.gif);
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

3. List-style-position attribute

list-style-position attribute is used to define items Properties of the symbol's display position in the list. It is also an inheritable attribute, and the syntax structure is as follows:

list-style-position:inside/outside

inside: The bullet is placed inside the text.

outside: Bullets are placed outside the text.

An example of using the list-style-position attribute is as follows:

li{
    list-style-type:square;
    list-style-position:outside;
}
<ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

Let’s take a look at the style with the attribute value inside.

li{
    list-style-type:square;
    list-style-position:inside;
}
<ul>
    <li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

4. List-style attribute

The list-style attribute is an attribute that comprehensively sets the li style. It is also an inheritable attribute. The syntax structure is as follows:

li-style:list-style-type/list-style-image/list-style-position

The positions of each value can be exchanged. For example:

li{
    list-style:url(images/bg03.gif) inside;
}
<ul>
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
</ul>

The above is the detailed content of How to set the style of li with css. For more information, please follow other related articles on the PHP Chinese website!