Неупорядоченные списки:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
Упорядоченные списки:
- Кофе
- Чай
- Кока Кола
- Кофе
- Чай
- Кока Кола
HTML списки и список CSS свойства
В HTML существуют два основных вида списков:
- Неупорядоченные списки
<ul> - элементы списка обозначаются кружками
- Упорядоченные списки
<ol> - элементы списка обозначаются цифрами или буквами
CSS свойства списка позволит Вам:
- Установить множество разных маркеров списка для упорядоченных списков
- Установить множество элементов списка маркеров для маркированных списков
- Установить изображение в качестве элемента списка маркера
- Установить цвет фона для списков и элемента списка
Различные маркеры элементов списка
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;
}
Попробуйте сами »
Примечание: Несколько из значений для неупорядоченных списков, и несколько для упорядоченных списков.
Изображение в качестве маркера элемента списка
CSS свойство list-style-image определяет изображение как элемент маркер, списка:
ul {
list-style-image: url('sqpurple.gif');
}
Попробуйте сами »
Расположение маркера элементов списка
CSS свойство list-style-position определяет, будет ли элемент списка маркер находиться внутри или снаружи содержимого:
ul {
list-style-position: inside;
}
Попробуйте сами »
Удалить настройки списка по умолчанию
CSS свойство list-style-type:none также может быть использован для удаления маркеров/кружков. Обратите внимание, что в списке также есть поля и отступы по умолчанию. Чтобы удалить или добавить margin:0 или padding:0 в <ul> или <ol>:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Попробуйте сами »
Списки - свойство сокращений
CSS свойство list-style свойство сокращений. Свойство используется, для установки всех свойств списка в одном объявлении
ul{
list-style: square inside url("sqpurple.gif");
}
Попробуйте сами »
При использовании свойства 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 свойства list-style
| Свойство | Описание |
|---|---|
| list-style | Устанавливает все свойства списка в одном объявлении |
| list-style-image | Устанавливает изображение в качестве элемента списка, маркер |
| list-style-position | Определяет, что элемента списка маркер должны находиться внутри или снаружи содержимого |
| list-style-type | Указывает тип элемента списка, маркер |