CSSطراحی سایتگوناگون

۸-فرمت دهی لیست ها در CSS

لیست ها در CSS

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

 

 

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

 


لیست ها در HTML

 

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

  • لیست های نامرتب(unorder list): با هر چیزی غیر از اعداد و حروف آیتم های این نوع لیست علامتگذاری می شوند.
  • لیست های مرتب(order list):  آیتم های لیست با اعداد و حروف، علامتگذاری می شوند.

با CSS امکان بیشتری برای دستکاری لیست ها وجود دارد، مثلاً آیتم های لیست را با یک عکس علامتگذاری کرد.

 


فرمت دهی لیست ها در CSS

 

علامتگذاری های مختلف(Bullet)

 

با خصوصیت list-style-type می توان، نوع علامتگذاری را تغییر داد:

 

 

  • بعضی از مقادیر برای لیست های نامرتب و بعضی دیگر برای لیست های مرتب استفاده می شود.تصویر قطعه کد بالا به شکل زیر است:

 


علامت گذاری آیتم ها با یک عکس

 

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

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


خصوصیت list-style-position

 

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

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


 

مختصر نویسی – لیست

 

 

همه ی خصوصیات مربوط به لیست را می شود در یک خط تنظیم کرد. به این کار مختصر نویسی گفته می شود.

خصوصیت list-style برای مختصرنویسی در CSS استفاده می شود:

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

 

ترتیب مقادیر:

  • ۱. list-style-type
  • ۲. list-style-position
  • ۳. list-style-image

اگر یکی از مقادیر بالا ذکر نشود، مشکلی در اجرا پیش نخواهد آمد، تنها چیزی که اهمیت دارد ترتیب مقادیر است.

 


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

 

خصوصیتتوضیحات
list-styleتمام خصوصیات مربوط به لیست را در یک مرحله تنظیم خواهد کرد
list-style-imageآیتم های یک لیست را با یک عکس علامتگذاری می کند
list-style-positionاگر آیتم های لیست علامتگذاری شده باشند، این خصوصیت مشخص می کند که علامتگذاری باید داخل(inside) یا خارج(outside) محتوی باشد
list-style-typeنوع علامتگذاری آیتم های لیست را مشخص می کند.

 


مثالی جامع برای نحوه فرمت دهی لیست ها

 

این مثال تمام علامتگذاری های مختلف را در CSS نشان خواهد داد.

 

  • تصویر قطعه کد بالا به شکل زیر است:

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

نوشته های مشابه

دیدگاهتان را بنویسید

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن