CSS Списки

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

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

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

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

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

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

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

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

list-style-type свойство определяет тип маркера элемента списка.

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

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

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

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

Позиция элемента списка, маркеры

list-style-position свойство определяет , следует ли маркеры элемента списка появляются внутри или вне потока контента:

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

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

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

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

Если одно из значений свойств выше отсутствуют, то значение по умолчанию для недостающего имущества будет вставлен, если таковые имеются.

Список укладка с цветами

Мы можем также стиль списки с цветами, чтобы они выглядели немного более интересным.

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

Еще примеры

Полная ширина граничила список
Этот пример демонстрирует, как создать граничат список без пуль.

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

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »

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