The difference between Css:list-style-type and list-style-image

CSS List

In an unordered table <ul>, the list item's flag (marker) is the dot that appears next to each list item.

In the one by one sequence table <ol>, the logo may be a symbol in letters, numbers, or some other counting system.

List-style-type: List < sequence flags (marker) > Style properties

ul.circle {list-style-type:circle}/           * unordered Origin marker*/ul.square {List-style-type:square}/           * unordered Square point marker*/ Ol.upper-roman {List-style-type:upper-roman}/* Uppercase Roman sort */ol.lower-alpha {list-style-type:lower-alpha}/* Lowercase alphabetical order */

/* Other property values: */

/* ' disc ' is a solid round------' decimal ' Arabic numerals-----' lower-roman ' lowercase roman--lower-latin lowercase latin----upper-latin uppercase Latina */<pre name= "code" class= "HTML" >

<style type= "Text/css" >ul.circle {list-style-type:<span style= " Background-color:rgb (255, 255, 102); " >circle</span>}ul.square {list-style-type:<span style= "Background-color:rgb (255, 255, 51);" >square</span>}ol.upper-roman {list-style-type:<span style= "Background-color:rgb (102, 255, 153);" >upper-roman</span>}ol.lower-alpha {list-style-type:<span style= "Background-color:rgb (102, 255, 153);" >lower-alpha</span>}</style>
</ul><p>type upper-roman:</p><span style= "Background-color:rgb (255, 204, 204); ><ol class= "Upper-roman" ></span><li>Coffee</li><li>Tea</li><li> Coca cola</li></ol><p>type lower-alpha:</p><span style= "Background-color:rgb (255, 204, 204); " ><ol class= "Lower-alpha" ></span><li>Coffee</li><li>Tea</li><li> Coca cola</li></ol>
List-style-image using:



Operating effect:



This property specifies an image that is marked as an ordered or unordered list item. Position of the image relative to the contents of the list item

The List-style-position property is typically used to control.

Note: Always specify a "List-style-type" attribute to prevent the image from being displayed as a

A list of marker.

This property specifies an image that is marked as an ordered or unordered list item. The placement of an image relative to the contents of a list item is usually controlled using the List-style-position property.

Note: Always specify a "List-style-type" attribute in case the image is not available.

In practical use, for convenience, the above three attribute values can be combined into list-style, for example:


Li {list-style:url (example.gif) square inside}
The values of the List-style can be listed in any order, and as long as a value is stated, the other values are listed as default values, and the default value for List-style-type is "disc" List-style-position is "outside"