Список описаний или, как он ещё называется, список определений стоит особняком от остальных типов списков. Во-первых, для него используется свой набор элементов — <dl>, <dt> и <dd>.
<dl>
<dt>Фаддей Беллинсгаузен</dt>
<dd>Русский мореплаватель, открывший в 1820 году Антарктиду.</dd>
<dt>Америго Веспуччи</dt>
<dd>Итальянский мореплаватель и исследователь, в честь которого была названа Америка.</dd>
</dl>
Во-вторых, хотя он и называется списком, на привычные нам списки это не сильно похоже (рис. 1), скорее на словарь терминов. Внутри <dl> сперва идёт термин (<dt>), затем его описание (<dd>).
Рис. 1. Список описаний
И в-третьих, в CSS нет отдельных свойств, направленных на стилизацию списка описаний. Но мы можем использовать для селекторов dl, dt и dd желаемые свойства.
Стилизация списка описаний
В первую очередь к элементам списка описаний можно применить свойства шрифта, к примеру, выделить термин жирным начертанием. Для этого к селектору dt добавляем свойство font-weight со значением bold.
dt {
font-weight: bold; /* Жирное начертание */
}
Аналогичным образом для описания делается курсивное начертание, только для селектора dd используем свойство font-style со значением italic.
dd {
font-style: italic; /* Курсивное начертание */
}
И термин и его описание, конечно же, можно выделить желаемым цветом через свойство color.
dt {
color: green; /* Зелёный цвет термина */
}
Используя флексы список описаний можно разместить горизонтально, когда термин и его описание располагаются на одной строке (рис. 2).
Рис. 2. Расположение списка по горизонтали
Для этого селектор dl сперва превращаем во флекс-контейнер и разрешаем сделать перенос на другую строку.
dl {
display: flex; /* Выравниваем по горизонтали */
flex-wrap: wrap; /* Перенос на другую строку */
}
Теперь осталось установить ширину, которую будет занимать термин и его описание, через свойство flex-basis.
dt {
flex-basis: 20%; /* Ширина термина */
}
dd {
flex-basis: 70%; /* Ширина описания */
}
Сумма получается меньше 100%, на оставшееся пространство будут приходиться отступы между текстом. Остальная стилизация представлена в примере 1.
Пример 1. Список по горизонтали
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Описания</title>
<style>
dl {
display: flex; /* Выравниваем по горизонтали */
flex-wrap: wrap; /* Перенос на другую строку */
column-gap: 1em; /* Расстояние между колонками */
row-gap: 0.5em; /* Расстояние между строками */
}
dt {
font-weight: bold; /* Жирное начертание */
flex-basis: 20%; /* Ширина термина */
text-align: right; /* Выравнивание по правому краю */
}
dd {
flex-basis: 70%; /* Ширина описания */
margin: 0; /* Убираем исходные отступы */
}
</style>
</head>
<body>
<dl>
<dt>Фаддей Беллинсгаузен</dt>
<dd>Русский мореплаватель, открывший в 1820 году Антарктиду.</dd>
<dt>Васко да Гама</dt>
<dd>Португальский мореплаватель, который первым из европейцев достиг Индии по морю, обогнув Африку в 1497–1499 годах.</dd>
<dt>Эрнан Кортес</dt>
<dd>Испанский конкистадор, завоевавший империю ацтеков в Мексике.</dd>
<dt>Америго Веспуччи</dt>
<dd>Итальянский мореплаватель и исследователь, в честь которого была названа Америка.</dd>
</dl>
</body>
</html>
Обратите внимание, что по умолчанию описание сдвигается вправо относительно термина. Мы убираем этот отступ с помощью нулевого значения margin.
Итоги
- Список описаний создаётся с помощью трёх HTML-элементов — <dl>, <dt> и <dd>.
- В CSS нет специальных свойств для стилизации списков описаний, но мы можем применять к селекторам dl, dt и dd свойства шрифта и цвета.
- Для размещения термина и его описания по горизонтали можно использовать флексы.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 30.03.2026