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;
مقادیر
این ویژگی از سه ویژگی زیر تشکیل شده که برای مطالعه بیشتر می توانید به هر یک از آنها رجوع کنید:
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
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 پشتیبانی می کنند.