Shulou(Shulou.com)06/01 Report--

This article mainly shows you "CSS how to set the style of list items", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "CSS how to set the style of list items" this article.

CSS list

The CSS list property allows you to place, change the list item flag, or use the image as the list item flag.

List type

The easiest (and most supported) way to influence the style of a list is to change its flag type.

In an unordered list, the marker of list items is the dot that appears next to each list item.

In an ordered list, a sign may be a letter, a number, or a symbol in some other counting system.

To change the type of flag used for list items, you can use the property list-style-type:

Ul {list-style-type: square}

Note: the above declaration sets the list item flag in the unordered list to a box.

List item image

Sometimes, you may want to use an image for each flag, which can be done using the list-style-image attribute:

Ul li {list-style-image: url (xxx.gif)}

List flag location

CSS2.1 uses the list-style-position property to determine whether the flag appears outside or inside the content of the list item:

Ul {list-style-position: inside;}

Abbreviated list style

For simplicity, you can merge the above three list style attributes into a convenient property: list-style, like this:

Li {list-style: url (example.gif) square inside}

Note: the values of list-style can be listed in any order, and these values can be ignored (apply default values).

CSS list (list) attribute and description

List-style: abbreviated attribute. Used to set all the properties used for the list in a declaration.

List-style-image: sets the image to the list item flag.

List-style-position: sets the location of the list item flag in the list.

List-style-type: sets the type of list item flag.

The above is all the content of the article "how CSS sets the style of list items". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.