4.3 KiB
title | localeTitle |
---|---|
Lists | Списки |
Списки
Списки используются для отображения элементов. Существует 3 типа списков.
Упорядоченные списки
Упорядоченный список используется для описания упорядоченного набора данных. Браузеры обычно отображают упорядоченный список в виде пронумерованного списка. Создайте упорядоченный список, используя <ol>
.
Неупорядоченные списки
Неупорядоченный список используется для описания неупорядоченного сбора данных. Браузеры обычно отображают неупорядоченный список в виде маркированного списка. Создайте неупорядоченный список, используя <ul>
.
Список элементов
Прямые дети упорядоченных и неупорядоченных списков должны быть элементами списка. Каждый элемент списка заключен в <li>
. Тег элемента списка может содержать содержимое потока .
Примеры
Упорядоченный список записывается как
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
</ol>
и отображается как:
- январь
- февраль
- Март
Неупорядоченный список записывается как
<ul>
<li>Macintosh</li>
<li>Fuji</li>
<li>Gala</li>
</ul>
и отображается как:
- макинтош
- Fuji
- гала
Шаблоны стилей
Упорядоченный список может использоваться для множества функций и в нескольких стилях. Поскольку изменение цветных цветов тегов не изменяет цвет самих маркеров, вы можете их стилизовать, сначала удалив традиционные черные пули и вставив их:
Удалить пули:
ul {
list-style: none;
}
Вставьте свой собственный:
ul li::before {
content: "\2022";
color: orange;
display: inline-block;
width: 1em;
}
Стиль контента добавляет новую маркерную точку, в то время как стиль отображения и ширины создает пространство между пулей и словом. Здесь могут применяться обычные стили шрифтов, если вы хотите сделать пулю более крупной или более смелой.
Списки описания
Список описаний - это список терминов с описанием каждого термина. Список описаний создается с помощью <dl>
. Каждый элемент в списке состоит из двух тегов: термин <dt>
и описание этого термина <dd>
. Они называются списками определений в HTML 4.
Вот пример списка описания:
<dl>
<dt>Programming</dt>
<dd>The process of writing computer programs.</dd>
<dt>freeCodeCamp</dt>
<dd>An awesome non-profit organization teaching people how to code.</dd>
</dl>
который в итоге выглядит следующим образом:
программирование
Процесс написания компьютерных программ.
freeCodeCamp
Удивительная некоммерческая организация, преподающая людям, как кодировать.