Example explanation of CSS list style

CSS List

CSS ListAttributeThe function is as follows:

Set different list items to be marked as ordered lists

Set different list items marked as unordered lists

Set list items marked as images

List

In HTML, there are two types of lists:

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

Ordered list - list items are marked with numbers or letters

Use CSS , further styles can be listed, and images can be used as list item markers.

Different list item markers

The list-style-type attribute specifies the type of list item marker: :

Instance

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Some values ​​are None Sequenced lists, and some ordered lists.

Image as list item marker

To specify an image as a list item marker, use the list style image attribute:

Example

ul
{
list-style-image: url('sqpurple.gif');
}

The above example is in Display is not the same in all browsers, IE and Opera display image tags a little higher than Firefox, Chrome and Safari.

If you want to place the same image logo in all browsers, you should use the browser compatibility solution. The process is as follows

Browser compatibility solution

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

Example

ul
{
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 as None Remove List item tag

Set padding and margin to 0px (browser compatibility)

all li in ul:

Set image URL, and set it to display only once (no duplication)

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

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

List-abbreviated attribute

All list attributes can be specified in a single attribute. This is called an abbreviation attribute.

Use abbreviated attributes for lists, and the list style attributes are set as follows:

Example

ul
{
list-style: square url("sqpurple.gif");
}

If you use abbreviated attribute values, the order of values ​​is:

list-style -type

list-style-position (See CSS property table below for instructions)

list-style-image

If the above It doesn't matter if one of the values ​​is missing and the rest are still in the specified order.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Example explanation of CSS list style. For more information, please follow other related articles on the PHP Chinese website!