Что обозначают теги ul ol li. Примеры стильного оформление ul li списков CSS. Специальные и вложенные списки в Html коде

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. Многоуровневый нумерованный список

Значение и применение

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега

(сокращенное от английского ordered list - упорядоченный список). Каждый элемент списка начинается с тега
1. (элемент списка).

   Поддержка браузерами

   Атрибут			Opera		IExplorer	Edge
   start , type	Да	Да	Да	Да	Да	Да
   reversed	Да	Да	Да	Да	Нет	Нет

   Атрибуты

   Атрибут	Значение	Описание
   compact	compact	Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height : 80% ). Используйте CSS вместо данного атрибута.
   	reversed	Указывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
   start	number	Определяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = "A" и type = "a" ), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = "4" , будет соответствовать букве "D" и список начнётся именно с неё. При использовании значения start = "27" счетчик обнуляется, при этом список становится двухзначным ("27" = "AA", "28" = "AB", "29" = "AC"...).
   type	1 (по умолчанию) A (большие) a (строчные) I (римские большие) i (римские маленькие)	Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка.

   Пример использования

   1. Первый пункт Второй пункт
   2. Третий пункт

   Выглядеть на странице это будет соответственно так:

   1. Первый пункт.
   2. Второй пункт.
   3. Третий пункт.

   Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега

   .

   Например:

   Ещё один интересный атрибут - type , который позволит Вам задать буквенную нумерацию ("A" – большие, "a" – строчные), либо нумерацию из римских цифр ("I" – в верхнем регистре, "i" – в нижнем регистре).

   Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

   >
   1. Первый пункт Второй пункт
   2. Третий пункт
   >
   1. Первый пункт Второй пункт
   2. Третий пункт
   >
   1. Первый пункт Второй пункт
   2. Третий пункт
   >
   1. Первый пункт Второй пункт
   2. Третий пункт

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

   3. ):
      1. Первый пункт
         1. Первый пункт Второй пункт
         2. Третий пункт
         Второй пункт
         3. Третий пункт

         Выглядеть на странице это будет соответственно так.

         Если вы когда-либо пробовали изменять 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…

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

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

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

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

         Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.

         Синтаксис тега

         1. Элемент #1
         2. Элемент #2
         3. Элемент #3
         4. ...

         Где атрибут type="value" может принимать следующие значения

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

         Атрибут start="value" задает начальное значение (стартовое значение) отчета.

         Атрибут reversed задает обратный счет (в случае необходимости).

         Тег

         требует обязательного использования закрывающего тега

         Для формирования элементов списка используется парный тег

         1. . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

            Примечание

            Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега

         2. , которому присваивается какое-то числовое значение. Например

            1. Элемент #1
            10. Элемент #2
            11. Элемент #3

            Примеры с нумерованными списками в html (

            )

            Пример 1. Нумерованный список html в виде латинских букв

            Пример с заглавными буквами

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Пример со строчными буквами

            1. Элемент #10
            2. Элемент #11
            3. Элемент #12

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Пример 2. Нумерованный список html в виде римских букв

            Пример с заглавными буквами

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Пример со строчными буквами

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Пример 3. Нумерованный список html разная позиция старта

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

            50. Элемент #1
            51. Элемент #2
            52. Элемент #3

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3

            Пример 4. Изменение счета в нумерованных списках html

            Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах

         3. .

            10. Элемент #1
            11. Элемент #2
            100. Элемент #3
            101. Элемент #4

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3
            4. Элемент #4

            Пример 5. Реверсивный нумерованный список в html

            Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).

            10. Элемент #1
            11. Элемент #2
            12. Элемент #3
            13. Элемент #4

            Вот как это выглядит на странице:

            1. Элемент #1
            2. Элемент #2
            3. Элемент #3
            4. Элемент #4