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

list-style¶

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

Демо¶

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

Синтаксис¶

/* 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

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

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

<!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>

Комментарии