Home >Web Front-end >CSS Tutorial >CSS: Detailed explanation of the use of list-style-image

CSS: Detailed explanation of the use of list-style-image

黄舟
黄舟Original
2017-06-29 10:13:263872browse

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.

CSS: Detailed explanation of the use of list-style-image

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 ​​

CSS: Detailed explanation of the use of list-style-image

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn