Среда, 30 Января 2013 14:16

Список HTML

Written by 
Оцени эту запись
(2 Голоса)

В данной статье мы рассмотрим списки HTML - нумерованные и ненумерованные, виды их маркеров, атрибуты и оформление. Также будет приведено много примеров списков HTML.

 

Списки очень часто используются при создании HTML страниц. Кроме списков содержимого в контенте, списки HTML используются для создания меню и содержания материалов по разделам. В списках выводятся также списки статей, списки разделов сайта и т.д. 

 

Список HTML

Определение списков

 

Тег ul(unordered list) в HTML представляет ненумерованный(или маркерованый) список элементов. То есть, список, изменение порядка элементов которого, не изменит его смысл. Элементы ненумерованного списка задаются при помощи тега <li>. Причем, дочерним элементом списка может быть только элемент li, который, в свою очередь, может содержать другие элементы.

 

 

Пример:

 

Хобби:

  • чтение
  • пение
  • танцы
  • спорт

<p>Хобби:</p>
<ul>
<li>чтение</li>
<li>пение</li>
<li>танцы</li>
<li>спорт</li>
</ul>
 

 

 

Маркером ненумерованного списка могут быть круг(circle), диск(disc) или квадрат(square). Задавать маркер списка можно в атрибуте type(считается устаревшим в HTML5) или в стилях:

 

 

ul {

list-style-type: disc | circle | square;

 

По умолчанию маркером ненумерованного списка является тип disc.

 

 

Тег ol(ordered list) в HTML задает нумерованный(или упорядоченный) список элементов, где изменение порядка следования элементов изменит значение списка. Элементы списка задаются в теге li.

 

Пример:

 

Рейтинг CSS селекторов:

  1. идентификатор
  2. класс
  3. тег
  4. дочерние и сестринские
  5. потомки
<p>Рейтинг CSS селекторов:</p>
<ol>
<li>идентификатор</li>
<li>класс</li>
<li>тег</li>
<li>дочерние и сестринские</li>
<li>потомки</li>
</ol>
 

 

 

Элементы ol, ul и li должны иметь открывающие и закрывающие теги.

 

Атрибуты списков

 

Атрибутами элементов ul и ol могут быть все глобальные атрибуты.

 

Тегу ul применим атрибут type со значениями disc, circle и square, но он считается устаревшим в HTML5.

 

Для тега ol доступны следующие атрибуты:

 

start - задает порядковый номер первого элемента в списке. В HTML4 этот атрибут считался устаревшим, но сейчас он устаревшим не считается.

 

reversed - задается со значение reversed или пустым. Задает увеличение или уменьшение номеров элементов списка.

 

type - может принимать значения "1", "a", "A", "i", "I". Задается тип нумерации нумерованного списка в виде цифр или букв, букв больших или маленьких. При этом значение "1" задает нумерацию в виде арабских цифр, "a" - строчных латинских букв, "A" - заглавных латинских букв, "i" - строчных латинских цифр, "I" - заглавных латинских цифр. По умолчанию атрибут имеет значение "1".

 

 

Пример на атрибут start:

 

 

Рейтинг CSS селекторов:

  1. идентификатор
  2. класс
  3. тег
  4. дочерние и сестринские
  5. потомки
<p>Рейтинг CSS селекторов:</p>
<ol start="20">
<li>идентификатор</li>
<li>класс</li>
<li>тег</li>
<li>дочерние и сестринские</li>
<li>потомки</li>
</ol>
 

 

 

Пример на атрибут reversed:

 

 

Рейтинг CSS селекторов:

  1. идентификатор
  2. класс
  3. тег
  4. дочерние и сестринские
  5. потомки
<p>Рейтинг CSS селекторов:</p>
<ol reversed="reversed">
<li>идентификатор</li>
<li>класс</li>
<li>тег</li>
<li>дочерние и сестринские</li>
<li>потомки</li>
</ol>
 

 

 

Пример на атрибут type:

 

 

Рейтинг CSS селекторов:

  1. идентификатор
  2. класс
  3. тег
  4. дочерние и сестринские
  5. потомки
<p>Рейтинг CSS селекторов:</p>
<ol type="i">
<li>идентификатор</li>
<li>класс</li>
<li>тег</li>
<li>дочерние и сестринские</li>
<li>потомки</li>
</ol>
 

 

 

Маркер нумерованного списка можно задать также при помощи CSS:

 

ol {

list-style-type: decimal | lower-alpha | upper-alpha | lower-roman | upper-roman

}

 

 

Теги ul и ol поддерживаются всеми современными браузерами. Для оформления списков HTML используются CSS стили. При помощи CSS можно менять тип маркера, задавать картинку вместо маркера.

 

 

Хобби:

  • чтение
  • пение
  • танцы
  • спорт

<p>Хобби:</p>
<ul>
<li>чтение</li>
<li>пение</li>
<li>танцы</li>
<li>спорт</li>
</ul>
 

 

 

Для этого были использованы такие стили:
 
 
<style>
.image_marker {
list-style-image: url(../images/li_bg.png);
}
</style>

 

 

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

 

 

Хобби:

  • чтение
  • пение
  • танцы
  • спорт

 

 

Мы использовали стили для четных и нечетных элементов списка, а также задали стиль для элементов при наведении:

 

 

<style>
.lines li:nth-child(2n) {
background: #f9b7ff;
}
 
.lines li:nth-child(2n+1) {
background: #eba9ec;
}
 
.lines li:hover {
background: #ebdde2;
</style>

 

 

Для того, чтобы разместить элементы списка по горизонтали, нужно использовать свойство float:left:

 

ul li {

float: left;

}

 

 

Элементы ul, ol и li, как видно из предыдущих примеров, являются блочными элементами. Каждый новый список(ol или ul) и каждый его элемент списка(li) начинаются с новой строки.

 

 

При создании вложенный списков, обратите внимание, что их внешний вид изменяется. У вложенного списка отличается маркер списка и увеличивается отступ слева.

 

 

Стандартные стили для списков:

 

 

ul {

display: block;

list-style-type: disc;

margin-before: 1em;

margin-after: 1em;

margin-start: 0;

margin-end: 0;

padding-start: 40px;

}

 

 

ol {

display: block;

list-style-type: decimal;

margin-before: 1em;

margin-after: 1em;

margin-start: 0;

margin-end: 0;

padding-start: 40px;

}

 

 

Стили для вложенных списков:

 

 

ul ul, ol ul {

list-style-type: circle

}

 

ol ol ul, ol ul ul, ul ol ul, ul ul ul {

list-style-type: square

}

 

 

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

 

 

Цвет маркера списка, отличный от цвета текста

Нумерованные списки. Необычная нумерация

Красивые списки при помощи css

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов