خواص مختلف یک لیست را در CSS می توان به صورت یکجا در خاصیت چند مقداری list-style تعیین کرده و یا هر کدام از ویزگی ها را به صورت جدا مقدار دهی کرد .

۱ ) تعیین خواص به وسیله خاصیت چند مقداری list-style :

می توان کلیه ویژگی های یک لیست را طبق الگوی زیر در خاصیت چند مقداری list-style تعیین کرد :

list-style : [ list-style-image ] [ list-style-position ] [ list-style-type ]

هر یک از موارد فوق را در قسمت دوم توضیح داده ایم :

۲ ) تعیین خواص به صورت جدا :

هر یک از خواص فوق را می توان به صورت تک مقداری نیز مقدار دهی کرد . این خواص در جدول زیر معرفی شده اند :

list-style-image:در این حالت یک عکس به عنوان نشانه لیست در ابتدای هر آیتم لیست ، به صورت یک آیکون کوچک نشان داده می شود . برای تعیین عکس به روش زیر عمل می کنیم :
– none : در این حالت هیچ عکسی در لیست نمایش داده نمی شود .
– URL : آدرس تصویری که می خواهیم در لیست قرار بگیرد را تعیین می کند .

 

list-style-position:موقعیت قرار گیری نشانه و متن آیتم های لیست را بر حسب یکی از حالت های زیر تعیین می کند :
– inside : نشانه لیست و متن آیتم های آن کمی تو رفته تر نمایش داده می شوند .
– outside : نشانه لیست و متن آیتم های به صورت عادی نمایش داده می شوند .

 

list-style-type:نوع نشانه لیست را از یکی از موارد زیر تعیین می کند :
– none : هیچ نشانه ای در ابتدای آیتم های لیست نمایش داده نمی شوند .
– disc : دایره توپر ، که انتخاب پیش فرض است .
– circle : دایره معمولی .
– square : مربع .
– demiacal : اعداد انگلیسی ( ۱ و ۲ و ۳ و … ) .
– demiacal-leading-zero : اعداد انگلیسی به همراه یک صفر در ابتدای اعداد کوچکتر از ۱۰ ( ۰۱ و ۰۲ و ۰۳ و … ) .
– lower-roman : اعداد کوچک یونانی ( iv , iii , ii , i , … ) .
– upper-roman : اعداد بزرگ یونانی ( IV , III , II , I , … ) .
– lower-alpha : حروف کوچک انگلیسی ( c , b , a , … ) .
– upper-alpha : حروف بزرگ انگلیسی ( C , B , A , … ) .
– lower-latin : حروف کوچک انگلیسی ( c , b , a , … ) .
– upper-latin : حروف بزرگ انگلیسی ( C , B , A , … ) .
– lower-greek : اعداد یونانی که به صورت حروفی نمایش داده می شود ( gamma , beta , alpha … ) .
– hebrew : یک نوع نشانه گذاری قدیمی است که توسط IE پشتیبانی نمی شود .
– armenian : یک نوع نشانه گذاری قدیمی است که توسط IE پشتیبانی نمی شود .
– georgian : یک نوع نشانه گذاری قدیمی به صورت ( gan , ban , an , … ) است که توسط IE پشتیبانی نمی شود .
– hirgana : یک نوع نشانه گذاری قدیمی به صورت ( e , u , i , a , … ) است که توسط IE پشتیبانی نمی شود .
– katakana : یک نوع نشانه گذاری قدیمی به صورت ( E , U , I , A … ) است که توسط IE پشتیبانی نمی شود .
– hirgana-iroha : یک نوع نشانه گذاری قدیمی به صورت ( ni , ha , ro , i … ) است که توسط IE پشتیبانی نمی شود .
– katakana-iroha : یک نوع نشانه گذاری قدیمی به صورت ( NI , HA , RO , I , … ) است که توسط IE پشتیبانی نمی شود .

در مثال های زیر خواص بالا را بررسی می کنیم :
مثال ۱ : تعیین یک عکس به عنوان نشانه لیست :

 خاصیت تک مقداری
My List :
< ul style=”list-style-image: url(../pic/mobsync.03.ico)” >
< li > Item 1 < /li >
< li > Item 2 < /li >
< /ul >
 خاصیت تک مقداری

My List :
< ul style=”list-style : url(../pic/mobsync.03.ico) outside none” >
< li > Item 1 < /li >
< li > Item 2 < /li >
< /ul >

مثال ۲ : مقایسه حالت های list-style-position

My List 1 :
< ul style=”list-style-position : inside” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >
My List 2 :
< ul style=”list-style-position : outside” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
</ul>

 

My List 1 :
< ul style=”list-style : none inside disc” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >
My List 2 :
< ul style=”list-style : none outside disc” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
</ul>

 

مثال ۳ : نمایش برخی از حالت های list-style-type :

لیست های نشانه ای

 My List 1 :
< ul style=”list-style-type: circle” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >
 My List 2 :
< ul style=”list-style-type: disc” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

 

 My List 3 :
< ul style=”list-style-type: square” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >

 

 

 My List 1 :
< ul style=”list-style : circle” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

 

 My List 2 :
< ul style=”list-style : disc” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

My List 3 :
< ul style=”list-style : square” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >

 

 

 

 

My List 1 :
< ul style=”list-style-type: demical” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

 

 

My List 2 :
< ul style=”list-style-type: upper-alpha” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >

 

My List 3 :
< ul style=”list-style-type: lower-roman” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >

 

لیست های ترتیبی عددی:

 

 My List 1 :
< ul style=”list-style : demical” >
< li > List 1 , Item 1 < /li >
< li > List 1 , Item 2 < /li >
< /ul >

 

 My List 2 :
< ul style=”list-style : upper-alpha” >
< li > List 2 , Item 1 < /li >
< li > List 2 , Item 2 < /li >
< /ul >
My List 3 :
< ul style=”list-style : lower-roman” >
< li > List 3 , Item 1 < /li >
< li > List 3 , Item 2 < /li >
< /ul >