---
title: Styling Lists
localeTitle: Списки стилей
---
## Списки стилей
### Списки HTML-списков
В HTML есть два основных типа списков: **упорядоченный** и **неупорядоченный** .
В **упорядоченных** списках ( `
` ) порядок элементов списка важен. Элементы могут отображаться по порядку по номеру, римской цифре, альфа-цифре или марку другого типа. Маркер по умолчанию для упорядоченных списков - это число (или `decimal` ):
> 
В **неупорядоченных** списках ( `` ) порядок элементов списка не имеет значения. Элементы отображаются в формате пули. Маркер по умолчанию для неупорядоченных списков - это круглый маркер или `disc` .
> 
Каждый элемент списка в упорядоченном или неупорядоченном списке создается `` .
### Стили списка
Существует три общих свойства, характерных для списков стилей: `list-style-type` , `list-style-position` и `list-style-image` . Существует также стенографическое свойство, которое включает в себя все три.
#### `list-style-type`
Маркеры (или маркеры), которые отображаются в упорядоченных и неупорядоченных списках, могут быть разными способами. Свойство CSS для стилизации типа маркера является типом типа `list-style-type` . Значение по умолчанию для типа `list-style-type` для упорядоченного списка является `decimal` , а по умолчанию для неупорядоченного списка - `disc` .
Пример списка заказа:
> ```css
> /* css */
> ol {
> list-style-type: upper-roman;
> }
>
> ```
>
> 
Пример неупорядоченного списка:
> ```css
> /* css */
> ul {
> list-style-type: square;
> }
>
> ```
>
> 
Нет примера с маркером:
> ```css
> /* css */
> ul {
> list-style-type: none;
> }
>
> ```
>
> 
Принятые значения для свойства `list-style-type` :
_Неупорядоченный:_
* диск (по _умолчанию_ )
* круг
* квадрат
_Приказал:_
* decimal (по _умолчанию_ )
* десятичное ведущий нуля
* низший романский
* Верхняя-римской
* низший греческий
* ниже латынь
* Верхняя латынь
* армянин
* грузинский
* низший-альфа
* Верхняя-альфа
_Другой:_
* никто
Примечание. Все перечисленные выше значения свойств могут использоваться для стилирования как упорядоченных, так и неупорядоченных списков (например: упорядоченный список с `square` маркерами).
#### `list-style-position`
`list-style-position` определяет, отображается ли маркер списка внутри или вне элемента элемента списка ( `` ). Свойство принимает два значения: `outside` (по умолчанию) или `inside` .
Поместите маркер `outside` элемента элемента списка, и все текстовые строки и подстроки каждого элемента списка будут выравниваться по вертикали:
> ```css
> /* css */
> ul {
> list-style-position: outside; /* default */
> }
>
> ```
>
> 
Поместите маркер `inside` , и первая текстовая строка каждого элемента списка будет отступом, чтобы освободить место для маркера. Любые подстроки одного и того же элемента списка будут выравниваться с маркером, а не с первой текстовой строкой:
> ```css
> /* css */
> ul {
> list-style-position: inside;
> }
>
> ```
>
> 
#### `list-style-image`
Свойство `list-style-image` принимает URL-адрес изображения вместо маркера списка. Значение по умолчанию для этого свойства равно `none` .
> ```css
> /* 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
> /* 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
> /* 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
> /* css */
> ul {
> list-style: none;
> padding: 0;
> }
> li {
> padding: 5px 10px;
> background-color: #EEEEEE;
> border: 1px solid #DDDDDD;
> }
>
> ```
>
> 
* * *
#### Источники:
Ссылки, приведенные ниже, были указаны при компиляции информации, найденной в этой статье. Пожалуйста, посетите их для получения дополнительной информации по этой теме.
#### Дополнительная информация:
[MDN - Списки стилей](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
[W3Schools - Списки CSS](https://www.w3schools.com/css/css_list.asp)
[CSS-трюки - стиль списка](https://css-tricks.com/almanac/properties/l/list-style/)