ویژگی list-style در CSS

list-style Property

ویژگی کوتاه نویسی list-style در CSS این امکان را می دهد تا تمام مقادیر مربوط به این ویژگی را یکجا مقدار دهی کنیم.

نکته: این ویژگی به عناصر لیست اعمال می شود. عناصری که ویژگی display آنها برابر با list-item باشد. بنابراین این ویژگی بر روی دو نوع عنصر لیست سازی یعنی (li و ol) قابل اجرا است.

نحوه نوشتار

list-style: square;
list-style: url('img/img.png');
list-style: inside;
list-style: georgian inside;
list-style: none;

مقادیر

این ویژگی از سه ویژگی زیر تشکیل شده که برای مطالعه بیشتر می توانید به هر یک از آنها رجوع کنید:

• list-style-type
• list-style-image
• list-style-position

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

html

<h4>عناصر مرتبط با این بخش:</h4>
<ul class="item1">
      <li>آیتم ۱</li>
      <li>آیتم ۲</li>
      <li>آیتم ۳</li>
      <li>آیتم ۴</li>
</ul>
<div>
  <h4>عناصر مرتبط با این بخش:</h4>
  <ul class="item2">
      <li>آیتم ۱</li>
      <li>ایتم ۲</li>
      <li>آیتم ۳</li>
      <li>آیتم ۴</li>
   </ul>
</div>
<div>
   <h4>عناصر مرتبط با این بخش:</h4>
   <ul class="item3">
       <li>آیتم ۱</li>
       <li>آیتم ۲</li>
       <li>آیتم ۳</li>
       <li>آیتم ۴</li>
    </ul>
</div>
<div>
    <h4>عناصر مرتبط با این بخش:</h4>
    <ul class="item4">
        <li>آیتم ۱</li>
        <li>آیتم ۲</li>
        <li>آیتم ۳</li>
        <li>آیتم ۴</li>
    </ul>
</div>

css

div {
    float: right;
    margin-left: 50px;
}
.item1 { 
    list-style: circle; 
}
.item1 li {
    background-color: lightgreen; 
}
.item2 {
    list-style: disc inside; 
}
.item2 li {
    background-color: orange; 
}
.item3 {
    list-style: square outside; 
}
.item3 li {
    background-color: skyblue; 
}
.item4 {
    list-style: inside url(http://my-project.ir/img/list-img.png); 
}
.item4 li {
    background-color: pink; 
}

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

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