خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد:

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

انواع لیست ها

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

  • (unordered lists (<ul> – تمامی اقلام یا آیتم های لیست با علامت Bullets نشانه گذاریشده اند.
  • (ordered lists (<ol> – آیتم های لیست با عدد یا حروف علامت گذاری شده اند.

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

نشانگرهای مختلف آیتم های لیست ( list item marker )

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

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

برخی از مقادیر مثال بالا برای لیست های دارای ترتیب حروفی و عددی و برخی دیگر مختص فهرست های فاقد ترتیب عددی / حروفی است.

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

برای این منظور انتخاب تصویر به عنوان نشانگر آیتم در لیست (کافی است از خاصیت list-style-image) بهره بگیرید.

ul {
list-style-image: url('sqpurple.gif');
}

مثالی که در بالا مشاهده می کنید در کلیه ی مرورگرها به طور مشابه نمایش داده نمی شوند. IE و Opera هر دو image-marker (تصویر نشانگر) را کمی بالاتر نسبت به مرورگرهای Firefox ،Chrome و Safari نمایش می‌دهد.

اگر می خواهید image-marker در تمامی مرورگرها در مکانی یکسان جاگذاری و نمایش داده شود، می توانید از مثال زیر کمک بگیرید که در آن image-marker در چندین مرورگر مختلف به طور مشابه و درموقعیتی یکسان قرار گرفته است.

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left:15px;
}

توضیح کد ها:

برای <ul>

به منظور حذف نشانگر آیتم لیست، list-style-type را روی none تنظیم کنید .هر دو خصوصیت padding (ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می‌کند) و margin (فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند( را به 0px تنظیم کنید) بنا به دلایل سازگاری یا compatibility جهت پشتیبانی از چندین مرورگر / سازگاری یک صفحه وب وکدهای آن با مرورگرهای گوناگون).

برای تمامی <li> در <ul>

URL تصویر مربوطه را انتخاب کرده و آن را تنها یکبار نمایش می دهد (بدون هیچ تکراری).تصویر مورد نظر را هرجا که مایلید قرار دهید( left 0px و vertical value center.) نوشته را در لیست با padding-left جای گذاری کنید.

آموزش خاصیت List – Shorthand:

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

ul {
list-style: square inside url("sqpurple.gif");
}

در حین استفاده از خاصیت یا ویژه گی مختصر نویسی، توجه داشته باشید که ترتیب مقادیر property هابه ترتیب زیر هستند.

  • list-style-type چنانچه (  list-style-image مشخص شده باشد، مقدار این خاصیت در صورت عدم امکاننمایش تصویر (به هر دلیلی)، نشان داده می شود) .
  • ist-style-position (مشخص می کند آیا نشانگرهای آیتم های لیست باید داخل یا خارج گردش محتوا( content flow ) نمایش داده شوند)
  • list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست انتخاب می کند).

در صورت عدم وجود یا در دسترس نبودن یکی از مقادیر property های فوق، مقدار پیش فرض برایخصوصیتی که در دسترس نیست درج می شود.

منبع: w3school