• Home
  • Контакты
  • Карта сайта
www.wantweb.ru wantweb
Навигация Want Web

Какие бывают списки

29 марта 2014

Список является простейшим способом группирования однородных элементов.

Списки бывают:

  1. нумерованные
  2. маркированные
  3. списки определений

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

Заключаются в теги <ol></ol>.

Сторки списка выводятся в теге <li> (как в нумерованных, так и маркированных)

<!--- маркированный список --->
<ol>
  <li>Нумерованный</li>
  <li>Маркированный</li>
  <li>Списки определений</li>
</ol> 
 

Тег ol может применяться с атрибутом start="значение", тогда нумерация списка будет начинаться с заданного значения.

Если необходимо изменить номер определенного элемента списка и следующих за ним элементов, то тег li применяют с атрибутом value="значение".

Можно задавать стиль отображения упорядоченного списка, задавая средствами CSS то или иное значение свойству list-style-type Его можно применять как ко всему списку, так и к отдельным пунктам li. На практике допускается использование вместо него универсального свойства list-style.

<!--- атрибуты start, value и стиль отображения списка --->
<ol start="4" style="list-style-type: upper-roman;">
  <li>Нумерация начинается с 4</li>
  <li value="8">Меняем номер на 8</li>
  <li>Последующие номера меняются автоматически</li>
</ol> 
 
  1. Нумерация начинается с 4
  2. Меняем номер на 8
  3. Последующие номера меняются автоматически

Наиболее часто используемые значения свойства list-style-type:

decimal - обычные числа (по умолчанию)
upper-alpha - заглавные латинские буквы
lower-alpha - строчные латинские буквы
upper-roman - римские числа

Внимание!

Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!

Это решается установкой большего левого отступа для тега ol.

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

Заключаются между тегами <ul></ul>

<!--- неупорядоченный список --->
<ul>
  <li>пункт 1</li>
  <li>пункт 2</li>
  <li>пункт 3</li>
</ul> 
 

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

  • пункт 1
  • пункт 2
  • пункт 3

Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type:

circle - кружок
disc - жирная точка
square - квадрат
none - без маркера

Интересная особенность

Точно так-же значение none можно присвоить свойству list-style-type: none тега ol

Более того! Нумерованный и маркированный списки отличаются только значением этого свойства! 

ul {list-sytle-type: decimal;} = ol Результат будет идентичным!

Для добавления своих маркеров используют свойство list-style-image,  но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов li.

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

Заключаются между тегами <dl> и </dl>. Применяются для создания словарей, списков терминов и т.п.

<!--- список определений --->
<dl>
  <dt>Термин</dt>
    <dd>Описание...</dd>
  <dt>Термин</dt>
    <dd>Описание...</dd>
</dl> 
 
Термин
Описание...
Термин
Описание...
⇧