Нумерованный и маркерованный список (list-style) в CSS

<ul style="list-style-type: square;">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>

В этом коде используется свойство «list-style-type«. Оно задаёт вид маркера. Его возможные значения аналогичны атрибуту type=»…» («disc» — чёрная точка, «circle» — кружок с пустотой внутри, «square» — чёрный квадрат. Смотрите статью «Списки (ul, ol, li)») . Результат будет такой:

• Мышь
• Кот
• Сыр

У этого свойства существует ещё одно значение — это «none«:

<ul style="list-style-type: none;">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>

Оно полностью убирает любы маркеры у списка:

• Мышь
• Кот
• Сыр

Такое скрытие маркеров полезно при создании меню сайта. Обычно меню — это списки, но без маркеров.

Маркер в виде картинки

Существует возможность задать маркер в виде картинки. Делается это с помощью свойства «list-style-image», в значении которого можно указать url адрес фото (в том числе относительный адоес). Рассмотрим пример, в котором маркеры заменены на логотип этого сайта:

<ul style="list-style-image: url('/favicon.ico');">
   <li>Мышь</li>
   <li>Кот</li>
   <li>Сыр</li>
</ul>

В результате вместо маркеров появятся картинки:

• Мышь
• Кот
• Сыр

Позиция маркеров

Маркеры списков находятся за пределами списков. Поэтому они могут выпадать за края контейнера, где находится список. Чтобы понять о чём идёт речь, лучше продемонстрировать на примере. Возьмём контейнер с чёткой рамкой и маркированный список с обнулёнными отступами для его пунктов. Используем для этого такой HTML код:

<div style="border: 3px solid #c0d2de;">
   <ul style="padding: 0px;">
      <li>Мышь</li>
      <li>Кот</li>
      <li>Сыр</li>
   </ul>
</div>

Результат будет такой:

Мышь
Кот
Сыр

Маркеры выпали за пределы области. Этм свойством они обладают по умолчанию. Но его можно переопределить с помощью CSS свойства «list-style-position«. Если поставить его в значение «inside«, то маркеры будут внутри списка. А если «outside«, то снаружи списка, как в примере выше. Попробуем поместить их внутрь списка, добавим «list-style-position: inside;» к прошлому примеру:

<div style="border: 3px solid #c0d2de;">
   <ul style="padding: 0px; list-style-position: inside;">
      <li>Мышь</li>
      <li>Кот</li>
      <li>Сыр</li>
   </ul>
</div>

Результат будет такой:

Мышь
Кот

— теперь маркеры находятся внутри родительского контейнера и не выпадают за его пределы.