Login With Github

CSS Lists

The list properties in CSS can be used to set the style of lists and list items.

There are 5 kinds of list properties in CSS:

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • marker-offset

Now we will learn these list properties with some examples.

The list-style-type Property

The list-style-type property can be used to control the appearance of list item makers, for example:

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
     
      <ul style="list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
     
      <ol style="list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
     
      <ol style="list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
     
      <ol style="list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

Note: Some values ​​are valid only for the <ul> list, and others ​​are only valid for the <ol> list.

The list-style-image Property

If you need to use a special maker, such as an image, you can use the list-style-image property:

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

The result of the above example is not the same in all browsers. The displays of the image are a bit higher in IE and Opera than in Firefox, Chrome, and Safari.

If you want the image maker to appear in the same location in all browsers, you should write code like this:

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;
}

The list-style-position Property

The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.

"list-style-position: inside;" means that the bullet points will be inside the list item. Because it is part of the list item, it will be part of the text and push the text at the start。

Here is an example:

ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

The list-style Property

For simplicity, you can combine the above three list style properties into one: list-style. Here is an example:

li {
    list-style : url(example.gif) square inside;
}

When using the shorthand property, the order of the property values are:

  • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

The marker-offset Property

The property of marker-offset allows you to specify the distance between the marker and the text relating to the marker. Its value should be a length as shown in the following example。

<!DOCTYPE html>
<html>
   <head>
   <style>
   ul {
       list-style: inside square; marker-offset:2em;
   }
   ol {
       list-style: outside upper-alpha; marker-offset:2cm;
   }
   </style>
   </head>
   
   <body>
      <ul>
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
     
      <ol>
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

Unfortunately, this property is not supported in IE 6 or Netscape 7.

0 Comment

temp