Форматирование неупорядоченных и упорядоченных списков с помощью CSS

В HTML есть три разных типа списков:

Неупорядоченные списки (ul, сокращенно от unordered lists) — список элементов, где каждый элемент списка помечен маркером;
Упорядоченные списки (ol, сокращенно от ordered lists) — список элементов, где каждый элемент списка помечен номером;
Список определений (dl, сокращенно от definition list) — список элементов с описанием каждого элемента.

См. Руководство по спискам в HTML, чтобы узнать больше о том, как их создавать.

Стилизация списков с помощью CSS

CSS предоставляет несколько свойств для стилизации и форматирования наиболее часто используемых неупорядоченных и упорядоченных списков. Эти CSS-свойства обычно позволяют:

Изменять форму и внешний вид маркера;
Устанавливать изображение для маркера;
Устанавливать расстояние между маркером и текстом в списке;
Указывать, будет ли маркер отображаться внутри или снаружи поля, содержащего элементы списка.

Теперь обсудим свойства, которые можно использовать для стилизации HTML-списков.

Изменение типа маркера списков

По умолчанию элементы в упорядоченном списке нумеруются арабскими цифрами (1, 2, 3, 5 и т. д.), тогда как в неупорядоченном списке элементы помечаются круглыми маркерами (•).

Но вы можете изменить этот тип маркера по умолчанию на любой другой тип, такой как римские цифры, латинские буквы, круг, квадрат и т. д., используя свойство list-style-type.

Посмотрим следующий пример, чтобы понять, как работает это свойство:

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Изменение положения списка маркеров

По умолчанию маркеры для каждого элемента списка располагаются за пределами (outside) их блока.

Однако вы также можете расположить эти маркеры внутри элементов списка, используя свойство list-style-position вместе со значением inside. В этом случае строки будут переноситься с маркером, а не с отступом. Вот пример:

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

Посмотрим на следующую иллюстрацию, чтобы понять, как работает это свойство.

Лучше не использовать значение inside в основном контенте страницы, там где могут быть использованы теги <p> внутри тегов <li>. Дело в том, что маркер списка строчный элемент, а тег <p> блочный и он будет переноситься на следующую строку.

Использование изображений в качестве маркеров списка

Вы также можете установить изображение в качестве маркера списка, используя свойство list-style-image.

Правило в следующем примере назначает прозрачное изображение PNG arrow.png в качестве маркера списка для всех элементов в неупорядоченном списке.

ul li {
    list-style-image: url("images/arrow.png");
}

В некоторых браузерах свойство list-style-image может дать не ожидаемый результат. Вы можете использовать следующее решение для лучшего контроля расположения маркеров с изображениями.

В качестве альтернативного пути вы также можете установить маркеры изображения через CSS-свойство background-image. Во-первых, установите list-style-type в значение none, чтобы не было маркеров. Во-вторых определите не повторяющееся (background-repeat: no-repeat) фоновое изображение (background-image) для элемента списка.

В следующем примере маркеры изображения отображаются одинаково во всех браузерах:

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Установка всех свойств списка одновременно

Свойство list-style является кратким свойством для определения всех трех свойств list-style-type, list-style-image и list-style-position списка в одном.

Следующее правило устанавливает все свойства списка в одном объявлении.

ul {
    list-style: square inside url("images/bullet.png");
}

При использовании сокращенного свойства list-style, важен порядок значений: list-style-type | list-style-position | list-style-image. Не имеет значения, пропущено ли одно из указанных выше значений, если остальные находятся в указанном порядке.

Создание меню навигации с использованием списков

HTML-списки часто используются для создания горизонтальной панели навигации или меню, которое обычно отображаются в верхней части веб-сайта. Но поскольку элементы списка являются блочными элементами, для их переопределения в строчные нам нужно использовать CSS-свойство display. Посмотрим пример, чтобы понять, как это работает:

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

Подробнее о CSS-свойствах display и padding вы узнаете в следующих главах.