CSS Списки
Неупорядоченные списки:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Упорядоченные списки:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Список и свойства CSS
В HTML существуют два основных вида списков:
- ненумерованные списки
<ul> - элементы списка обозначаются кружками
- упорядоченные списки
<ol> - элементы списка обозначаются цифрами или буквами
Свойства списка CSS позволит Вам:
- Установить множество разных маркеров списка для упорядоченных списков
- Установить множество элементов списка маркеров для маркированных списков
- Установить изображение в качестве элемента списка маркера
- Установить цвет фона для списков и элемента списка
Различие маркеров списка
Свойство list-style-type указывает тип элемента маркера списка.
Следующий пример показывает некоторые из доступных маркеров списка:
Пример
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Попробуйте сами »
Примечание: Несколько из значений для неупорядоченных списков, и несколько для упорядоченных списков.
Изображение как маркер списка
Свойство 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> будет влиять на отдельные элементы списка:
Пример
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
Результат:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Еще примеры
Установить список с красной левой границей
Пример демонстрирует, как создать список с красной левой границей.
Установить в полную ширину, границы списка
Пример демонстрирует, как создать границы списка без кружков.
Установить разные элементы маркеров списка
Пример демонстрирует разные элементы списка маркеров в CSS.
CSS Упражнения
Все CSS свойства списка
| Свойство | Описание |
|---|---|
| list-style | Устанавливает все свойства списка в одном объявлении |
| list-style-image | Устанавливает изображение в качестве элемента списка, маркер |
| list-style-position | Определяет, что элемента списка маркер должны находиться внутри или снаружи содержимого |
| list-style-type | Указывает тип элемента списка, маркер |