Как задать вид маркера маркированного списка

Маркированный список

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul> , а каждый пункт списка начинается с тега <li> , как показано ниже.

В списке непременно должен присутствовать закрывающий тег </ul> , иначе возникнет ошибка. Закрывающий тег </li> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Пример 11.1. Создание маркированного списка

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

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

Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега <ul> . Допустимые значения приведены в табл. 11.1

• Первый
• Второй
• Третий

• Первый
• Второй
• Третий

• Первый
• Второй
• Третий

Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.

Маркированные списки

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

С элементом <ul> связаны следующие особенности:

• в том месте, где встречается <ul> , браузер автоматически добавляет перенос строки;
• у списка имеются отступы сверху и снизу;
• маркеры по умолчанию отображаются в виде закрашенного кружка;
• каждый элемент списка сдвигается вправо по отношению к основному тексту.

На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

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

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

• disc — маркеры в виде закрашенного кружка;
• circle — маркеры в виде незакрашенного кружка;
• square — квадратные маркеры.

Пример 1. Изменение вида маркера

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к <li> не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым <li> добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

Пример 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 , оно устанавливает фоновое изображение. Для каждого элемента списка <li> мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

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

Положение текста и маркера

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

inside	outside

Рис. 5. Размещение маркеров относительно текста

Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

Пример 5. Изменение положения маркеров

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Списки</title> <style> ul < list-style-position: inside; ></style> </head> <body> <ul> <li>Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.</li> <li>При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.</li> <li>После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.</li> </ul> </body> </html>

HTML Списки

HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.

HTML Пример списка

Неупорядоченный список:

• Пункт
• Пункт
• Пункт
• Пункт

Упорядоченный список:

1. Первый пункт
2. Второй пункт
3. Третий пункт
4. Четвёртый пункт

Неупорядоченный HTML Список

Неупорядоченный (ненумерованный) список начинается с тега <ul> . Каждый элемент списка начинается с тега <li> .

Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:

Пример

Неупорядоченный HTML Список — выберите маркер элемента списка

CSS свойство list-style-type используется для определения стиля маркера элемента списка:

Значение	Описание
disc	Устанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию)
circle	Устанавливает маркер элемента списка в виде маленького пустого кружка
square	Устанавливает маркер элемента списка в виде квадрата
none	Элементы списка не будут отмечены (маркеры отсутствуют)

Пример — Disc

Пример — Circle

Пример — Square

Пример — None

Упорядоченный HTML Список

Упорядоченный (нумерованный) список начинается с тега <ol> . Каждый элемент списка начинается с тега <li> .

Элементы списка будут помечены номерами по умолчанию:

Пример

Упорядоченный HTML Список — Атрибут Type

Атрибут type тега <ol> определяет тип маркера элемента списка:

Тип	Описание
type="1"	Элементы списка будут пронумерованы цифрами (по умолчанию)
type="A"	Элементы списка будут пронумерованы заглавными буквами
type="a"	Элементы списка будут пронумерованы строчными буквами
type="I"	Элементы списка будут пронумерованы большими римскими цифрами
type="i"	Элементы списка будут пронумерованы маленькими римскими цифрами

Цифры:

Заглавные буквы:

Строчные буквы:

Большие римские цифры:

Маленькие римские цифры:

HTML Списки описания

HTML также поддерживает списки описания.

Список описания — это список терминов с описанием каждого термина.

Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:

Пример

Вложенные HTML-списки

Список может быть вложенным (списки внутри списков):

Пример

Примечание: Элементы списка могут содержать новый список и другие элементы HTML, такие как изображения и ссылки и т.д.

Подсчет контрольного списка

По умолчанию упорядоченный список начинает отсчет с 1. Если вы хотите начать подсчет с указанного числа, вы можете использовать атрибут start :

Пример

Горизонтальный список с помощью CSS

HTML-списки можно стилизовать различными способами с помощью CSS.

Один из популярных способов — это стилизовать список по горизонтали для создания меню навигации:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
>

li a <
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
>

Совет: Вы можете узнать больше о CSS в нашем CSS Учебнике.

Резюме раздела

• Используйте HTML елемент <ul> для определения неупорядоченного списка
• Используйте CSS свойство list-style-type для определения маркера элемента списка
• Используйте HTML элемент <ol> для определения упорядоченного списка
• Используйте HTML атрибут type для определения типа нумерации
• Используйте HTML элемент <li> для определения элемента списка
• Используйте HTML элемент <dl> для определения списка описания
• Используйте HTML элемент <dt> для определения термина описания
• Используйте HTML элемент <dd> для описания термина в списке описания
• Списки могут быть вложены в списки
• Элементы списка могут содержать другие элементы HTML
• Используйте CSS свойство float:left или display:inline для горизонтального отображения списка

HTML Упражнения

HTML Теги списка

Тег	Описание
<ul>	Определяет неупорядоченный (ненумерованный) список
<ol>	Определяет упорядоченный (нумерованный) список
<li>	Определяет пункты списка
<dl>	Определяет список описания
<dt>	Определяет термин в списке описания
<dd>	Описывает термин в списке описания

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

• Для чего нужны HTML-списки?
• Какие бывают HTML-списки?
• Каким тегом определяется неупорядоченный HTML-список?
• Каким тегом определяется упорядоченный HTML-список?
• Каким тегом определяется каждый элемент в HTML-списке?
• Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
• Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
• Что такое список описаний?
• Какой тег определяет список описаний?
• Какой тег определяет термин (имя) в списке описаний?
• Какой тег определяет описание каждого термина в списке описаний?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

WEB-дизайн

Использование списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов. С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height .

Тип маркера списка list-style-type

Свойство list-style-type изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков.

Значения:

• none — Отменяет маркеры для списка.
• disc — Значение по умолчанию. Маркер в виде закрашенного круга.
• circle — Маркер в виде незакрашенного круга.
• decimal — Арабские числа (1, 2, 3, 4. ).
• decimal-leading-zero — Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ).
• upper-alpha , upper-latin — Заглавные латинские буквы (A, B, C, . ).
• lower-alpha , lower-latin — Строчные латинские буквы (a, b, c, . ).
• upper-roman — Римские числа в верхнем регистре (I, II, III, IV, V, . ).
• lower-roman — Римские числа в нижнем регистре (i, ii, iii, iv, v, . ).
• hiragana — Японская нумерация: a, i, u, e, o, .
• hiragana-iroha — Японская нумерация: i, ro, ha, ni, ho, .
• katakana — Японская нумерация: A, I, U, E, O, .
• katakana-iroha — Японская нумерация: I, RO, HA, NI, HO, .
• lower-greek — Строчные греческие буквы (α, β, γ, δ, . ).
• georgian — Традиционная грузинская нумерация.
• armenian — Традиционная армянская нумерация.

Пример:

Результат:

• Word
• Excel
• Power Point
• Access

Изображения для элементов списка list-style-image

Свойство list-style-image предоставляет возможность использовать рисунок в качестве маркера элемента списка.