لیست های CSS

لیست های CSS

لیست ها عناصری با کاربرد های بسیار متنوع هستند. از جمله برای بخش navigation سایت و برای ایجاد کنترل های tab استفاده می شوند. Navigation معمولا شامل لیستی از لینک ها است، که دارای ویژگی های بصری می باشد و ثابت و خشک نیست، ما در این فصل به طریقه استایل دادن و معرفی خصوصیت هایی که برای کار با لیست ها در CSS استفاده میشود می پردازیم.

لیست های CSS لیست های CSS لیست های CSS list style type

خصوصیات مربوط به لیست ها در CSS به شما اجازه می دهد تا:

  • برای لیست های مرتب و نامرتب علامتگذاری های مختلفی را تنظیم کنید.
  • برای علامتگذاری آیتمها، از یک عکس استفاده کنید.

لیست

در HTML ، دو نوع لیست وجود دارد:

  • لیست نامرتب – آیتم های لیست با بولت (Bullet) نشان گذاری می شوند
  • لیست مرتب- آیتم های لیست با اعداد و یا حروف مشخص می شوند

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

خاصیت list-style-type

با استفاده از این خاصیت می توان برای لیست های مرتب و نامرتب bullet تعریف کرد. و یکی از ۱۴ مقدار زیر را می پذیرد.

disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower-greek , lower-latin , upper-latin , armenian , georgian , none
 

نوع نشانگر آیتم لیست با خاصیت list-style-type مشخص می شود :

مقدار پیشفرض برای لیست های نا مرتب (ul) : مقدار disc

مقدار پیشفرض برای لیست های مرتب (ol) : مقدار decimal

ممکن است در هنگام تعریف خصوصیات فوق، bullet لیست های مرتب را برای لیست های نامرتب در نظر بگیریم و بر عکس. شدیدا توصیه می شود که این کار انجام نشود و برای هر نوع از لیست ها bullet مخصوص به همان لیست را با توجه به معنای آن در نظر گرفت.

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

خاصیت list style image

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

 

نمونه بالا در همه مرورگرها به طور یکسان نمایش داده نمی شود در IE و Opera تصویر نشانگر کمی بالاتر از فایرفاکس، کروم و سافاری نمایش داده می شود.
اگر شما می خواهید تصویر نشانگر ، در تمام مرورگرها به طور یکسان قرار گیرد، راه حل Crossbrowser در زیر توضیح داده شده است.

توضیح نمونه :

  • برای ul :
    • تنظیم list-style-type به none برای حذف نشانگر آیتم لیست
    • تنظیم هر دوی padding و margin به ۰px (برای سازگاری cross-browser)
  • برای تمام لیست ها در ul:
    • تنظیم url تصویر ، و نمایش یک بار آن (بدون تکرار)
    • موقعیت دهی تصویر که شما آن را در آنجا می خواهید (left 0px and down 5px)
    • موقعیت دهی متن در لیست باpadding-left

کوتاه نویسی خاصیت list style

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

تمام خواص لیست CSS

خاصیت توضیحات
list-style تمام خواص برای یک لیست را در یک بیانیه تنظیم می کند
list-style-image یک تصویر را به عنوان نشانگر آیتم لیست ، مشخص می کند
list-style-position مشخص می کند که نشانگر آیتم لیست در داخل یا خارج از محتوا ظاهر شود
list-style-type نوع نشانگر آیتم لیست را مشخص می کند

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید