Списък

В HTML, има два вида списъци:

• Неподредените списъци – елементите на списъка са отбелязани с точки или друг символ
• Подредените списъци – елементите на списъка са отбелязани с цифри или букви

Със CSS можем да стилизираме списъците и да Опитайте сами »

Някои стойности се използват само за неподредените, а други за подредените.

Изображение като Маркер за отбелязване

За да зададем картинка за маркер, трябва да използваме пропъртито list-style-image:

Горния пример няма да се покаже еднакво във всички браузъри. IE и Opera ще покажат маркера малко по-нагоре, отколкото Firefox, Chrome и Safari. Ако искате картинката-маркер да изглежда еднакво във всички браузъри, долу има решение.

Crossbrowser Решение

Следващият пример показва как картинките-маркери могат да изглеждат еднакво във всички браузъри:

• За неподредени:
  • Задайте list-style-type като none, за да премахне bullet-a преди елементите
  • Задайте padding и margin на 0
• За подредени списъци.:
  • Заредете URL на изображението и махнете повторението (no-repeat)
  • Позиционирайте изображението където искате да застане
  • Позиционирайте текста с padding-left

Списък – Shorthand пропърти

Както посочихме в предните глави, вместо да изброявате всички пропъртита едно по едно – може да зададете всички стилове в едно съкратено пропърти. Shorthand пропъртито за списъци е list-style:

При използване на съкратеното пропърти, реда на стиловете е следният:

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

Няма значение ако единия елемент липсва, стига останалите да не нарушават реда си. Всички различни маркери за елементи на списък Този пример показва всички маркери за означаване на елементи на списъци в CSS.

Всички CSS List Properties