Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use list attributes in CSS". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to use list attributes in CSS" can help you solve the problem.

CSS list

In a sense, anything that is not a descriptive text can be considered a list. Censuses, solar systems, genealogies, visiting menus, and even all your friends can be represented as a list or a list.

Because the list is so diverse, which makes the list quite important, it is a pity that the list style is not too rich in CSS.

CSS list type

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

For example, in an unordered list, the marker of list items is the dot that appears next to each list item. In an ordered list, a flag 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}

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

CSS list item image

Sometimes, regular signs are not enough. 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)}

You can use an image as a flag simply by using a url () value.

CSS list flag location

CSS2.1 can determine whether the flag appears outside or inside the content of the list item. This is done using list-style-position.

Abbreviated CSS list style

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

The values of li {list-style: url (example.gif) square inside} list-style can be listed in any order, and these values can be ignored. As long as one value is provided, the others will fill in their default values.

This is the end of the introduction to "how to use list properties in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.