خريد CD های آموزشی

آموزش کامل JavaScript
آموزش کامل Java Script

خواص پيشرفته CSS

ليست ها در CSS :

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

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

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

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

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

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

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

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

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

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

نام خاصيت نوع خاصيت شرح
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 : اعداد انگليسی ( 1 و 2 و 3 و ... ) .
- demiacal-leading-zero : اعداد انگليسی به همراه يک صفر در ابتدای اعداد کوچکتر از 10 ( 01 و 02 و 03 و ... ) .
- 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 پشتيبانی نمی شود .

مثال ها :

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

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
 خروجی

مثال 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
 خروجی

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

ليست های نشانه ای
نکته مهم : در خاصيت چند مقداری ، می توان هر يک از خواصي که لازم است مقداردهی شود ، را تعيين کرد و جای بقيه را خالی گذاشت . به مثال 2 و مثال 3 دقت کنيد .
خاصيت تک مقداری خاصيت چند مقداری
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
خروجی