CSS style list (ul)
CSS List Properties role is as follows:
- Set different list item is marked as an ordered list
- Set different list item is marked as an unordered list
- Set list item marker image
List
In HTML, there are two types of lists:
- Unordered list - list items are marked with special graphic (such as black specks, small boxes, etc.)
- Ordered list - the list items are marked with numbers or letters
With CSS, you can list the style further, and can make an image list item marker.
Different list item marker
list-style-type attribute specifies the type of list item marker is ::
Examples
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 is an ordered list.
As the image list item marker
To specify the image list item marker, use the list-style-image property:
Examples
{
list-style-image: url('sqpurple.gif');
}
The above example shows not the same in all browsers, IE and Opera display the image tags than Firefox, Chrome and Safari a little bit higher.
If you want to place the same image of the logo in all browsers, you should use a browser compatibility solutions, as follows
Browser Compatibility Solutions
Also in all browsers, the following example will show the image tag:
Examples
{
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 explained:
- ul:
- Set the list-style-type is not to delete the list item marker
- Setting padding and margin 0px (browser compatibility)
- All ul li:
- Set the URL of the image, and set it only appears once (no repeat)
- You need to locate the image position (left 0px and a vertical 5px)
- With padding-left attribute to the text in the list
List - shorthand property
You can specify a list of all the properties in a single property. This is called a shorthand property.
Use abbreviations property to the list, a list of style attributes are set as follows:
Examples
{
list-style: square url("sqpurple.gif");
}
If you use the shorthand property value of the order is:
- list-style-type
- list-style-position (for instructions, see the following CSS attribute table)
- list-style-image
If these values are missing one of the remaining order is still specified, it does not matter.
More examples
All different list item marker
This example demonstrates all the different CSS list item marker.
All CSS List Properties
Attributes | description |
---|---|
list-style | Shorthand property. For a list of all the properties is provided in a statement |
list-style-image | The image is set to sign a list of items. |
list-style-position | Set the position in the list the list item marker. |
list-style-type | Set the type of list item flag. |