10 KiB
title | localeTitle |
---|---|
Styling Lists | Списки стилей |
Списки стилей
Списки HTML-списков
В HTML есть два основных типа списков: упорядоченный и неупорядоченный .
В упорядоченных списках ( <ol></ol>
) порядок элементов списка важен. Элементы могут отображаться по порядку по номеру, римской цифре, альфа-цифре или марку другого типа. Маркер по умолчанию для упорядоченных списков - это число (или decimal
):
В неупорядоченных списках ( <ul></ul>
) порядок элементов списка не имеет значения. Элементы отображаются в формате пули. Маркер по умолчанию для неупорядоченных списков - это круглый маркер или disc
.
Каждый элемент списка в упорядоченном или неупорядоченном списке создается <li></li>
.
Стили списка
Существует три общих свойства, характерных для списков стилей: list-style-type
, list-style-position
и list-style-image
. Существует также стенографическое свойство, которое включает в себя все три.
list-style-type
Маркеры (или маркеры), которые отображаются в упорядоченных и неупорядоченных списках, могут быть разными способами. Свойство CSS для стилизации типа маркера является типом типа list-style-type
. Значение по умолчанию для типа list-style-type
для упорядоченного списка является decimal
, а по умолчанию для неупорядоченного списка - disc
.
Пример списка заказа:
/* css */ ol { list-style-type: upper-roman; }
Пример неупорядоченного списка:
/* css */ ul { list-style-type: square; }
Нет примера с маркером:
/* css */ ul { list-style-type: none; }
Принятые значения для свойства list-style-type
:
Неупорядоченный:
- диск (по умолчанию )
- круг
- квадрат
Приказал:
- decimal (по умолчанию )
- десятичное ведущий нуля
- низший романский
- Верхняя-римской
- низший греческий
- ниже латынь
- Верхняя латынь
- армянин
- грузинский
- низший-альфа
- Верхняя-альфа
Другой:
- никто
Примечание. Все перечисленные выше значения свойств могут использоваться для стилирования как упорядоченных, так и неупорядоченных списков (например: упорядоченный список с square
маркерами).
list-style-position
list-style-position
определяет, отображается ли маркер списка внутри или вне элемента элемента списка ( <li></li>
). Свойство принимает два значения: outside
(по умолчанию) или inside
.
Поместите маркер outside
элемента элемента списка, и все текстовые строки и подстроки каждого элемента списка будут выравниваться по вертикали:
/* css */ ul { list-style-position: outside; /* default */ }
Поместите маркер inside
, и первая текстовая строка каждого элемента списка будет отступом, чтобы освободить место для маркера. Любые подстроки одного и того же элемента списка будут выравниваться с маркером, а не с первой текстовой строкой:
/* css */ ul { list-style-position: inside; }
list-style-image
Свойство list-style-image
принимает URL-адрес изображения вместо маркера списка. Значение по умолчанию для этого свойства равно none
.
/* css */ ul { list-style-image: url(https://url-to-image); }
Сокращенный list-style
list-style
- это сокращенное свойство для трех свойств стиля, перечисленных выше. Принятый порядок значений list-style
принимает list-style
list-style-type
, list-style-position
и list-style-image
. Если какое-либо значение опущено, будет использоваться значение по умолчанию для этого свойства.
Пример:
/* css */ ul { list-style: circle inside none; }
Больше стилей для списка
Теги упорядоченного списка также принимают атрибуты, которые управляют потоками, подсчетами или конкретными значениями маркера его элементов списка. К ним относятся атрибуты start
, reversed
и value
. Дополнительную информацию см. В ресурсах MDN, перечисленных ниже.
Общий стиль
Список содержимого можно стилизовать так же, как и другие элементы p
или div
. color
, font-family
, margin
, padding
или border
- всего лишь несколько примеров свойств, которые могут быть добавлены к элементам ul
, ol
или li
.
Обратите внимание, что любые стили, добавленные в элемент ul
или ol
будут влиять на весь список. Стили, добавленные непосредственно к элементам li
будут влиять на отдельные элементы списка. В приведенном ниже примере свойства границы и цвета фона различаются между элементами списка и элементов списка:
/* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }
Интервал между списками
Вы можете заметить дополнительное расстояние перед элементами списка, если для типа list-style-type
установлено значение none
. Настройка padding
на 0
(или любой другой интервал предпочтительнее) в элементе списка будет переопределять это заполнение по умолчанию.
/* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }
Источники:
Ссылки, приведенные ниже, были указаны при компиляции информации, найденной в этой статье. Пожалуйста, посетите их для получения дополнительной информации по этой теме.