Article From:https://www.cnblogs.com/zoulixiang/p/9970369.html
CSS List attributes allow you to place, change, or use images as list item markers.
CSS List attributes (list)
Attribute description
list-style Short attributes. Used to set all properties for lists in a declaration.
list-style-image Set the image as a list item flag.
list-style-position Set the location of the list item flag in the list.
list-style-type Set the type of list item flag.
marker-offset
##########
Definition and Usage
list-style-type Property sets the type of list item tags.
CSS2 Value:
Value description
none Unmarked.
disc Default. The mark is a solid circle.
circle The mark is a hollow circle.
square The marker is a solid square.
decimal Markers are numbers.
decimal-leading-zero 0Number markers at the beginning. (01, 02, 03, etc.). )
lower-roman Lower-case Roman numerals (i, I i, I I i, I v, v, etc.). )
upper-roman Capital Roman numerals (I, II, III, IV, V, etc.). )
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.). )
upper-alpha Capital letters The marker is upper-alpha (A, B, C, D, E, etc.). )
lower-greek Lower-case Greek letters (alpha, beta, gamma, etc.). )
lower-latin Lower-case Latin letters (a, b, c, d, e, etc.). )
upper-latin Capital Latin letters (A, B, C, D, E, etc.). )
hebrew Traditional Hebrew numbering
armenian Traditional Armenian numbering
georgian Traditional Georgian numbering (an, ban, gan, etc.). )
cjk-ideographic Simple ideographic numbers
hiragana The tags are: a, i, u, e, o, ka, ki, etc. (Japanese Katakana)
katakana The tags are: A, I, U, E, O, KA, KI, etc. (Japanese Katakana)
hiragana-iroha The tags are: i, ro, ha, ni, ho, he, to, etc. (Japanese Katakana)
katakana-iroha The tags are: I, RO, HA, NI, HO, HE, TO, etc. (Japanese Katakana)

##############
1.Different types of list tags in unordered lists
This example demonstrates different types of list item tags in CSS.

<style type="text/css">
ul.disc {list-style:disc}
ul.circle {list-style-type:circle}
ul.square{list-style-type:square}
ul.none{list-style-type:none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>
<ul class="circle">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>
<ul class="square">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>
<ul class="none">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

2.List Item Markers of Different Types in Sequential Tables
This example demonstrates different types of list item tags in CSS.
<style type="text/css">
ol.decimal {list-style:decimal}
ol.lroman {list-style-type:lower-roman}
ol.uroman{list-style-type:upper-roman}
ol.lalpha{list-style-type:lower-alpha}
ol.ualpha{list-style-type:upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>
<ol class="decimal">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>
<ol class="lroman">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>
<ol class="uroman">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>

<ol class="lalpha">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>

<ol class="ualpha">
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ol>


3.All list style types
This example demonstrates all the different types of list item tags in CSS.

<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head>

<body>
<ul class="none">
<li>"none" Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="disc">
<li>Disc Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="circle">
<li>Circle Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="square">
<li>Square Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="decimal">
<li>Decimal Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="decimal-leading-zero">
<li>Decimal-leading-zero Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="lower-roman">
<li>Lower-roman Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="upper-roman">
<li>Upper-roman Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="lower-alpha">
<li>Lower-alpha Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="upper-alpha">
<li>Upper-alpha Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="lower-greek">
<li>Lower-greek Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="lower-latin">
<li>Lower-latin Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="upper-latin">
<li>Upper-latin Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="hebrew">
<li>Hebrew Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="armenian">
<li>Armenian Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="georgian">
<li>Georgian Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="cjk-ideographic">
<li>Cjk-ideographic Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="hiragana">
<li>Hiragana Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="katakana">
<li>Katakana Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="hiragana-iroha">
<li>Hiragana-iroha Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

<ul class="katakana-iroha">
<li>Katakana-iroha Type & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

4.Mark an image as a list item
This example demonstrates how to tag an image as a list item.

<style type="text/css">
ul{
list-style-image: url("xzc.gif");}
</style>
</head>
<body>
<ul>
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>

5.Place list Tags
This example demonstrates where to place list tags.

<style type="text/css">
ul.inside{list-style-position:inside}
ul.outside{list-style-position:outside}
</style>
</head>
<body>
<p>The list-style-position value of this list is "inside": & lt; / p>
<ul class="inside">
<li>Earl Grey Tea A black tea & lt; / Li & gt;
<li>Jasmine Tea A magical "full-function" Tea & lt; / Li & gt;
<li>Homeyhush Tea A delightful fruit tea & lt; / Li & gt;
</ul>
<p>The list-style-position value of the list is "outside":</p>
<ul class="outside">
<li>Earl Grey Tea - A black tea & lt; / Li & gt;
<li>Jasmine Tea - A magical "full-function" Tea & lt; / Li & gt;
<li>Honeybush Tea - A delightful fruit tea & lt; / Li & gt;
</ul>

6.Define all list attributes in a declaration
This example demonstrates that all properties for lists are set to a shorthand property.
<style type="text/css">
ul{
list-style: square inside url('xzc.gif')
</style>
</head>
<body>
<ul>
<li>Coffee & lt; / Li & gt;
<li>Tea & lt; / Li & gt;
<li>Coca-Cola & lt; / Li & gt;
</ul>
Link of this Article: CSS list example

Leave a Reply

Your email address will not be published. Required fields are marked *