CSS Lists - списки
Неупорядоченные списки:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Упорядоченные списки:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
HTML-списки и свойства списка CSS
В HTML существует два основных типа списков:
- unordered lists (<ul>) - элементы списка помечены маркерами
- ordered lists (<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 указывает изображение в качестве маркера элемента списка:
Пример
ul
{
list-style-image: url('sqpurple.gif');
}
Расположение маркеров элементов списка
Свойство list-style-position указывает положение маркеров элементов списка (маркеров).
"список-стиль-позиция: снаружи;" означает, что пуля точек будет за пределами элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это значение по умолчанию:
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
"список-стиль-позиция: внутри;" означает, что пуля точек будет внутри элемента списка. Поскольку он является частью элемента списка, он будет частью текста и нажимаем текст в начале:
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
Пример
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Удаление параметров по умолчанию
Свойство list-style-type:none также можно использовать для удаления маркеров/пуль. Обратите внимание, что в списке также имеются поля и отступы по умолчанию. Чтобы удалить это, добавьте margin:0 и padding:0 в <ul> или <ol>:
Пример
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Список-Сокращенное свойство
Свойство list-style является сокращенным свойством. Он используется для задания всех свойств списка в одном объявлении:
Пример
ul
{
list-style: square inside url("sqpurple.gif");
}
При использовании сокращенного свойства порядок значений свойств:
list-style-type(если указан стиль List-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;
}
Result:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Другие примеры
Подгонянный список с красной левой границей
В этом примере демонстрируется создание списка с красной левой границей.
Полный список границ ширины
В этом примере демонстрируется создание пограничного списка без маркеров.
Все различные маркеры списка элементов для списков
В этом примере демонстрируются все различные маркеры элементов списка в CSS.
Все свойства списка CSS
| Свойство | Описание |
|---|---|
| list-style | Задает все свойства для списка в одном объявлении |
| list-style-image | Задает изображение в качестве маркера элемента списка |
| list-style-position | Определяет положение маркеров элементов списка (маркеров) |
| list-style-type | Указывает тип маркера элемента списка |