Список CSS

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

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

Список

В HTML существует два типа списков:

• Неупорядоченный списокul- Маркеры элементов списка используют специальные графические символы (например, маленькие чёрные точки, маленькие квадраты и т. д.)
• Упорядоченный списокol- Маркеры элементов списка могут быть числами или буквами

Используя CSS, можно дополнительно стилизовать списки и использовать изображения в качестве маркеров элементов списка.

Неупорядоченный список отображается следующим образом:

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

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

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

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

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

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

Свойство list-style-type задаёт тип маркера элемента списка:

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

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

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

Приведённый выше пример отображается по-разному в разных браузерах. IE и Opera отображают маркер изображения немного выше, чем Firefox, Chrome и Safari.

Если вы хотите разместить один и тот же маркер изображения во всех браузерах, следует использовать решение для совместимости браузеров, как показано ниже:

Решения для совместимости браузеров

Аналогично, во всех браузерах следующий пример отобразит маркер изображения:

Пояснение к примеру:

• ul:
  • Установите тип списка без маркера элемента списка
  • Установите для padding и margin значение 0px (совместимость с браузерами)
• Все li в ul:
  • Задайте URL изображения и установите отображение только один раз (без повтора)
  • Нужно позиционировать изображение (left 0px и top 5px)
  • Используйте свойство padding-left, чтобы разместить текст в списке

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

Все свойства списка можно указать в одном свойстве. Это называется сокращённым свойством.

Для списков используйте сокращённое свойство, задав свойство list-style следующим образом:

Можно задать следующие свойства по порядку:

• list-style-type
• list-style-position (См. соответствующие примечания в таблице свойств CSS ниже)
• list-style-image

Если одно из вышеуказанных значений отсутствует, это не имеет значения, если остальные остаются в указанном порядке.

Другие примеры

Все различные маркеры элементов списка
Этот пример демонстрирует все различные маркеры элементов списка CSS.

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

The list-style-type:none property can be used to remove the small markers. By default, lists <ul> or <ol> also have padding and margins set, which can be usedmargin:0andpadding:0to remove:

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