Перейти к содержанию

list-style

Универсальное свойство list-style позволяет одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.

Демо

Списки, счетчики, генерируемый контент

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

Значения

Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Значение по-умолчанию: Нет

Применяется к элементам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>list-style</title>
    <style>
      ul {
        list-style: square outside; /* Квадратные маркеры */
        /* Маркеры размещаются за пределами текстового блока */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Многомерный полином</li>
      <li>Нормальный абсолютно сходящийся ряд</li>
      <li>Интеграл от функции</li>
      <li>Коллинеарный экстремум функции</li>
    </ul>
  </body>
</html>

Комментарии