Css:list-style the use of list styles

Parsing CSS List style properties List-style

The normal production page can be used for attribute List-style in List-item objects, but not deep. Generally set to none reset the entire page is almost OK, probably many people including my property list-style-type more detail aspects of the properties are not very understanding, more likely to attribute List-style and attribute List-style-type concept will be more ambiguous, The existing need to put it forward to re-study, so the following.

Righteousness and usage

The List-style shorthand property sets all the list properties in a declaration.

Description
This property is a shorthand property that covers all the other list style properties. Since it is applied to all display-list-item elements, it can be used only in normal HTML and XHTML in the LI element, but in fact it applies to any element and is inherited by the List-item element.

The following properties can be set sequentially:

List-style-type
list-style-position
List-style-image

List-style

Definition: A shorthand property that is used to set all properties of a list in a declaration, which is a shorthand property that covers all other list style properties, only for objects that have display values equal to List-item (such as Li objects).

Related: List-style-imagelist-style-positionlist-style-type

List-style-image

Description: Sets or retrieves an image that is marked as a list item of an object. If this property value is None or the picture that specifies the URL address cannot be displayed, the List-style-type property will function.

Value:

None: Default value. Do not specify an image

URL (URL): Specify an image with an absolute or relative URL address

Set the image to the item tag in the list:

UL  {  list-style-image:url ("/i/arrow.gif");  List-style-type:square;  }

Cases

List-style-position

Description: Sets or retrieves how the list item tags as objects are arranged according to text. If the left outer patch (MARGIN-LEFT) of a list item is set to 0, the list item tag is not displayed. The left outer patch (MARGIN-LEFT) minimum can be set to 30. Only for objects that have display property values equal to List-item. such as the Li object.

Value:

Outside: Default value. List item markers are placed outside the text, and wrapping text is not aligned with the tag

Inside: List item markers are placed within text, and wrapping text is aligned according to the tag

Instance
Specify the location of the list item markers in the list:

UL  {  list-style-position:inside;  }
Instance


Browser support

All browsers support the List-style-position property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).


List-style-type

Description: Sets or retrieves a preset tag used by the object's list item. This property will work if the List-style-image property value is None or the picture that specifies the URL address cannot be displayed.

Instance
This example changes the type of list: