Маркированные списки. Примеры стильного оформление ul li списков CSS

В языке разметки гипертекста HTML имеется тег

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

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

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

Этот код преобразуется в маркированный список на сайте:

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

Тег

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

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

Что может являться содержимым маркированного списка?

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

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

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

Например

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

Атрибуты и свойства тега

Широко распространённым атрибутом тега

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

1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.

2. type="circle" - маркер в виде прозрачного кружка

Например:

• Элемент #1
• Элемент #2

• Элемент #1
• Элемент #2

3. type="square" - маркер в виде квадратика

Например:

• Элемент #1
• Элемент #2

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

• Элемент #1
• Элемент #2
Примечание 1

В CSS тип маркера задается с помощью атрибута list-style-type :

• ...

Рассмотрим какие значения может принимать list-style-type :

• disc - маркер в виде кружка (пример был выше)
• circle - маркер в виде прозрачного кружка (пример был выше)
• square - маркер в виде квадратика (пример был выше)
• decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
• decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
• lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
• upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
• lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
• upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
• lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
• upper-greek - маркер в виде списка греческим алфавитом большими буквами

Примечание 2

Атрибут можно назначить как самому тегу

, так и тегам
• . При задании атрибута тегу
  все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

  Код при этом выглядит так:

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

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

  Изменение маркеров тега

  с помощью CSS

  Элементы маркированного списка, создаваемые тегом

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

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

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

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

  C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу

  , он распространяется на все элементы списка.

  Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "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 задает обратный счет (в случае необходимости).

  Тег

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

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

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

    Примечание

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

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

    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 при выводе новых элементов в тегах

  • .

    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

    Задача

    Отобразить маркированый список горизонтально без маркеров.

    Решение

    Тег маркированного списка

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

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

      или

      Так вот, тег

    • также является блочным элементом.

      Чтобы тег

    • не вёл себя как блочный элемент, можно при помощи CSS сделать его строчным.

      За то, как элемент будет отображён в документе отвечает CSS свойство display . Рассмотрим три его значения (хотя их больше):

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

      Сначала сделаем горизонтальный список превратив его пунткы в строчные элементы. В стиле CSS пропишем правило, в котором селектору li установлено свойство display со значением inline .

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

      Итак, этот стиль сработал и получили горизонтальное расположение пунктов списка:

      Рисунок 1. Работа примера №1.

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

      Например нам нужно чтобы элемент создаваемого нами меню имел ширину 150px и высоту 40px . Попробуем изменить стиль на следующий, то есть добавим два правила устанавливающих размер пункта меню:

      Эти правки не приведут ни к каким изменениям. Чтобы элементы меню располагались горизонтально и можно было устанавливать их ширину и высоту им нужно установить тип inline-block . Изменим код нашего примера:

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

      Этот код работает и изменения видны:

      
      Рисунок 2. Работа примера №2.

      Но могут быть разные варианты, например нам нужно отобразить в меню вложенные списки:

      • Правка
        • Отменить
        • Вырезать
        • Копировать
        • Вставить
      • Начертание
        • Жирное
        • Курсивное
        • Подчеркнутое
      • Размер
        • Маленький
        • Нормальный
        • Средний
        • Большой

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

      
      Рисунок 3. Работа примера №3.

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

      А собственно, почему так происходит?

      Наши блоки имеют свойство display со значением inline-block . Это значит что у них есть качества как блочных элементов (возможность указать ширину и высоту), так и строчных элементов. То что мы наблюдаем - это качество строчных элементов.

      Давайте рассмотрим строку с символами "А" разной величины:

      А А А А А А А

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

      Для выравния текста по вертикали служит свойство vertical-align . В нашем примере №3 нужно использовать значение top , которое выравняет верхнюю границу элемента по верху самого высокого элемента строки.

      Пока применим его к строке с символами "А" разной величины:

      А А А А А А А

      Кажется, что буквы немного "скачут". Я установил CSS границу border самой высокой букве, чтобы было видно, что скачков на самом деле нет, есть пустое пространство между верхней границей (по которой происходит выравнивание) и верхней точкой символа "А".

      Свойство vertical-align нужно применять к каждому строчному элементу, оно не наследуется. Вы можете прочитать подробней про это свойство: vertical-align .

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

      Второй способ

      Разместить элементы списка горизонтально можно используя свойство float . Это свойство указывает по какой стороне выравнивается элемент, имеет две позиции: left и right .

      Вот пример с использованием этого кода:

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

      Вот результат работы кода:

      Рисунок 4. Работа примера.

      Вроде пример работает. Но в использовании этого свойства есть один нюанс. Сейчас мы его рассмотрим. Для примера возьмём код, в котором есть два горизонтальных списка с разным способом расположения элементов горизонтально: display и float :

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

      Вот результат работы кода:

      Рисунок 5. Работа примера.

      В этих примерах контейнеры списка

      имеют красную границу толщиной 1 пиксел. Но верхний список, в котором используется свойство display , включает в себя элементы списка. А вот элементы списка созданного с использованием свойства float выпадают из своего контейнера.

      При этом на первый взгляд всё работает. Но давайте поменяем местами наши списки. Поставим список с классом menu-1 в коде перед списком с классом menu-2 (сейчас он ниже).

      Вот что мы получим в результате:

      Рисунок 6. Работа примера.

      Пункты нижнего меню также обтекают вержнее меню, ведь действие свойства float никто не отменял и оно распространяется на все последующие элементы.

      Как решить эту проблему?

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

      Вот изменённый пример с использованием свойства clear :

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

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

      • всё ещё располагаются вне контейнера
        .
        Рисунок 7. Работа примера.

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

        Это делается при помощи псевдоэлемента. Вот код:

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

        Теперь у нас 100% рабочий код.

        Рисунок 8. Работа примера.

        Этот приём со свойством float обычно используют при вёрстке сайтов для выравнивания столбцов, которые создаются тегами

        . Таким способом мы получаем нормальное построение столбцов с требуемым выравниванием по высоте. Когда мы создаём меню, то нам, в большенстве случаев, не важна высота блоков, она практически всегда одинакова. Поэтому использование правила {display : inline-block } в этих случаях вполне оправдано.
        Но для полноты раскрытия темы мы тут ознакомились со всеми возможными вариантами. Хотя может есть и другие способы, например использование CSS-таблиц, но поисковики настойчиво рекомендуют использовать таблицы только по их прямому назначению, а не для организации элементов навигации или ещё как-либо.
        Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы 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 - арабские цифры
        	1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка
        1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка	1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка
        1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка	1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка
        1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка	1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка
        1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка	1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка
        Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 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 . На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.