# Свойство list-style-type

Свойство `list-style-type` позволяет для списка `ul` вместо маркеров-точек сделать квадраты или окружности. Для списка `ol` вместо обычных цифр можно сделать римские, нумерацию в виде букв: латинских или греческих.

## Синтаксис

`селектор { list-style-type: значение; }`

## Значения для ul

Значение | Описание
--- | ---
`circle` | Создает маркеры в виде кружков.
`disc` | Создает маркеры в виде закрашенных кружков.
`square` | Создает маркеры в виде квадратиков.
`none` | Убирает маркеры.

Значение по умолчанию: `disc`.

## Значения для ol

Значение | Описание
--- | ---
`armenian` | Традиционная армянская нумерация.
`decimal` | Арабские числа.
`decimal-leading-zero` | Арабские числа с нулем впереди для цифр меньше десяти.
`georgian` | Традиционная грузинская нумерация.
`lower-alpha` | Строчные латинские буквы.
`lower-greek` | Строчные греческие буквы.
`lower-latin` | Это значение аналогично lower-alpha.
`lower-roman` | Римские числа в нижнем регистре.
`upper-alpha` | Заглавные латинские буквы.
`upper-latin` | Это значение аналогично upper-alpha.
`upper-roman` | Римские числа в верхнем регистре.
`none` | Убирает маркеры.

Значение по умолчанию: `decimal`.

## Пример

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-type: disc; }`

:

## Пример

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-type: circle; }`

:

## Пример

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-type: square; }`

:

## Пример

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-type: none; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: decimal; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: armenian; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: decimal-leading-zero; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: georgian; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: lower-alpha; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: lower-greek; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: lower-latin; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: lower-roman; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: upper-alpha; }`

:

## Пример

`<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>` `ol { list-style-type: upper-roman; }`

:

## Пример

Данный пример показывает, что свойство `color` влияет не только на цвет текста, но и на цвет маркеров:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-type: disc; color: red; }`

:

## Смотрите также

- свойство `list-style-image`,
  которое задает маркеры в виде заданных картинок
- свойство `list-style-position`,
  которое задает позицию маркеров
- свойство `list-style`,
  которое является сокращением для маркеров

← →
↑
en ru