⚡️ HTML и CSS с примерами кода

Тег <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный (неупорядоченный) список.

Каждый пункт списка должен начинаться с элемента <li>.

Текстовые блоки
  • blockquote
  • dd
  • div
  • dl
  • dt
  • hr
  • li
  • ol
  • p
  • pre
  • ul

Синтаксис

<ul>
  <li>пункт маркированного списка</li>
</ul>

Закрывающий тег обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты.

compact
Не используйте этот атрибут, так как он устарел: вместо этого используйте CSS. Чтобы получить эффект, аналогичный атрибуту compact, можно использовать свойство line-height со значением 80%.
Этот логический атрибут означает, что список должен отображаться в компактном стиле. Интерпретация этого атрибута зависит от пользовательского агента, и он работает не во всех браузерах.
type
Не используйте этот атрибут, так как он устарел; вместо этого используйте свойство CSS list-style-type.
Этот атрибут устанавливает стиль маркера для списка. Значения, определенные в HTML 3.2 и HTML 4.0 / 4.01:
  • circle
  • disc
  • square
  • Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его: triangle
    .

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

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>UL</title>
  </head>
  <body>
    <ul>
      <li>Баал</li>
      <li>Агарес</li>
      <li>Марбас</li>
      <li>Пруфлас</li>
      <li>Аамон</li>
    </ul>
  </body>
</html>

Пример 2

Вложенные списки

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Внимание, закрывающий тег </li> здесь не размещаем -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>
            second item second subitem first sub-subitem
          </li>
          <li>
            second item second subitem second sub-subitem
          </li>
          <li>
            second item second subitem third sub-subitem
          </li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
            contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Здесь размещается закрывающий тег </li> -->
  </li>
  <li>third item</li>
</ul>

Пример 3

Упорядоченный список внутри неупорядоченного списка

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

См.

также
  • <ol>
  • <li>
  • list-style
  • line-height

Ссылки

  • Тег <ul> MDN (рус.)

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

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

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).

Пример 1. Использование вложенных тегов

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет текста и маркеров в списке</title> <style> li { color: red; /* Цвет маркеров */ } li span { color: green; /* Цвет текста */ } </style> </head> <body> <ul> <li><span>Скрипка</span></li> <li><span>Гитара</span></li> <li><span>Волынка</span></li> <li><span>Шарманка</span></li> <li><span>Челеста</span></li> </ul> </body> </html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять <span>.

Использование ::before

Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае <li>. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.

Пример 2. Использование псевдоэлемента ::before

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет маркеров в списке</title> <style> li { list-style-type: none; /* Прячем исходные маркеры */ } li::before { color: red; /* Цвет маркера */ content: «▪»; /* Сам маркер */ padding-right: 10px; /* Расстояние от маркера до текста */ } </style> </head> <body> <ul> <li>Север</li> <li>Юг</li> <li>Запад</li> <li>Восток</li> </ul> </body> </html>

Результат данного примера показан на рис.

No related posts.