4.3 KiB

Raw Blame History

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

Удивительная некоммерческая организация, преподающая людям, как кодировать.

Дополнительная информация:

Списки HTML на w3schools

4.3 KiB Raw Blame History Unescape Escape