Как устанавливается номер текущего элемента списка

����������

1. �������� � ������
2. 
   ��������������� ������ (UL),
   
   ������������� ������ (OL) � �������� ������� (LI)
3. 
   ������ �����������: �������� DL,
   DT � DD
   1. ���������� ������������� �������
4. �������� DIR � MENU

����������� ���������

type = ���������� � �����
[CI]

�����������. ���� ������� ������������� ����� �������� ������. ��������� � ��������� ����� �������� ������������� ��� ���������� ������� �������������. ��������� �������� ������� ���� (������� ���������� � ��������).

start
= �����
[CN]

�����������.
������ ��� OL. ���� ������� ������ ��������� ����� ������� �������� � ������������� ������. �� ��������� ��������� ����� — «1». �������, ���, ���� ��������� ����� �������� �������� ����� �����, ��������������� ����� ����� ���� ����������. ���� � �������� ����� ������� ��������� ����� �������� �������� (A, B, C, …), start=3 �������� «C». ���� � �������� ����� ������� ������� ����� ������� ��������,
start=3 �������� «iii» � �.�.

value = ����� [CN]

������������. ������ ��� LI. ���� ������� ������������� ����� �������� �������� ������. �������, ���, ���� ��������� �������� �������� ����� �����, ��������������� ����� ����� ���� ���������� (��. ������� start).

compact
[CI]

�����������. ���� ���� ���������� ������� ����������, �� �������� ���������� ������� ������������� � ���, ��� ������������ ������ ����� ����� ���������. ������������� ����� �������� ������� �� ������ ������������.

��������, ������������ � ����� ������ �����

• id, class (�������������� � �������� ���������)
• lang (���������� � �����), dir (����������� ������)
• title (��������� ��������)
• style (���������� ���������� � �����)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (���������� �������)

� ���� ������� �������� ����� ��������� ������.

<UL>
   <LI> ... ������ ������� ������...
   <LI> ... ������ ������� ������...
   ...
</UL>

������ �������������� �������������:

<UL>
     <LI> ... ������� ����, ����� ����...
     <OL> 
        <LI> ... ������� ���, ����� ����...
        <LI> ... ������� ���, ����� ���...
        <OL start="10"> 
           <LI> ... ������� ���, ����� ����...
        </OL> 
        <LI> ... ������� ���, ����� ���...
     </OL> 
     <LI> ... ������� ����, ����� ���...
</UL>

���������� � ������� �������. � ������������� ������� ���������� ���������� ��������� ������������� �� ����������� ������ ��� ������ ��������� ��� ��������� ���������. ������ ������ ����� ���������� ��������� ��������� ������, ��������� ��� ��� ������� value. ��������� ��� ����������� ��������� ������ ������������ � ������ ��������. ��������:

<ol>
<li value="30"> ������� ������ ����� 30.
<li value="40"> ������� ������ ����� 40.
<li> ������� ������ ����� 41.
</ol>

<!-- ������ ����������� - DT - ������, DD  - ��� ����������� -->

<!ELEMENT DL - - (DT|DD)+              -- ������ ����������� -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

��������, ������������ � ����� ������ �����

• id, class (�������������� � �������� ���������)
• lang (���������� � �����), dir (����������� ������)
• title (��������� ��������)
• style (���������� ���������� � �����)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (���������� �������)

������:

  
<DL>
  <DT>Dweeb
  <DD>young excitable person who may mature
    into a <EM>Nerd</EM> or <EM>Geek</EM>

  <DT>Cracker
  <DD>hacker on the Internet

  <DT>Nerd
  <DD>male so into the Net that he forgets
    his wife's birthday
</DL>

��� ������ � ����������� ��������� � �������������:

<DL>
   <DT>Center
   <DT>Centre
   <DD> A point equidistant from all points
              on the surface of a sphere.
   <DD> In some field sports, the player who
              holds the middle position on the field, court,
              or forward line.
</DL>

��������, � ������� CSS ����� �������, ��� ����� ��������� ��� ��������� ������ � ������������ ������ — ������� ����� ������� ��������. � ����������� ���� ������� ������ ������� OL, ������������� ������ «withroman», ������������ ������� ������.

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> ��� ���� ...  
<LI> ��� ��� ...
</OL>
</BODY>

��������, ������������ � ����� ������ �����

• id, class (�������������� � �������� ���������)
• lang (���������� � �����), dir (����������� ������)
• title (��������� ��������)
• style (���������� ���������� � �����)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (���������� �������)

Неупорядоченные списки (UL), упорядоченные списки (OL) и элементы списка (LI)

<!ELEMENT UL - - (LI)+                 -- неупорядоченный список -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- упорядоченный список -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: необходим, Конечный тег: необходим

<!ELEMENT LI - O (%flow;)*             -- элемент списка -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Начальный тег: необходим, Конечный тег: не обязателен

Определения атрибутов

type = информация о стиле [CI]

Не рекомендуется. Этот атрибут устанавливает стиль элемента списка. Доступные в настоящее время значения касаются визуальных ПА. Возможные значения описаны ниже (вместе с информацией о регистре).

start = number [CN]

Не рекомендуется. Только для OL. Этот атрибут устанавливает номер первого элемента упорядоченного списка. По умолчанию это «1». Заметьте, что, хотя значением этого атрибута является целое число, соответствующие лэйблы могут быть нечисловыми. Так, если стиль элемента списка это латинские буквы в верхнем регистре (A, B, C, …), start=3 означает «C». Если стиль — это римские цифры в нижнем регистре, start=3 означает «iii» и т.д.

value = number [CN]

Не рекомендуется. Только для LI. Этот атрибут устанавливает номер текущего элемента списка. Заметьте, что, хотя значением этого атрибута является целое число, соответствующие лэйблы могут быть нечисловым (см. атрибут start ).

compact [CI]

Не рекомендуется. Если установлен, этот булев атрибут подсказывает визуальному ПА, что список нужно отображать более компактно. Интерпретация этого атрибута зависит от ПА.

Атрибуты, определённые в другом месте

• id, class (идентификаторы документа)
• lang (язык), dir (направление текста)
• title (заголовок элемента)
• style (инлайн-стиль)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Упорядоченные и неупорядоченные списки отображаются идентичными способами, за исключением того, что визуальные ПА нумеруют элементы упорядоченных списков. ПА могут представлять нумерацию разными способами. Элементы неупорядоченных списков не нумеруются.

Списки обоих типов состоят из последовательности элементов списка, определённых элементом LI (с отсутствующим конечным тегом).

Этот пример иллюстрирует базовую структуру списков:

<UL>
   <LI> ...первый элемент списка...
   <LI> ...второй элемент списка...
   ...
</UL>

Списки также могут быть вложенными:

<UL>
     <LI> ... Уровень 1, номер 1 ...
     <OL> 
        <LI> ... Уровень 2, номер 1 ...
        <LI> ... Уровень 2, номер 2 ...
        <OL start="10"> 
           <LI> ... Уровень 3, номер 1 ...
        </OL> 
        <LI> ... Уровень 2, номер 3 ...
     </OL> 
     <LI> ... Уровень 1, номер 2 ...
</UL>

<ol>
<li value="30"> устанавливает номер элемента 30.
<li value="40"> устанавливает номер элемента 40.
<li> установлен номер элемента 41.
</ol>

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

• <ol> – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
• <ul> – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
• <dl> – список определений состоит из пар «имя/значение», в том числе терминов и определений.

Нумерованные списки

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.

Тег <ol> имеет следующий синтаксис:

<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

<ol type="A|a|I|i|1">

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.

В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

<li value="7">

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ol style="list-style-type:lower-roman">

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов.
Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.

Тег <ul> имеет следующий синтаксис:

<ul>
  <li>Первый пункт </li>
  <li>Второй пункт </li>
  <li>Третий пункт </li>
</ul>

В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка:

Внутри тега <li> не обязательно размещать только текст, допустимо
поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

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

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

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ul style="list-style-type:square">

В следующем примере рассмотрены различные стили оформления маркированных списков:

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

<ul style="list-style-image: url(images/Star.png);">

Списки определений (описаний)

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

<dl>
  <dt>Первый термин</dt>
  <dd>Описание первого термина</dd>
  <dt>Второй термин</dt>
  <dd>Описание второго термина</dd>
</dl>

В следующем примере показано одно из возможных использований списка определений:

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

Задачи

10.1 Введение в списки

Язык HTML предлагает авторам несколько
механизмов создания списков информации. В
каждом списке должен быть один или
несколько элементов списков. Списки могут
содержать:

• Неупорядоченную информацию.
• Упорядоченную информацию.
• Определения.

Предыдущий список, например, не
упорядочен, он создан с помощью элемента UL:

<UL>
<LI>Неупорядоченную информацию.
<LI>Упорядоченную информацию.
<LI>Определения.
</UL>

Упорядоченный список, создаваемый с
помощью элемента OL,
может содержать информацию, в которой важен
порядок, например, рецепт:

1. Тщательно смешать сухие ингредиенты.
2. Влить жидкость.
3. Смешивать 10 минут.
4. Выпекать в течение часа при температуре
   300 градусов.

Списки определений, создаваемые с помощью
элемента DL,
могут содержать ряд пар термин/определение
(хотя списки определений могут иметь и иные
применения). Например, список определений
можно использовать в рекламе изделия:

Низкая цена

Новая модель этого изделия существенно
дешевле предыдущей!

Проще работа

Мы изменили изделие, так что с ним теперь
легко работать!

Безопасно для детей

Вы можете оставить своих детей в комнате,
и изделие не причинит им вреда (не
гарантируется).

На языке HTML он определяется следующим
образом:

<DL>
<DT><STRONG>Низкая цена</STRONG>
<DD> Новая модель этого изделия существенно дешевле предыдущей!
<DT><STRONG>Проще работа</STRONG>
<DD>Мы изменили изделие, так что с ним теперь легко работать!
<DT><STRONG> Безопасно для детей </STRONG>
<DD> Вы можете оставить своих детей в комнате, и изделие
не причинит им вреда (не гарантируется).
</DL>

Списки могут быть вложенными, разные типы
списков можно использовать вместе, как в
следующем примере, где список определений
содержит неупорядоченный список (ингредиенты)
и упорядоченный список (процедуру):

Ингредиенты:

• 100 г муки
• 10 г сахара
• 1 стакан воды
• 2 яйца
• соль, перец

Процедура:

1. Тщательно смешайте сухие ингредиенты.
2. Влейте жидкие ингредиенты.
3. Смешивайте 10 минут.
4. Выпекайте в течение часа при
   температуре 300 градусов.

Примечания:

Можно добавить изюм.

Точное представление трех типов списков
зависит от агента пользователя. Не стоит
использовать списки для создания отступов
в тексте. Это делается с помощью таблиц
стилей.

10.2 Неупорядоченные
списки (UL), упорядоченные
списки (OL) и
элементы списков (LI)

Начальный тег: обязателен,
Конечный тег: обязателен

Начальный тег: обязателен,
Конечный тег: не обязателен

Упорядоченные и неупорядоченные списки
генерируются одинаково за исключением того,
что визуальные агенты пользователей
нумеруют упорядоченные списки. Агенты
пользователей могут представлять эти
номера несколькими способами. Элементы
неупорядоченного списка не нумеруются.

Оба эти типа списков состоят из
последовательностей элементов списков,
определяемых элементом LI
(конечный тег которого можно опустить).

<UL>
<LI> ... первый элемент списка...
<LI> ... второй элемент списка...
...
</UL>

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

<UL>
<LI> ... Уровень один, номер один...
<OL>
<LI> ... Уровень два, номер один...
<LI> ... Уровень два, номер два...
<OL start="10">
<LI> ... Уровень три, номер один...
</OL>
<LI> ... Уровень два, номер три...
</OL>
<LI> ... Уровень один, номер два...
</UL>

<ol>
<li value="30"> элемент списка номер 30.
<li value="40"> элемент списка номер 40.
<li> элемент списка номер 41.
</ol>

10.3 Списки
определений: элементы DL,
DT и DD

<!-- списки определений - DT - термин, DD - его определение -->
<!ELEMENT DL - - (DT|DD)+ -- список определений -->
<!ATTLIST DL
%attrs; -- %coreattrs, %i18n, %events --
>

Начальный тег: обязателен,
Конечный тег: обязателен

Начальные тег: обязателен,
Конечный тег: не обязателен

Списки определений незначительно
отличаются от других типов списков — тем,
что элементы состоят из двух частей:
термина и определения. Термин обозначается
с помощью элемента DT
и может иметь только встроенное содержимое.
Описание указывается с помощью элемента DD,
имеющим содержимое уровня блока.

<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>

<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court,
or forward line.
</DL>

Другим применением элемента DL,
например, может быть разметка диалогов, где
каждый элемент DT
означает говорящего, а в каждом элементе DD
содержатся его слова.

10.3.1 Визуальное
отображение списков

Примечание.Ниже приводится
информативное описание поведения
некоторых имеющихся на настоящий момент
визуальных агентов пользователей при
форматировании списков. Таблицы стилей
предоставляют большие возможности
управления форматированием списков (например,
в отношении нумерации, соглашений,
используемых в разных языках, отступов и т.д.).

Визуальные агенты пользователей обычно
сдвигают вложенные списки соответственно
уровню вложенности.

Для элементов OL
и UL
атрибут type
определяет параметры генерации для
визуальных агентов пользователей.

Для элемента UL
возможными значениями
атрибута type
являются disc, square и circle.
Значение, используемое по умолчанию,
зависит от уровня вложенности текущего
списка. Эти значения не учитывают регистр.

Представление каждого значения зависит
от агента пользователя. Агенты
пользователей должны пытаться
представлять «disc» в виде небольшого
заполненного кружка, «circle» — в виде
окружности, а «square» в виде небольшого
квадрата.

Графические агенты пользователь могут
генерировать их как:

для
значения «disc»
для
значения «circle»
для
значения «square»

Для элемента OL
возможные значения атрибута type
приведены в следующей таблице (они
учитывают регистр):

Помните, что использование атрибута type
нежелательно, и стили
списков должны определяться с помощью
таблиц стилей.

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Шаг один ...
<LI> Шаг два ...
</OL>
</BODY>

Генерация списка определений также
зависит от агента пользователя. Например,
список:

<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>

может генерироваться следующим образом:

Dweeb
young excitable person who may mature into a Nerd or Geek
Cracker
hacker on the Internet
Nerd
male so into the Net that he forgets his wife's birthday

10.4 Элементы DIR
и MENU

Использование элементов DIR и MENU нежелательно.

Формальное определение см. в Переходном
DTD.

Элемент DIR
предназначался для создания
многостраничных списков каталогов. Элемент
MENU
предназначался для использования в списках
меню, состоящих из одного столбца. Оба эти
элемента имеют ту же структуру, что и
элемент UL,
различаясь только при генерации. На
практике агенты пользователей генерируют
списки DIR
или MENU
точно так же, как список UL.

[Назад]
[Содержание]
[Вперед]

При перепечатке любого материала
с сайта, видимая ссылка на источник www.warayg.narod.ru
и все имена, ссылки авторов обязательны.

© 2005

Ещё в первой версии языка 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>

В браузере это будет выглядеть так:

Примечание: Атрибут value тега <li> можно использовать в CMS WordPress, в отличие от атрибута start тега <ol>, который почему-то в данной CMS расценивается как ошибочный.

Список определений

Список определений — это список пар элементов — терминов и их описаний. На веб-страницах списки определений обычно используют при создании глоссариев, всевозможных словарей, справочников или для отображения метаданных (списка пар ключ-значение).

Для организации списка определений используется 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: "26B92003";
      }
    </style>
  </head>
  <body>
    <p>Текст предшествующего абзаца.<p/>
    <ul>
      <li>Первый элемент списка.
      <li>Второй элемент списка.
      <li>Третий элемент списка.
    </ul>
  </body>
</html>

Вид в браузере:

Установить изображение в качестве маркера позволяет стилевое свойство list-style-image, которое впервые появилось ещё в стандарте CSS1. Оно применяется к таким элементам как <li>, <ul> и <ol>, а также ко всем элементам, для которых свойство display установлено в значение list-item.

В качестве значения данного свойства может использоваться абсолютный или относительный адрес файла изображения, функция градиента, либо ключевые слова:

• none — отменить использование изображения в качестве маркера (значение по умолчанию);
• inherit — использовать значение свойства родительского элемента.

Примеры записи свойства:

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 {
        
        list-style-image: url('images/circle-blue.png');
      }
      ul ul ul {
        
        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 {
        
        list-style-image: radial-gradient(white, white, green, white, white);
      }
      ul ul ul {
        
        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 {
        
        color: red;
      }
      ol span {
        
        color: black;
      }
      ol ol {
        
        list-style-type: lower-alpha;
      }
      ol span {
        
        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: "26052003";
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Первый пункт списка</li>
      <li>Второй пункт списка</li>
      <li>Третий пункт списка</li>
    </ul>
  </body>
<html>

Вид списка в браузере:

Другие статьи по схожей тематике

• Элементы структурирования текста
• Таблицы на веб-странице
• Горизонтальный разделитель
• Оформление цитат на веб-странице
• Плавающий фрейм
• Стилизация текста средствами CSS