Свойства для маркированного списка

Каждый пункт маркированного списка начинается с маркера — специального символа, в качестве которого часто выбирается жирная точка или квадратик (рис. 1).

Рис. 1. Вид маркированного списка

Нам самим нет необходимости добавлять маркеры, всё это делает браузер автоматически. Достаточно лишь правильно разметить текст для списков — весь текст помещается внутрь элемента <ul>, а каждый пункт списка — внутрь элемента <li> (пример 1).

Пример 1. Разметка списка

<p>Породы дерева для мебели</p> <ul> <li>Сосна</li> <li>Лиственница</li> <li>Ясень</li> <li>Дуб</li> </ul>

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

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

circle — кружок;
square — квадратик;
disc — точка.

Само свойство добавляется к селектору ul или li, как показано в примере 2.

Пример 2. Тип маркера

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> ul { list-style-type: square; /* Квадратные маркеры */ } </style> </head> <body> <ul> <li>Гай Юлий Цезарь Октавиан Август</li> <li>Тиберий Юлий Цезарь Август</li> <li>Гай Юлий Цезарь Август Германик</li> <li>Тиберий Клавдий Цезарь Август Германик</li> <li>Нерон Клавдий Цезарь Август Германик</li> </ul> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Список с квадратными маркерами

Пользовательские маркеры

Свойство list-style-type предлагает весьма ограниченный набор маркеров, но в качестве значения в кавычках можно написать произвольный символ.

ul {
  list-style-type: '◈';
}

Другой способ установить символ в качестве маркера — воспользоваться псевдоэлементом ::marker в комбинации со свойством content.

li::marker {
  content: '◈';
}

Различные символы для маркеров можно найти на этом сайте: symbl.cc/ru/collections/list-bullets/

В примере 3 показано добавление символов маркера и изменение их цвета с помощью ::marker.

Пример 3. Использование ::marker

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> li::marker { content: '◈'; /* Маркер списка */ color: green; /* Зелёный цвет */ } </style> </head> <body> <ul> <li>Гай Юлий Цезарь Октавиан Август</li> <li>Тиберий Юлий Цезарь Август</li> <li>Гай Юлий Цезарь Август Германик</li> <li>Тиберий Клавдий Цезарь Август Германик</li> <li>Нерон Клавдий Цезарь Август Германик</li> </ul> </body> </html>

Результат данного примера показан на рис. 3. В браузере Safari свойство content для ::marker не работает, поэтому на картинке маркеры только меняют свой цвет.

Рис. 3. Список с пользовательскими маркерами

Псевдоэлемент ::marker имеет ряд ограничений — для маркеров нельзя установить отступы и задать цвет фона. Если это требуется согласно дизайну макета, то вместо ::marker следует использовать псевдоэлемент ::before, как это показано в примере 4. Предварительно следует скрыть «родные» маркеры с помощью свойства list-style или list-style-type со значением none.

Пример 4. Использование ::before

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> li { list-style-type: none; /* Скрываем маркеры */ } li::before { content: '◈'; /* Маркер списка */ background-color: green; /* Зелёный фон */ color: white; /* Белый цвет маркеров */ font-size: 0.9em; /* Размер символов */ padding: 0 2px; /* Расстояние справа и слева */ margin-right: 0.5em; /* Расстояние от маркера до текста */ } </style> </head> <body> <ul> <li>Гай Юлий Цезарь Октавиан Август</li> <li>Тиберий Юлий Цезарь Август</li> <li>Гай Юлий Цезарь Август Германик</li> <li>Тиберий Клавдий Цезарь Август Германик</li> <li>Нерон Клавдий Цезарь Август Германик</li> </ul> </body> </html>

Результат данного примера показан на рис. 4.

Рис. 4. Список с пользовательскими маркерами

Картинка в качестве маркера

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

Вот как задать картинку для маркера списка через функцию url().

li {
  list-style-image: url(image/bullet.png);
}

Градиентная картинка делается через специальные стилевые функции, вроде linear-gradient() или radial-gradient(), которые выступают значением свойства list-style-image. В примере 5 показано применение радиального градиента для создания маркеров списка.

Пример 5. Использование radial-gradient()

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> li { --c: red; /* Цвет маркера */ list-style-image: radial-gradient(var(--c), var(--c) 50%, white 50%); } </style> </head> <body> <ul> <li>Через любые две точки можно провести прямую, и притом только одну.</li> <li>Через две точки прямой, лежащие в плоскости, проходит вся прямая.</li> <li>Через точку, не лежащую на прямой, проходит только одна прямая, параллельная данной.</li> </ul> </body> </html>

Результат данного примера показан на рис. 5. В радиальном градиенте красный цвет резко переходит в белый цвет, давая в итоге красную точку желаемого размера.

Рис. 5. Градиент в качестве маркера

Настройка отступов

Вокруг самого списка и его пунктов автоматически добавляются небольшие отступы, которые становятся хорошо заметными, если поместить список внутрь блока с рамкой (рис. 6).

Рис. 6. Список внутри рамки

Все эти дополнительные отступы регулируются с помощью ряда свойств для селектора ul:

margin-top — пространство от списка до верхней границы;
margin-bottom — пространство от списка до нижней границы;
padding-left — пространство от списка до левой границы.

Наглядно эти свойства показаны на рис. 7.

Рис. 7. Свойства, настраивающие отступы в списке

Эти же свойства можно применять и к селектору li, тогда они регулируют отступы вокруг каждого пункта списка:

margin-top — пространство перед пунктом списка;
margin-bottom — пространство после пункта списка;
padding-left — расстояние от маркера до текста.

Наглядно эти свойства показаны на рис. 8.

Рис. 8. Свойства, настраивающие отступы пункта списка

Для обнуления отступов списка можно воспользоваться универсальными свойствами margin и padding.

ul {
  margin: 0;
  padding: 0;
}

Учтите, что нулевое значение у padding также обычно скрывает маркеры списка, потому что они оказываются за пределами области видимости (рис. 9).

Рис. 9. Обнуление отступов

В примере 6 показано изменение расстояния между маркером и пунктом списка с помощью свойства padding-left.

Пример 6. Использование padding-left

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> ul { margin: 0; /* Расстояние сверху и снизу списка */ } li { padding-left: 0.5em; /* Расстояние от маркера до текста */ } </style> </head> <body> <ul> <li>Гай Юлий Цезарь Октавиан Август</li> <li>Тиберий Юлий Цезарь Август</li> <li>Гай Юлий Цезарь Август Германик</li> <li>Тиберий Клавдий Цезарь Август Германик</li> <li>Нерон Клавдий Цезарь Август Германик</li> </ul> </body> </html>

Результат данного примера показан на рис. 10.

Рис. 10. Расстояние от маркера до текста

Обтекание маркеров текстом

Длина текста в пунктах списка никак не ограничена и может занимать не одну, а несколько строк. При переносе текста он выравнивается по левому краю, на небольшом расстоянии от маркера. Это всё становится хорошо заметно, если провести условные вертикальные линии вдоль маркеров и текста, как показано на рис. 11.

Рис. 11. Выравнивание текста списка по левому краю

Свойство list-style-position со значением inside позволяет изменить это поведение и сделать обтекание маркеров текстом. Добавляется это свойство к селектору ul или li.

ul {
  list-style-position: inside;
}

Вот как в итоге будет выглядеть список с обтеканием (рис. 12).

Рис. 12. Значение inside свойства list-style-position

Горизонтальные списки

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

ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

Горизонтальное размещение делается через свойство display со значением flex.

ul.menu {
  display: flex;
}

Остальные свойства предназначены для дизайна нашего меню и показаны в примере 7.

Пример 7. Горизонтальное меню

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Маркеры</title> <style> .menu { margin: 0; /* Расстояние сверху и снизу списка */ padding: 0; /* Расстояние слева от списка */ list-style: none; /* Скрываем маркеры */ background-color: #004071; display: flex; /* Размещаем по горизонтали */ } .menu a { text-decoration: none; /* Убираем подчёркивание */ color: #fff; /* Белый цвет ссылок */ display: inline-block; /* Строчно-блочные ссылки */ padding: 0.5em; /* Расстояние вокруг текста */ transition: 0.5s; /* Плавное изменение цвета */ &:hover { background-color: #0084e7; /* Цвет фона при наведении */ } } </style> </head> <body> <ul class="menu"> <li><a href="#">Главная</a></li> <li><a href="#">Бокалы</a></li> <li><a href="#">Ингредиенты</a></li> <li><a href="#">Коктейли</a></li> </ul> </body> </html>

Результат данного примера показан на рис. 13.

Рис. 13. Вид горизонтального меню

Итоги

Маркированный список создаётся с помощью HTML-элементов <ul> и <li>.
За изменение типа маркера отвечает свойство list-style-type или list-style. Его значениями могут быть: circle — кружок; square — квадратик; disc — точка. В качестве маркера допустимо использовать произвольный символ, указывая его как значение свойства content. Оно пишется в селекторе li::marker.
```
li::marker {
  content: '►';
}
```
Свойство list-style-image позволяет в качестве маркера списка установить произвольную картинку.
По умолчанию текст в списке не обтекает маркеры, но свойство list-style-position со значением inside позволяет это сделать.
К каждому списку браузер добавляет автоматические отступы, их можно изменить через свойства margin и padding.
Маркированный список можно превратить в горизонтальное меню, добавив к селектору ul свойство display со значением flex.