CSS Списки

1. Кофе
2. Чай
3. Кока Кола

• Кофе
• Чай
• Кока Кола

Список HTML и свойства CSS

В HTML существуют два основных вида списков:

• ненумерованные списки <ul>
- элементы списка обозначаются кружками
• упорядоченные списки <ol>
- элементы списка обозначаются цифрами или буквами

Свойства списка CSS позволит Вам:

• Установить множество разных маркеров списка для упорядоченных списков
• Установить множество элементов списка маркеров для маркированных списков
• Установить изображение в качестве элемента списка маркера
• Установить цвет фона для списков и элемента списка

Различие маркеров списка

Свойство list-style-type указывает тип элемента маркера списка.

Следующий пример показывает некоторые из доступных маркеров списка:

Примечание: Несколько из значений для неупорядоченных списков, и несколько для упорядоченных списков.

Изображение как маркер списка

Свойство list-style-image определяет изображение как элемент маркер, списка:

Расположение маркера списка

Свойство list-style-position определяет, будет ли элемент списка маркер находиться внутри или снаружи содержимого:

Удалить настройки по умолчанию

Свойство list-style-type:none также может быть использован для удаления маркеров/кружков. Обратите внимание, что в списке также есть поля и отступы по умолчанию. Чтобы удалить или добавить margin:0 или padding:0 в <ul> или <ol>:

Список - сокращение свойств

Свойство list-style свойство сокращений. Свойство используется, для установки всех свойств списка в одном объявлении

При использовании сокращения свойства, порядок значения свойств:

• list-style-type ( если задано свойство list-style-image, то значение его будет отображено, если изображение по каким-то причинам не может быть отображены )
• list-style-position (определяет, будет ли маркер элемент списока находиться внутри или снаружи содержимого)
• list-style-image (определяет изображение в качестве маркера элемента списка)

Если одно из значений свойств отсутствует, значение будет по умолчанию.

Стиль цвета списка

Также можно установить стиль списков цветными, сделать их немного интересными.

Все, что добавляется к тегам <ol> или <ul>, влияет на весь список, а в то время как свойства добавленны в тег <li> будет влиять на отдельные элементы списка:

Еще примеры

Установить список с красной левой границей
Пример демонстрирует, как создать список с красной левой границей.

Установить в полную ширину, границы списка
Пример демонстрирует, как создать границы списка без кружков.

Установить разные элементы маркеров списка
Пример демонстрирует разные элементы списка маркеров в CSS.

Все CSS свойства списка