CSS list styles

We learned in the HTML chapter earlier:

1. Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)

2. Yes Sequence List - List items are marked with numbers or letters

Let’s take a look at lists in CSS.

Detailed explanation of ul and li styles in CSS

The ul and li lists use CSS to layout the page Commonly used elements. 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 bullets of the li list, that is Decoration at the front of the list. The list-style-type attribute is an inheritable attribute. Its syntax 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:

    php.cn  
   这里是列表内容
 这里是列表内容
 这里是列表内容

2. List-style-image attribute

The list-style-image attribute is 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

The list-style-image attribute can take two values:

none: No replacement image. url: The path of the image to be replaced.

Let’s look at a piece of code:

    php.cn  
   这里是列表内容
 这里是列表内容
 这里是列表内容

##3. List-style-position attribute

list-style-position attribute , is an attribute used to define the display position of bullets 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.

Examples of using the list-style-position attribute are as follows:

    php.cn  
   这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。 这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。 这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
 这里是列表内容
 这里是列表内容

4. List-style attribute

list- The 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:

    php.cn  
   这里是使用list-style属性的示例。请注意换行以后项目符号的位置。 这里是使用list-style属性的示例。请注意换行以后项目符号的位置。 这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
 这里是列表内容

Browser Compatibility Solution

Also in all browsers, the following example will display the image tag:

{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding -left: 14px;
}

Example explanation:

ul:

Set the list style type to not delete the list item Tag

Set padding and margin to 0px (browser compatibility)

all li in ul:

Set the URL of the image and set it to be displayed only once (no duplicates )

Position the image you need (0px left and 5px top and bottom)

Use the padding-left attribute to place the text in the list

Continuing Learning