Нумерованный список. Как разместить элементы списка горизонтально? Тег ol используется для реализации

Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений) .

Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена.

Маркированные HTML списки - теги ul и li

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

По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

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

Нумерованные HTML списки - теги ol и li

Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список - совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:

• A - заглавные латинские буквы;
• a - строчные латинские буквы;
• I - заглавные римские цифры;
• i - строчные римские цифры;
• 1 - арабские цифры

Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.

Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

HTML списки определений - теги dl, dd, dt

Еще один вид списков html - список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd - описание этого термина.

Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях.

Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от , поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail . На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках

, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none; .

css

li{ list-style: none; } .num{ color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. 1 Посадить дерево
2. 2 Построить дом
3. 3 Вырастить сына

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент::before и css-свойства content , counter-increment , counter-reset .

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

ol{ counter-reset: myCounter; } li{ list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px; }

html

1. Посадить дерево
2. Построить дом
3. Вырастить сына

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

• li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
• counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого
  .
  1. counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before .
  2. content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before .

подробнее о css-счетчиках можно посмотреть в

Списки бывают нумерованными и ненумерованными.

Нумерованные списки выводятся кодом:

Список с цифрами
1. пункт 1
2. пункт 2
3. пункт 3

Не нумерованные списки выводятся кодом:

Список с галочками или другими символами
• пункт 1
• пункт 1
• пункт 1

Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.

Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.

Для нумерованного списка прописываются стили нумерации для каждого пункта.

Стандартные арабские цифры описываются значением decimal.

list-style-type: decimal; /*арабские цифры*/

Для маркерованного списка указывается стиль символов — квадратики или кружочки.

list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/

Каждому пункту меню можно назначить изображение.

list-style-image: url(‘путь к изображению’);

Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.


Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

Как оформить нумерованный список?

Нумерованный список с использованием фона

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

Нравится? Давайте повторим.

Найдите стили для тега ol. Пропишите к нему новые свойства.

Ol { padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index: 2; counter-reset: point; } ol li { margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; } ol li:before { margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: center; position: absolute; font-weight: bold; }

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

list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов

before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта

В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

Нумерованный список с уникальным изображением для каждого пункта

На одном женском сайте есть очень привлекательные нумерованные списочки.

Как это реализовано? Давайте рассмотрим следующий код:

/*первый номер*/ ol li:first-child { list-style-image: url(путь к изображению с цифрой 1); } /*второй номер*/ ol li:nth-child(2n) { list-style-image: url(путь к изображению с цифрой 2); } /*третий номер*/ ol li:nth-child(3n) { list-style-image: url(путь к изображению с цифрой 3); } /*четвертый номер*/ ol li:nth-child(4n) { list-style-image: url(путь к изображению с цифрой 4); } /*Далее прописываем точно также только для следующих номеров пунктов*/

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

Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).

Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.


Как оформить маркированный (ненумерованный) список?

Маркированный список ul li с чередующимися иконками

Мне очень понравился вот такой маркированный список

Ul { padding: 11px 0 5px 0; } ul li { padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } ul li:before { content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; } ul li:nth-child(2n):before { content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; }

Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

Для эксперимента можно назначить отступы:

Ul li{ list-style-image: url(images/radio.png); margin-left: 30px; }

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

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

Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.


Как вывести на странице несколько списков с разным оформлением?

Иногда нужно разместить несколько списков с разными стилями.

Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

Вот, например, один симпатичный вариант оформления содержания:

В HTML вы пропишите список так:

Содержание
1. пункт 1
2. пункт 2
3. пункт 3

В CSS вы пропишите стили так:

Ol#sod{ padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }

Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.

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

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


Как создать ссылки-якоря в списке содержания?

Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.

Содержание
1. Заголовок 1
2. Заголовок 2
3. Заголовок 3

А в тексте статьи нужно написать так:

Заголовок 1… Заголовок 2… Заголовок 3…

Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.

Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.

Агеева Вероника.

Возможно вас еще заинтересует:

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

маркированный список —

— каждый элемент списка
• отмечается маркером,
  нумерованный список —
  — каждый элемент списка
  1. отмечается цифрой,
     список определений — — состоит из пар термин
     —
     определение.

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

     Создание HTML-списков

     1. Маркированный список

     Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега

     . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

     Каждый элемент списка создаётся с помощью парного тега

  2. (от англ. List Item) .
  доступны .
  • Microsoft
  • Google
  • Apple
  Рис. 1. Маркированный список

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

  Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента

• . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

  Блок списка также имеет стили браузера по умолчанию:

• доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
• , то остальная нумерация будет пересчитана относительно нового значения.

  Для тега

  доступны следующие атрибуты:
  Таблица 1. Атрибуты тега

  Атрибут	Описание, принимаемое значение
  reversed	Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
  start	Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, .
  type	Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv).

  1. Microsoft
  2. Google
  3. Apple
  Рис. 2. Нумерованный список

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

  Списки определений создаются с помощью тега

  . Для добавления термина применяется тег
  , а для вставки определения — тег
  .

  Блок списка определений имеет следующие стили браузера по умолчанию:

  Для тегов

  ,

  и

  доступны .

  Режиссер:

  Петр Точилин

  В ролях:

  Андрей Гайдулян

  Алексей Гаврилов

  Виталий Гогунский

  Мария Кожевникова

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

  4. Вложенный список

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

  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
    • Подпункт 2.3.
  • Пункт 3.

  
  Рис. 4. Вложенный список

  5. Многоуровневый нумерованный список

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

  1. пункт
  2. пункт
     1. пункт
     2. пункт
     3. пункт
        1. пункт
        2. пункт
        3. пункт
     4. пункт
  3. пункт
  4. пункт

  Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
  counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
  counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
  content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

  Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
  Рис. 5. Многоуровневый нумерованный список

Описание

Атрибуты

reversed: Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута:

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

Start: Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример » type: Определяет вид маркера, который будет использоваться для элементов списка:

• 1 - десятичные числа (1, 2, 3, 4 ...).
• A - латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D ...).
• a - латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d ...).
• I - римские цифры в верхнем регистре (I, II, III, IV ...).
• i - римские цифры в нижнем регистре (i, ii, iii, iv ...).
Пример »

Тег

так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }

Пример

1. Кофе
2. Чай
3. Молоко
50. Кофе
51. Чай
52. Молоко