CSS/Списки

list-style-type

Это свойство определяет вид маркера в списке и для маркированных списков может принимать значения:

disc

(значение по умолчанию)

circle

square

Для нумерованных списков:

decimal

(значение по умолчанию)

lower-roman

upper-roman

lower-alpha

upper-alpha

decimal-leading-zero, CSS2.1

lower-latin, CSS2.1

upper-latin, CSS2.1

armenian, CSS2.1

georgian, CSS2.1

lower-greek, CSS2.1

Общее значение для списков, которое отменяет маркеры:

none

list-style-image

Это свойство позволяет задать в качестве маркера изображение.

Если вместо адреса изображения указать значение none, то вид маркера будет определяться свойством list-style-type.

Пример:

CSS:

li.odd {
  list-style-image: url('green_bullet.gif');
}
li.even {
  list-style-image: url('red_bullet.gif');
}

HTML:

<ul>
  <li class="odd">Item 1</li>
  <li class="even">Item 2</li>
  <li class="odd">Item 3</li>
  <li class="even">Item 4</li>
</ul>

Внешний вид:

• Item 1

• Item 2

• Item 3

• Item 4

list-style-position

Это свойство задаёт позицию маркера или изображения относительно элемента списка.

Значения:

• inside — маркер или изображение обтекается текстом;
• outside — маркер или изображение находится вне списка. (значение по умолчанию)

Примеры:

inside

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.

outside (значение по умолчанию)

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed auctor lacus. Ut ligula urna, scelerisque et magna ac, viverra sagittis risus. Maecenas sit amet lectus faucibus, euismod sapien vel, molestie tellus. Etiam interdum facilisis orci, non gravida elit euismod.

list-style

Сокращённая форма записи этих свойств:

list-style: list-style-type list-style-position list-style-image;