CSS Списки

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

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

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

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

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

Различные маркеры списка

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

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

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

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

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

Расположите маркеры элементов списка

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

"list-style-position: outside;" означает, что маркеры будут вне элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это по умолчанию:

• Coffee - Сваренный напиток, приготовленный из жареных кофейных зерен...
• Tea
• Coca-cola

"list-style-position: inside;" означает, что маркеры будут внутри элемента списка. Поскольку он является частью элемента списка, он будет частью текста и вставит текст в начале:

• Coffee - Сваренный напиток, приготовленный из жареных кофейных зерен...
• Tea
• Coca-cola

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

Свойство 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 Списка