Home >Web Front-end >CSS Tutorial >CSS: Detailed explanation of the use of list-style-image
Do you understand the usage of the CSS list-style-image attribute? Here is a description. The list-style-image attribute uses an image to replace the markup of the list item. This attribute is designated as a Image of an ordered or unordered list item flag.
CSS list-style-image property list icon
Definition and usage
The list-style-image property uses an image to replace the markup of a list item.
Description
This attribute specifies an image as a symbol for an ordered or unordered list item. The placement of the image relative to the content of the list item is usually controlled using the list-style-position attribute.
Note: Always specify a "list-style-type" attribute in case the image is not available.
Example
Set the image as the item mark in the list:
ul { list-style-image:url("/i/arrow.gif"); list-style-type:square; }
Browser support
All browsing All browsers support the list-style-image attribute.
Note: Any version of Internet Explorer (including IE8) does not support the attribute value "inherit".
Possible values
Syntax:
list-style-image : none | url (url)
Parameters:
none: No image specified
url: Use an absolute or relative address to specify a background image
Description:
Sets or retrieves the image marked as a list item of the object.
If the list-style-image attribute is none or the specified image is unavailable, the list-style-type attribute will take effect.
The corresponding script feature is listStyleImage. Please see other books I have written.
Example:
ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }
The above is the detailed content of CSS: Detailed explanation of the use of list-style-image. For more information, please follow other related articles on the PHP Chinese website!