В HTML есть три разных типа списков:

  • Неупорядоченные списки (ul, сокращенно от unordered lists) — список элементов, где каждый элемент списка помечен маркером;
  • Упорядоченные списки (ol, сокращенно от ordered lists) — список элементов, где каждый элемент списка помечен номером;
  • Список определений (dl, сокращенно от definition list) — список элементов с описанием каждого элемента.

См. Руководство по спискам в HTML, чтобы узнать больше о том, как их создавать.

Стилизация списков с помощью CSS

CSS предоставляет несколько свойств для стилизации и форматирования наиболее часто используемых неупорядоченных и упорядоченных списков. Эти CSS-свойства обычно позволяют:

  • Изменять форму и внешний вид маркера;
  • Устанавливать изображение для маркера;
  • Устанавливать расстояние между маркером и текстом в списке;
  • Указывать, будет ли маркер отображаться внутри или снаружи поля, содержащего элементы списка.

Теперь обсудим свойства, которые можно использовать для стилизации HTML-списков.

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

По умолчанию элементы в упорядоченном списке нумеруются арабскими цифрами (1, 2, 3, 5 и т. д.), тогда как в неупорядоченном списке элементы помечаются круглыми маркерами (•).

Но вы можете изменить этот тип маркера по умолчанию на любой другой тип, такой как римские цифры, латинские буквы, круг, квадрат и т. д., используя свойство list-style-type.

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

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Изменение положения списка маркеров

По умолчанию маркеры для каждого элемента списка располагаются за пределами (outside) их блока.

Однако вы также можете расположить эти маркеры внутри элементов списка, используя свойство list-style-position вместе со значением inside. В этом случае строки будут переноситься с маркером, а не с отступом. Вот пример:

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

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

Лучше не использовать значение inside в основном контенте страницы, там где могут быть использованы теги <p> внутри тегов <li>. Дело в том, что маркер списка строчный элемент, а тег <p> блочный и он будет переноситься на следующую строку.

Использование изображений в качестве маркеров списка

Вы также можете установить изображение в качестве маркера списка, используя свойство list-style-image.

Правило в следующем примере назначает прозрачное изображение PNG arrow.png в качестве маркера списка для всех элементов в неупорядоченном списке.

ul li {
    list-style-image: url("images/arrow.png");
}

В некоторых браузерах свойство list-style-image может дать не ожидаемый результат. Вы можете использовать следующее решение для лучшего контроля расположения маркеров с изображениями.

В качестве альтернативного пути вы также можете установить маркеры изображения через CSS-свойство background-image. Во-первых, установите list-style-type в значение none, чтобы не было маркеров. Во-вторых определите не повторяющееся (background-repeat: no-repeat) фоновое изображение (background-image) для элемента списка.

В следующем примере маркеры изображения отображаются одинаково во всех браузерах:

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Установка всех свойств списка одновременно

Свойство list-style является кратким свойством для определения всех трех свойств list-style-type, list-style-image и list-style-position списка в одном.

Следующее правило устанавливает все свойства списка в одном объявлении.

ul {
    list-style: square inside url("images/bullet.png");
}

При использовании сокращенного свойства list-style, важен порядок значений: list-style-type | list-style-position | list-style-image. Не имеет значения, пропущено ли одно из указанных выше значений, если остальные находятся в указанном порядке.

Создание меню навигации с использованием списков

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

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

Подробнее о CSS-свойствах display и padding вы узнаете в следующих главах.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.