آموزش کار با لیست ها در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لیست ها در CSS با من همراه باشید.

آموزش کار با لیست ها در CSS

Free-Learn

آموزش کار با لیست ها در CSS

در این جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با لیست ها در این زبان کار کنیم و با نحوه کار با آنها آشنا شویم، لطفا در ادامه و تا پایان با بنده همراه باشید.

همونطور که در سری آموزش های زبان HTML خواندیم ما ۲ نمونه لیست اصلی داریم، یکی لیست نامرتب که با استفاده از تگ UL ایجاد می شود و دیگری لیست مرتب که با استفاده از تگ OL ایجاد می شود.

حال همین لیست هارو ما در CSS میتوانیم با استفاده از یکسری ویژگی باهاشون کار کنیم، مثلا ویرایششون کنیم یا از نظر ظاهری تغییراتی درشون ایجاد کنیم.

در ادامه میخواهیم با ویژگی های زیر در CSS که مرتبط با لیست ها هستند کار کنیم :

  • list-style-type : نوع شماره گذاری آیتم ها را مشخص میکند
  • list-style-image : عکس بجای شماره گذاری آیتم ها میگذارد
  • list-style-position : موقعیت قرار گیری آیتم ها را مشخص میکند

Free-Learn

تغییر نوع شماره گذاری آیتم ها با استفاده از ویژگی List-Style-Type

با استفاده از این ویژگی میتوان نوع شماره گذاری آیتم های یک لیست ( مرتب شده یا نامرتب ) را مشخص کرد.

از مقادیر زیر میتوان در این ویژگی برای لیست های نامرتب استفاده کرد :

  • circle
  • disc
  • square
  • none

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

  • armenian
  • cjk-ideographic
  • decimal
  • decimal-leading-zero
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • lower-alpha
  • lower-greek
  • lower-latin
  • lower-roman
  • upper-alpha
  • upper-greek
  • upper-latin
  • upper-roman
  • none

مثال : در این مثال تمامی مقادیر بالا بکار گرفته شده است.

امتحان کنید

مثال شماره ۲ : سفارشی سازی آیتم های لیست

امتحان کنید

Free-Learn

تصویر بجای آیتم های لیست با استفاده از ویژگی List-Style-Image

در CSS با استفاده از ویژگی list-style-image میتوانیم یک تصویر / عکس رو بجای شماره گذاری آیتم های لیست ها بگذاریم ، به گونه ای که آیتم های لیست با تصویر نمایش داده شوند.

نحوه استفاده از این ویژگی بصورت زیر می باشد :

مثال :

امتحان کنید

Free-Learn

موقعیت قرار گیری آیتم های لیست با استفاده از ویژگی List-Style-Position

با استفاده از این ویژگی میتوان موقعیت قرار گیری آیتم های یک لیست را مشخص کرد، این ویژگی ۲ مقدار زیر را میتواند بپذیرد :

  • outside : بصورت پیش فرض این گزینه فعال است
  • inside : گلوله پُررنگ در داخل لیست قرار میگیرد

مثال :

امتحان کنید

Free-Learn