Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера — обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
С элементом
-
связаны следующие особенности:
- в том месте, где встречается
-
, браузер автоматически добавляет перенос строки;
- у списка имеются отступы сверху и снизу;
- маркеры по умолчанию отображаются в виде закрашенного кружка;
- каждый элемент списка сдвигается вправо по отношению к основному тексту.
На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
Рис. 1. Вид маркированного списка
Вид маркера
Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
- disc — маркеры в виде закрашенного кружка;
- circle — маркеры в виде незакрашенного кружка;
- square — квадратные маркеры.
Пример 1. Изменение вида маркера
В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к
Пример 2. Использование ::before
Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.
Рис. 2. Произвольные маркеры в списке
Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).
Рис. 3. Выбор символа в LibreOffice
Список с рисованными маркерами
Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.
Пример 3. Использование изображения в качестве маркера
Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок.
Рис. 4. Рисунок в качестве маркера
Применение list-style-image обладает некоторыми недостатками:
- рисунок нельзя сдвинуть вверх или вниз;
- в разных браузерах положение рисунка относительно текста может отличаться.
Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка
мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).
Пример 4. Использование background
Положение текста и маркера
Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
 |
 |
| inside | outside |
Рис. 5. Размещение маркеров относительно текста
Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).
Пример 5. Изменение положения маркеров
Результат данного примера показан на рис. 6.
| Маркеры списка | |
|---|---|
| •‣⁃ | |
| ◄ | „ | ‟ | † | ‡ | • | ‣ | ․ | ‥ | … | ► |
| ◄ | ‟ | † | ‡ | • | ‣ | ․ | ‥ | … | ‧ | ► |
| ◄ | ‿ | ⁀ | ⁁ | ⁂ | ⁃ | ⁄ | ⁅ | ⁆ | ⁇ | ► |
‣: triangular bullet
⁃: hyphen bullet
‣: U+2023
⁃: U+2043
‣:
⁃:
‣: 0x2023
⁃: 0x2043
‣: %E2%80%A3
⁃: %E2%81%83
Ма́ркер списка, бу́ллит, бу́ллет, бу́лит ( • ) (англ. bullet ) — типографский знак, используемый для выделения элементов списка, как показано на примере ниже:
- Это первый элемент списка. Обратите внимание на буллит слева.
- Это следующий элемент списка, и перед ним стоит ещё один буллит.
Это вторая строка второго элемента списка, и поэтому перед ней буллит не ставится.
Употребление [ править | править код ]
Обычно булиты используются в справочных и технических материалах, чтобы обозначить последовательность связанных элементов. Этими элементами могут быть короткие отрывки текста либо полноценные абзацы; в любом случае принято завершать все элементы, кроме последнего, точкой с запятой, и только последний — точкой. Иногда точкой завершают все элементы списка, как показано в примере ниже (способ 2), а иногда их не завершают вовсе. Кроме того, элементы принято начинать со строчной буквы.
| Способ 1 (основной) | Способ 2 | Способ 3 |
|---|---|---|
|
|
|
Графические формы [ править | править код ]
В традиционной русской типографике роль маркера списка играет тире (—), хотя издавна допускалось использование и других типографских знаков (кружков, ромбиков, звёздочек и т. п.). В последнее время использование компьютерных программ западного производства привело к распространению в деловой и технической документации тех стилей оформления текста, которые ими поддерживаются проще всего; в частности, прижилось использование буллита для маркировки списков. Вместе с тем Единая система конструкторской документации (ЕСКД, ГОСТ серии 2) не допускает использование этого маркера списков.
В Юникоде определены несколько графических вариантов буллитов:
| Символ | Код | Название | HTML |
|---|---|---|---|
| • | U+2022 | BULLET | • или • |
| ‣ | U+2023 | TRIANGULAR BULLET | ‣ |
| ⁃ | U+2043 | HYPHEN BULLET | ⁃ |
| ⁌ | U+204C | BLACK LEFTWARDS BULLET | ⁌ |
| ⁍ | U+204D | BLACK RIGHTWARDS BULLET | ⁍ |
| ∙ | U+2219 | BULLET OPERATOR | ∙ |
| ◦ | U+25E6 | WHITE BULLET | ◦ |
Первому из этих вариантов соответствует в HTML именованная сущность • , но для разметки маркированных списков лучше использовать специальный элемент .
В Windows буллит можно набирать сочетанием Alt+0149 (нажать и удерживать Alt, а в это время набрать на цифровом блоке клавиатуры 0149).
В CSS для создания маркированных списков используется атрибут list-style-type, который допускает три графических варианта буллита: disc (чёрный кружок), circle (чёрное колечко) и square (чёрный квадратик). Кроме того, атрибут list-style-image позволяет использовать буллит произвольного вида, указав URL графического файла с его изображением. Например, в приведённом выше примере использование CSS позволило задать для буллитов вид серо-голубых квадратиков.
При наборе текста на пишушей машинке буллиты часто заменялись звёздочками. Этот способ обозначения маркированных списков сохранился в вики-разметке, и некоторые текстовые процессоры сами преобразуют строки, набранные со звёздочкой в начале, в маркированные списки.
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
-
, а каждый пункт списка начинается с тега
, как показано ниже.
В списке непременно должен присутствовать закрывающий тег
, иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
-
. Допустимые значения приведены в табл. 11.1
| Тип списка | Код HTML | Пример |
|---|---|---|
| Список с маркерами в виде круга |
|
|
| Список с маркерами в виде окружности |
|
|
| Список с квадратными маркерами |
|
|
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Вид списка с квадратными маркерами
