CSS List Style (ul)

CSS list

The CSS list properties work as follows:

• Set up different list items to mark as ordered lists
• Set different list items to mark as no sequence tables
• Set the list item to be marked as an image

List

In HTML, there are two types of HTML lists:

• No Sequence Table - Marker of list items uses special graphics (e.g. small black dots, small boxes, etc.)
• Ordered list - The tags for list items use numbers or letters

With CSS, you can list further styles and mark them with images as list items.

Different list item tags

list-style-type specifies that the type of list item tag is:

Some values are unseeded tables, and some are ordered lists.

The following is a description of the common property values of the list-style-type property:

• none Bullets are not used
  
• disc Solid circle
  
• circle Hollow circle
  
• square Solid block
  
• decimal Arabic numerals
  
• lower-alpha lowercase English letters
  
• upper-alpha Capital Letters
  
• lower-roman lower-case Roman numerals
  
• upper-roman Capital Roman numerals
  

The image marked as a list item

To specify an image marked by a list item, use the list style image properties:

The above examples vary across major browsers, with IE and Opera showing image tags a little higher than Firefox, Chrome and Safari.

Tips:

• list-style-position determine whether a flag appears outside or inside the content of a list item.
• If you want to place the same image logo in all browsers, you should use a browser compatibility solution in the following ways.

Browser compatibility solutions

Also in all browsers, the following example shows the image tag:

Examples explain:

• Ul:
  • Set the list style type to have no list item tags
  • Set padding and margin 0px (browser compatibility)
• All lis in ul :
  • Set the URL of the image and set it to appear only once (no repetition)
  • Position the image you need (left 0px and up and down 5px)
  • Put the text in the list with the padding-left property

List - Short-case properties

You can specify all list properties in a single property. This is called a short-case property.

Using short-case properties for lists, list style properties are set as follows:

If the order in which the abbreviated property values are used is:

1. list-style-type
2. list-style-position (see CSS property sheet below for instructions)
3. list-style-image

In short write properties, it doesn't matter if one of the above values is missing and the rest is still in the specified order.

More instances

All the different list item tags
This example demonstrates all the different CSS list item tags.

All CSS list properties