CSS List
The effect of CSS list properties is as follows:
Set different list items to be marked as ordered list
Set different list items to be marked as unordered list
Set the list item to be marked as an image
List
In HTML, there are two types of lists:
Unordered list ul -special graphics for marking list items (such as small black dots, small boxes, etc.)
Ordered list ol -list items are marked with numbers or letters
Using CSS, further styles can be listed, and images can be used as list item markers.
The unordered list looks like this:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
The ordered list is as follows:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
Different List Item Tags
The list-style-type attribute specifies the type of list item mark:
Example
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 unordered lists, and some are ordered lists.
The following is a list-style-type
description of the common property value of the property:
none
: Do not use bulletsdisc
: Filled circlecircle
: Hollow circlesquare
: Solid squaredecimal
: Arabic numeralslower-alpha
: Lowercase English lettersupper-alpha
: Uppercase English letterslower-roman
: Lowercase roman numeralsupper-roman
: Uppercase roman numerals
Image Marked as List Item
To specify the image of the list item marker, use the list-style image attribute:
Example
ul { list-style-image: url('sqpurple.gif'); }
The above example displays differently in all browsers. IE and Opera display image tags a little bit higher than Firefox, Chrome and Safari.
If you want to place the same image logo on 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 type to no list item mark
Set padding and margins to 0px (browser compatibility)
All li in ul:
Set the URL of the image and set it to be displayed only once (no repetition)
Position of the positioning image you need (left 0px and top and bottom 5px)
Use the padding-left property to put the text in the list
List - Shorthand Properties
All list attributes can be specified in a single attribute. This is the so-called shorthand attribute.
Use shorthand properties for lists, and set the list style properties as follows:
Example
ul { list-style: square url("sqpurple.gif"); }
The following attributes can be set in order:
list-style-type
list-style-position (For instructions, please refer to the CSS property table below)
list-style-image
If one of the above values is missing and the rest are still in the specified order, it does not matter.
More Examples
All the different list item tags
This example demonstrates all the different CSS list item tags.
Remove Default Settings
The list-style-type: none attribute can be used to remove small marks. List <ul> or <ol> also set default and padding the padding can be used
margin:0
, and padding:0
to remove:
Example
ul { list-style-type: none; margin: 0; padding: 0; }
All CSS List Properties
Property | Description |
---|---|
list-style | Shorthand attribute. Used to set all the attributes used in the list in one declaration |
list-style-image | Set the image as the list item flag. |
list-style-position | Set the position of the list item flag. |
list-style-type | Set the type of list item flag. |