قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / ليست ها در CSS

ليست ها در CSS

ليست ها در CSSReviewed by سالار on Apr 8Rating: 5.0

نکته مهم : قبل از مطالعه اين قسمت شما بايد به طور کامل با نحوه ايجاد ليست ها در HTML آشنا باشيد . برای دريافت اطلاعات در مورد ليست ها به بخش آموزش ليست ها در HTML برويد .

با استفاده از مجموعه خواص ليست ها در CSS ، می توان ويژگی های مختلف ليست ها را از قبيل موقعيت ، شکل يا نحوه نمايش اعداد و استفاده از تصاوير را در ليست ها تنظيم کرد .
مجموعه خواص زير در اين قسمت بررسی می شوند ، برای دريافت اطلاعات درباره هر کدام روی نام آن کليک کنيد :

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

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

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

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

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

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

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

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

نام خاصيت نوع خاصيت شرح
list-style-image none
URL
مسير فايل
در اين حالت يک عکس به عنوان نشانه ليست در ابتدای هر آيتم ليست ، به صورت يک آيکون کوچک نشان داده می شود . برای تعيين عکس به روش زير عمل می کنيم :
– none : در اين حالت هيچ عکسی در ليست نمايش داده نمی شود .
– URL : آدرس تصويری که می خواهيم در ليست قرار بگيرد را تعيين می کند .
list-style-position inside
outside
موقعيت قرار گيری نشانه و متن آيتم های ليست را بر حسب يکی از حالت های زير تعيين می کند :
– inside : نشانه ليست و متن آيتم های آن کمی تو رفته تر نمايش داده می شوند .
– outside : نشانه ليست و متن آيتم های به صورت عادی نمايش داده می شوند .
list-style-type none
disc
cicle
square
demical
demiacl-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
hiragana
katakana
hiragana-iroha
katakana-iroha
نوع نشانه ليست را از يکی از موارد زير تعيين می کند :
– 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 پشتيبانی نمی شود .

مثال ها :

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

Example
خاصيت تک مقداری خاصيت چند مقداری
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 >
کد
My List :

  • Item 1
  • Item 2
خروجی

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

Example
خاصيت تک مقداری خاصيت چند مقداری
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>
کد
My List 1 :

  • List 1 , Item 1
  • List 1 , Item 2
My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
خروجی

مثال ۳ : نمايش برخی از حالت های 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 :

  • List 1 , Item 1
  • List 1 , Item 2
My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
My List 3 :

  • List 3 , Item 1
  • List 3 , Item 2
خروجی
ليست های ترتيبی عددی
خاصيت تک مقداری خاصيت چند مقداری
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 >
کد
My List 1 :

  • List 1 , Item 1
  • List 1 , Item 2
My List 2 :

  • List 2 , Item 1
  • List 2 , Item 2
My List 3 :

  • List 3 , Item 1
  • List 3 , Item 2
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید