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

Маркированный <ul> и нумерованный <ol> списки могут иметь не только традиционные маркеры или цифры для обозначения пунктов, но и использовать особые маркеры, которые можно задать с помощью 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>

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

Мышь
Кот
Сыр

Обратите внимание на то, что в значении свойства внутри атрибута были использованы одинарные кавычки, чтобы задать адрес картинки "...url( ' /favicon.ico ' );..". Если бы были использованы двойные кавычки, то браузер бы подумал, что атрибут style закончился. Но благодаря другому виду кавычек, свойство можно успешно записать в атрибут. Таким чередованием двойных и одинарных кавычек можно пользоваться в том числе и в JS скриптах внутри тегов, к примеру, onmousedown (читайте об этом подробнее в разделе JS скриптов).

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

Маркеры списков находятся за пределами списков. Поэтому они могут выпадать за края контейнера, где находится список. Чтобы понять о чём идёт речь, лучше продемонстрировать на примере. Возьмём контейнер с чёткой рамкой и маркированный список с обнулёнными отступами для его пунктов. Используем для этого такой 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>

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

Мышь
Кот

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