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:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. 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.

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: 0 px ;
     margin: 0 px ;
 } ul li { background-image: url ( sqpurple . gif )
 

     ;
     background-repeat: no-repeat ;
     background-position: 0 px 5 px  ; 
     padding-left: 14 px ; 
 }

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 attributes for lists, and set the list style attributes 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.

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:0to remove:

Example

ul { list-style-type: none 
   ;
   margin: 0 ;
   padding: 0 ;
 }

All CSS list properties

Attributes 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 in the list.
list-style-type Set the type of list item flag.