Ещё в первой версии языка HTML был предусмотрен целый набор специальных тегов для представления информации в виде списков. И это не случайно, ведь списки являются одной из наиболее часто употребляемых форм представления данных в электронных и печатных документах. Вот лишь несколько случаев, для которых использование списков довольно удобно:
- Расположение информации в стиле оглавления, пункты которого указывают на соответствующие разделы документа.
- Объединение фрагментов информации в единую структуру для придания удобочитаемого вида.
- Описание сложных пошаговых процессов.
На сегодняшний день в HTML поддерживается три типа списков: маркированный, нумерованный и список определений. Рассмотрим особенности построения указанных списков, а также стилевые свойства, позволяющие изменять их внешний вид.
Маркированный список
Маркированный список — это список элементов, порядок следования которых не имеет значения. Иногда такие списки также называют неупорядоченными. Их можно использовать для отображения такой информации, как, например, перечень продукции, список доступных возможностей, тезисов и т.п.
Для организации маркированного списка используется HTML-элемент <ul> (сокр. от англ. unordered list — «неупорядоченный список»). Оба тега элемента — открывающий и закрывающий — являются обязательными. В открывающем теге могут присутствовать универсальные атрибуты и атрибуты событий (см. спецификацию).
Содержимым элемента <ul> могут быть элементы <li> (от нуля и более), с помощью которых собственно и создаются отдельные элементы списка. Всё содержимое элемента <ul> в браузере выводится с увеличенным отступом слева (см. рис. ниже).
Пример разметки простого маркированного списка:
<p>Текст предшествующего абзаца.<p/> <ul> <li>Первый элемент списка.</li> <li>Второй элемент списка.</li> <li>Третий элемент списка.</li> </ul>
В браузере это будет выглядеть так:
Элементы маркированного списка
Для выделения каждого элемента маркированного списка используется HTML-элемент <li> (сокр. от англ. list item – «элемент списка»). В открывающем теге элемента <li> могут присутствовать универсальные атрибуты и атрибуты событий. Закрывающий тег элемента является необязательным и может быть опущен, если за элементом непосредственно следует другой элемент <li> или закрывающий тег </ul> (см. спецификацию).
Пример разметки маркированного списка без закрывающих тегов </li>:
<ul> <li>Первый элемент списка. <li>Второй элемент списка. <li>Третий элемент списка. </ul>
В браузере каждый новый элемент списка выводится с новой строки и предваряется маркёром. Если вид маркеров не задан разработчиком в файле стилей, большинство браузеров в качестве маркеров по умолчанию используют:
(круг) — для элементов основного списка;
(окружность) — для элементов вложенного списка второго уровня;
(квадрат) — для элементов вложенного списка третьего уровня.
(круг) — для элементов основного списка;
(окружность) — для элементов вложенного списка второго уровня;
(квадрат) — для элементов вложенного списка третьего уровня.Цвет маркеров зависит от цвета текстового содержимого элементов.
Нумерованный список
Нумерованный список — это список элементов, порядок следования которых имеет значение. Иногда такие списки также называют упорядоченными. Типичным примером упорядоченного списка является запись последовательности действий или выполняемых операций.
Для организации нумерованного списка используется HTML-элемент <ol> (сокр. от англ. ordered list — «упорядоченный список»). Оба тега элемента — открывающий и закрывающий — являются обязательными (см. спецификацию).
Содержимым элемента <ol> могут быть элементы <li> (от нуля и более), с помощью которых собственно и создаются отдельные элементы списка. Всё содержимое элемента <ol> в браузере выводится с увеличенным отступом слева (см. рис. ниже).
Пример разметки простого нумерованного списка:
<p>Текст предшествующего абзаца.<p/> <ol> <li>Первый элемент списка.</li> <li>Второй элемент списка.</li> <li>Третий элемент списка.</li> </ol>
Вид в браузере:
В открывающем теге элемента <ol> могут присутствовать универсальные атрибуты и атрибуты событий. Кроме того, в теге могут быть использованы собственные атрибуты: reversed, start и type.
Необязательный булев атрибут reversed позволяет при необходимости задать в списке обратный порядок нумерации, например:
<ol reversed> <li>Первый элемент списка.</li> <li>Второй элемент списка.</li> <li>Третий элемент списка.</li> </ol>
Результат в браузере:
Необязательный атрибут start позволяет указать число, с которого начнётся нумерация в списке. При записи значения атрибута следует использовать арабские цифры (1, 2, 3 и т.д.), даже когда установлена нумерация в буквах или римских цифрах. Например, чтобы начать нумерацию с буквы «d» или римской «IV», укажите start="4".
Потребность в атрибуте start обычно возникает, когда список на странице прерывается рисунком или каким-либо другим элементом, необходимым для иллюстрации или пояснения очередного пункта списка, например:
<ol> <li>Первый элемент списка.</li> <li>Второй элемент списка.</li> <li>Третий элемент списка.</li> </ol> <p><i>Примечание:</i> Текст примечания к третьему пункту списка.</p> <ol start="4"> <li>Четвёртый элемент списка.</li> <li>Пятый элемент списка.</li> <li>Шестой элемент списка.</li> </ol>
Вид в браузере:
Необязательный атрибут type позволяет задать тип нумерации в списке. Возможные значения атрибута:
1— использовать арабские цифры (значение по умолчанию);i— использовать римскую нумерацию строчными символами;I— использовать римскую нумерацию заглавными символами;a— использовать буквенную нумерацию строчными символами;A— использовать буквенную нумерацию заглавными символами.
Пример использования атрибута:
<ol type="a"> <li>Первый элемент списка. <li>Второй элемент списка. <li>Третий элемент списка. <li>Четвёртый элемент списка. </ol>
Вид в браузере:
Элементы нумерованного списка
Для выделения каждого элемента нумерованного списка используется HTML-элемент <li> (сокр. от англ. list item – «элемент списка»). Закрывающий тег элемента является необязательным и может быть опущен, если за элементом непосредственно следует другой элемент <li> или закрывающий тег </ol>. В открывающем теге элемента <li> могут присутствовать универсальные атрибуты, атрибуты событий, а также собственный атрибут value. (см. спецификацию).
Необязательный атрибут value позволяет задать текущий порядковый номер элемента в списке. Единственное разрешённое значение этого атрибута — число, записанное арабскими цифрами, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются, начиная с заданного значения.
Потребность в атрибуте value обычно возникает, когда список на странице прерывается рисунком или каким-либо другим элементом, необходимым для иллюстрации или пояснения очередного пункта списка, например:
<ol> <li>Первый элемент списка.</li> <li>Второй элемент списка.</li> <li>Третий элемент списка.</li> </ol> <p><i>Примечание:</i> Текст примечания к третьему пункту списка.</p> <ol> <li value="4">Четвёртый элемент списка.</li> <li>Пятый элемент списка.</li> <li>Шестой элемент списка.</li> </ol>
В браузере это будет выглядеть так:
Список определений
Список определений — это список пар элементов — терминов и их описаний. На веб-страницах списки определений обычно используют при создании глоссариев, всевозможных словарей, справочников или для отображения метаданных (списка пар ключ-значение).
Для организации списка определений используется HTML-элемент <dl> (сокр. от англ. definition list — «списка определений»). Оба тега элемента — открывающий и закрывающий — являются обязательными. В открывающем теге могут присутствовать универсальные атрибуты и атрибуты событий (см. спецификацию).
В простейшем случае содержимым элемента <dl> могут быть группы (от нуля или более) элементов <dt> и <dd>, с помощью которых собственно и создаются отдельные элементы списка. Причём каждая группа может состоять из одного или более элементов <dt> (они содержат термины), за которым следует один или более элементов <dd> (содержат определения терминов, указанных в <dt>). Содержимое элементов <dd> в браузере выводится с увеличенным отступом слева (см. рис. ниже).
Пример разметки простого списка определений:
<dl> <dt>Первый термин</dt> <dd>Определение первого термина</dd> <dt>Второй термин</dt> <dd>Определение второго термина</dd> </dl>
Вид в браузере:
Элементы списка определений
Для выделения каждого термина в списке определений используется HTML-элемент <dt> (сокр. от англ. definition term – «определяемый термин»). Закрывающий тег элемента является необязательным и может быть опущен, если за элементом непосредственно следует другой элемент <dt> или <dd>, или закрывающий тег </dl>. В открывающем теге элемента <dt> могут присутствовать универсальные атрибуты и атрибуты событий. (см. спецификацию).
Для выделения каждого определения в списке определений используется HTML-элемент <dd> (сокр. от англ. definition description – «описание определения»). Закрывающий тег элемента является необязательным и может быть опущен, если за элементом непосредственно следует другой элемент <dd> или <dt>, или закрывающий тег </dl>. В открывающем теге элемента <dd> могут присутствовать универсальные атрибуты и атрибуты событий. (см. спецификацию).
По умолчанию стилевое оформление текстового содержимого элементов <dt> не отличается от стилевого оформления текстового содержимого элементов <dd>, если не считать увеличенного отступа слева. Поэтому, чтобы сделать списки определений более наглядными, необходимо воспользоваться средствами CSS. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> dt { font-weight: bold; color: #8b0000; margin-top: 20px; } dd { font-style: italic; color: 1e90ff; } </style> </head> <body> <dl> <dt>GIF <dd>Формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. <dt>JPEG <dd>Популярный формат графических файлов, широко применяемый при создании сайтов и хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может исказить деталь в рисунке, особенно содержащий текст или изображение с четкими краями. Формат JPEG не поддерживает прозрачность, когда вы сохраняете фотографию в формате JPEG, прозрачные пиксели заполняются определенным цветом. </dl> </body> </html>
Вид списка в браузере:
Многоуровневые списки
Если какие-то пункты списка должны содержать подпункты, необходимо использовать вложенные списки. Для этого в каждый такой элемент списка, где требуются подпункты, вкладывается ещё один список, то есть в HTML-элемент <li> или <dd> вкладывается элемент <ol> или <ul>, в зависимости от того, какого типа должен быть вложенный список.
Пример разметки многоуровневого маркированного списка:
<ul> <li>Первый пункт списка.</li> <li>Второй пункт списка. <!-- Начало вложенного списка --> <ul> <li>Первый подпункт второго пункта.</li> <li>Второй подпункт второго пункта.</li> <li>Третий подпункт второго пункта.</li> </ul> <!-- Конец вложенного списка --> </li> <!-- закрывающий тег второго элемента списка --> <li>Третий пункт списка.</li> </ul>
Вид в браузере:
Как я уже сказал ранее, закрывающие теги </li> и </dd> являются необязательными и при разметке простых списков их можно опускать. При разметке же многоуровневых списков опускать закрывающие теги не стоит, так как теряется наглядность исходного кода и увеличивается вероятность появления ошибок.
Пример разметки многоуровневого нумерованного списка:
<ol> <li>Первый пункт списка.</li> <li>Второй пункт списка. <!-- Начало вложенного списка --> <ol type="a"> <li>Первый подпункт второго пункта.</li> <li>Второй подпункт второго пункта.</li> <li>Третий подпункт второго пункта.</li> </ol> <!-- Конец вложенного списка --> </li> <!-- закрывающий тег второго элемента списка --> <li>Третий пункт списка.</li> </ol>
Вид в браузере:
Стилевые свойства для управления видом списка
Установить тип нумерации и вид маркеров позволяет стилевое свойство list-style-type, которое впервые появилось в ещё стандарте CSS1. Оно применяется к таким элементам как <li>, <ol> и <ul>, а также ко всем элементам, для которых свойство display установлено в значение list-item.
Значения свойства list-style-type зависят от того, к какому типу списка свойство применяется. Например, для установки вида маркеров в неупорядоченных списках в качестве значений могут использоваться следующие ключевые слова:
circle— маркер в виде окружности;disc— маркер в виде круга (значение по умолчанию);square— маркер в виде квадрата.
Ключевые слова для установки типа нумерации в упорядоченных списках:
decimal— арабские числа (значение по умолчанию);decimal-leading-zero— арабские числа с нулём впереди для цифр меньше десяти (01, 02, 03, …);lower-alpha— строчные латинские буквы (a, b, c, d,…);lower-greek— строчные греческие буквы (α, β, γ, δ, …);lower-latin— это значение аналогичноlower-alpha;lower-roman— римские числа в нижнем регистре (i, ii, iii, iv, v, …);upper-alpha— заглавные латинские буквы (A, B, C, D, …);upper-latin— это значение аналогичноupper-alpha;upper-roman— римские числа в верхнем регистре (I, II, III, IV, V, …).
Другие возможные значения для обоих типов списков:
none— отменить вывод маркеров и нумерацию для списка;inherit— использовать значение свойства родительского элемента.
Пример использования:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { /* Отменяем вывод маркеров */ list-style-type: none; } </style> </head> <body> <p>Текст предшествующего абзаца.<p/> <ul> <li>Первый элемент списка. <li>Второй элемент списка. <li>Третий элемент списка. </ul> </body> </html>
Вид в браузере:
Для указания вида маркеров, согласно стандарту CSS3, в качестве значений свойства list-style-type можно также использовать символы Юникода и символы с клавиатуры.
Пример использования символа «+» в качестве маркера:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style-type: '+ '; } </style> </head> <body> <p>Текст предшествующего абзаца.<p/> <ul> <li>Первый элемент списка. <li>Второй элемент списка. <li>Третий элемент списка. </ul> </body> </html>
Вид в браузере:
Пример использования символа Юникода в качестве значения:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { list-style-type: "\26B9\2003"; } </style> </head> <body> <p>Текст предшествующего абзаца.<p/> <ul> <li>Первый элемент списка. <li>Второй элемент списка. <li>Третий элемент списка. </ul> </body> </html>
Вид в браузере:
Установить изображение в качестве маркера позволяет стилевое свойство list-style-image, которое впервые появилось ещё в стандарте CSS1. Оно применяется к таким элементам как <li>, <ul> и <ol>, а также ко всем элементам, для которых свойство display установлено в значение list-item.
В качестве значения данного свойства может использоваться абсолютный или относительный адрес файла изображения, функция градиента, либо ключевые слова:
none— отменить использование изображения в качестве маркера (значение по умолчанию);inherit— использовать значение свойства родительского элемента.
Примеры записи свойства:
/* в случае использования URL файла */ list-style-image: url('images/starsolid.gif'); /* в случае использования функции градиента */ list-style-image: linear-gradient(to left bottom, red, blue); /* в случае отмены использования изображения */ list-style-image: none;
Установить позицию маркера или номера в списке позволяет свойство list-style-position, которое впервые появилось ещё в стандарте CSS1. Оно применяется к таким элементам как <li>, <ol> и <ul>, а также ко всем элементам, для которых свойство display установлено в значение list-item.
Данное свойство может принимать следующие значения:
inside— маркер или символы нумерации являются частью текстового блока и отображаются в элементе списка. Другими словами, они обтекаются текстом;outside— текст выравнивается по левому краю, а маркеры или символы нумерации размещаются за пределами (за границей) текстового блока. Значение используется по умолчанию.inherit— использовать значение свойства родительского элемента.
Пример использования свойства:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ol { list-style-position: inside; } </style> </head> <body> <p>Текст предшествующего абзаца.<p/> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li> <li>Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis.</li> <li>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</li> </ol> </body> </html>
Вид в браузере:
Задать все параметры маркеров сразу позволяет обобщённое свойство list-style. Оно применяется к таким элементам как <li>, <ol> и <ul>, а также ко всем элементам, для которых свойство display установлено в значение list-item.
Синтаксис свойства:
list-style: <type> <position> <image>
где:
- <type> — параметр, определяющий вид маркера или тип нумерации. Возможные значения параметра приводились выше при описании свойства
list-style-type; - <position> — параметр, определяющий позицию маркера или номера в списке. Возможные значения параметра приводились выше при описании свойства
list-style-position; - <image> параметр, задающий рисунок для использования в качестве маркера. Возможные значения параметра приводились выше при описании свойства
list-style-image.
Порядок следования параметров не имеет значения. Любой из них может отсутствовать.
Примеры записи свойства:
/* Устанавливаем вид маркера */ list-style: square; /* Устанавливаем рисунок маркера */ list-style: url('../img/shape.png'); /* Устанавливаем позицию маркера */ list-style: inside; /* Устанавливаем тип нумерации и позицию номера */ list-style: lower-alpha inside; /* Устанавливаем тип нумерации, рисунок маркера и позицию */ list-style: lower-roman url('../img/shape.png') outside; /* Отменяем вывод маркеров */ list-style: none;
Цвет маркеров и номеров элементов списка совпадает с цветом текстового содержимого элементов, поскольку то и другое для тегов <ul>, <ol> и <li> устанавливается одним стилевым свойством color. Поэтому, если необходимо придать маркерам или номерам элементов списка какую-то другую окраску, придётся пойти по одному из четырёх путей.
Во-первых, в качестве маркеров можно использовать небольшие рисунки с изображением маркеров (например, 
). Создать такие рисунки можно с помощью любого простейшего графического редактора и клавиши PrintScreen.
Пример использования изображений в качестве маркеров:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { /* Отменяем вывод стандартных маркеров */ list-style-type: none; /* Устанавливаем рисунок основного маркера */ list-style-image: url('images/disc-blue.png'); } ul ul { /* Устанавливаем рисунок маркера для вложенного списка 2-ого уровня */ list-style-image: url('images/circle-blue.png'); } ul ul ul { /* Устанавливаем рисунок маркера для вложенного списка 3-его уровня */ list-style-image: url('images/square-blue.png'); } </style> </head> <body> <ul> <li>Первый пункт списка</li> <li>Второй пункт списка <ul> <li>Первый пункт 2-ого уровня</li> <li>Второй пункт 2-ого уровня <ul> <li>Первый пункт 3-его уровня</li> <li>Второй пункт 3-его уровня</li> </ul> </li> </ul> </li> <li>Третий пункт списка</li> </ul> </body> <html>
В браузере такой список будет иметь следующий вид:
Во-вторых, маркеры нужного цвета можно получить с помощью функций градиента (набор и порядок чередование цветов необходимо будет подобрать опытным путём), например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { /* Отменяем вывод стандартных маркеров */ list-style-type: none; /* Устанавливаем рисунок основного маркера */ list-style-image: radial-gradient(green, green, white, white); } ul ul { /* Устанавливаем рисунок маркера для вложенного списка 2-ого уровня */ list-style-image: radial-gradient(white, white, green, white, white); } ul ul ul { /* Устанавливаем рисунок маркера для вложенного списка 3-его уровня */ list-style-image: radial-gradient(green, green); } </style> </head> <body> <ul> <li>Первый пункт списка</li> <li>Второй пункт списка <ul> <li>Первый пункт 2-ого уровня</li> <li>Второй пункт 2-ого уровня <ul> <li>Первый пункт 3-его уровня</li> <li>Второй пункт 3-его уровня</li> </ul> </li> </ul> </li> <li>Третий пункт списка</li> </ul> </body> <html>
Результат в браузере:
В-третьих, изменить цвет маркеров и номеров элементов списка можно с помощью стилевого свойства color. Однако при этом нам придётся поместить всё текстовое содержимое элементов в контейнеры <span> и описать цвет этого содержимого отдельным правилом:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ol { /* Устанавливаем цвет для содержимого контейнера OL */ color: red; } ol span { /* Устанавливаем цвет для содержимого контейнеров SPAN */ color: black; } ol ol { /* Тип нумерации для списка 2-ого уровня */ list-style-type: lower-alpha; } ol span { /* Вид маркеров для списка 3-его уровня */ list-style-type: '- '; } </style> </head> <body> <ol> <li><span>Первый пункт списка</span></li> <li><span>Второй пункт списка</span> <ul> <li><span>Первый пункт 2-ого уровня</span></li> <li><span>Второй пункт 2-ого уровня</span> <ul> <li><span>Первый пункт 3-его уровня</span></li> <li><span>Второй пункт 3-его уровня</span></li> </ul> </li> </ul> </li> <li><span>Третий пункт списка</span></li> </ol> </body> <html>
Вид списка в браузере:
Ну и последний способ изменить цвет маркеров — это сгенерировать их с помощью псевдоэлемента ::before. Ведь цвет для генерируемого содержимого устанавливается отдельным правилом. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { /* Отменяем вывод стандартных маркеров */ list-style-type: none; } li::before { /* Параметры генерируемого контента */ color: blue; content: "\2605\2003"; } </style> </head> <body> <ul> <li>Первый пункт списка</li> <li>Второй пункт списка</li> <li>Третий пункт списка</li> </ul> </body> <html>
Вид списка в браузере:
Другие статьи по схожей тематике
