CSS Properties:
7, List properties:
This property is used to describe alist of properties.
The List-style-type property describes the symbols used before each item in the list:
Property name : ' List-style-type '
Property value : Disc | circle | square | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial value : Disc
Fit Objects : list elements
Whether to inherit : Yes
Percent remark : prohibited
The attribute value means:
disc: Round pie shape.
Circle: Hollow round.
Square: Squares.
decimal: decimal value.
lower-roman: lowercase roman numerals.
Upper-roman: uppercase Roman numerals.
lower-alpha: lowercase Greek letters.
upper-alpha: uppercase Greek letters.
For example:
<STYLE>
OL {List-style-type:lower-roman}
</STYLE>
<BODY>
<OL>
<LI> is the The.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
You can also use list-style-image to change the symbol in front of the list to a graphic:
Property name : ' List-style-image '
Property value : <url> | none
Initial value : none
Fit Objects : list elements
Whether to inherit : Yes
Percent remark : prohibited
<url> can be either an absolute address or a relative address.
The list-style-position property is used to describe where the list is displayed:
Property name : ' List-style-position '
Attribute value : Inside | outside
Initial value : Outside
Fit Objects : list elements
Whether to inherit : Yes
Percent remark : prohibited
property values outside and inside respectively represent or display inside the BOX , for example:
<style type= "Text/css" >
UL {List-style:outside}
ul.compact {list-style:inside} </STYLE> <UL>
<li>first list Item comes
<li>second list item comes second
</UL>
<ul class=compact>
<li>first list Item comes
<li>second list item comes second
</UL>
The List-style property is a shortcut to the above property:
Property name : ' List-style '
Property value : < ' list-style-type ' > | | < ' list-style-position ' > | | | < ' list-style-image ' >
Initial value : No
Fit Objects : list elements
Whether to inherit : Yes
Percent remark : prohibited
For example:
ul {List-style:upper-roman inside}/* for any ul effective * *
UL ~ ul {list-style:circle outside}/* to any UL internal UL Mark effective * *
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
