ویژگی list-style-type در CSS

list-style-type Property

ویژگی list-style-type در CSS نوع علامت لیست آیتم را مشخص می کند.

نحوه نوشتار

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: lower-alpha;
list-style-type: upper-roman;
list-style-type: none;

/* مقدار با کاراکتر */
list-style-type: '-';

در مثال زیر نحوه عملکرد این ویژگی را با مقادیر مختلف میبینیم:

html

<ul class="list1">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list2">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list3">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list4">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list5">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list6">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list7">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>
<ul class="list8">
   <li>item</li>
   <li>item</li>
   <li>item</li>
   <li>item</li>
</ul>

css

ul {
   float: left;
   margin-right: 80px;
   background-color: #eeeeee;
}
.list1 {
   list-style-type: disc; 
}
.list2 {
   list-style-type: square; 
}
.list3 {
   list-style-type: circle; 
}
.list4 {
   list-style-type: decimal; 
}
.list5 {
   list-style-type: lower-alpha; 
}
.list6 {
   list-style-type: georgian;
}
.list7 {
   list-style-type: upper-roman; 
}
.list8 {
   list-style-type: "=> "; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.