قالب بندی لیست ها به شما اجازه می دهد که بتوانید :



از نشانه های دلخواه خود برای گزینه های لیست مرتب استفاده کنید



از نشانه های دلخواه خود برای گزینه های لیست نامرتب استفاده کنید



از تصویر دلخواه خود برای گزینه های لیست استفاده کنید



ویژگیlist-style-type 

نوع نشانه کنار گزینه های لیست توسط این ویژگی مشخص می شود

مثال :

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

 

دو کلاس a , b برای لیست هایی که با ul ساخته می شوند و دو کلاس c , d برای لیست هایی که با ol ساخته می شوند تعریف شده است .

مشاهده و اجرای برنامه کامل

ویژگیlist-style-image 

برای تعیین تصویر بعنوان نشانه گزینه های لیست بکار می رود

مثال :

ul
{
list-style-image: url('sqpurple.gif');
}

توسط عبارت url که جلوی این ویژگی نوشته شده ، تصویری که ادرس ان درون پرانتز است بعنوان نشانه لیست های نا مرتب بکار می رود

مشاهده و اجرای برنامه کامل

برخی مرورگرها قادر به نمایش تصویر گزینه های لیست نیستند

Crossbrowser

اگر می خواهید تصویر کنار گزینه های لیست در تمام مرورگرها و با یک کیفیت یکسان مشاهده شود  از crossbrowser استفاده کنید

که دستورات زیر می باشد :

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

مشاهده و اجرای برنامه کامل

 

شرح برنامه بالا :

خط 3:

list-style-type: none;

برای لیست های ul باعث می شود نشانه های عادی از کنار گزینه های لیست حذف شوند

خط 5 و 4 :

تنظیم دو ویژگی padding , margin برابر صفر باعث می شود که حالت crossbrowser درست کار کند

 

توضیح ویژگیهای سی اس اس برای تمام li های موجود در ul :

خط 9:

مشخص کردن تصویر مورد نظر برای نشانه گذاری گزینه های لیست

خط 10 :

تنظیم گزینه background-repeat:none برای جلوگیری از تکرار شدن تصویر

خط 11:

تنظیم محل نمایش تصویر

خط 12 :

تنظیم محل نمایش متن گزینه

 

 

ویژگیlist-style-position

محل نمایش بالت را مشخص می کند

و می تواند دو مقدار inside , outside داشته باشد

بصورت عملی تاثیر ان را مشاهده نمائید