Списки в CSS

Тип маркера

Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка CSS. Для этого есть свойство list-style-type. У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

Для маркированного списка:

list-style-type: disc - в виде диска (по умолчанию)

list-style-type: circle - в виде круга

list-style-type: square - в виде квадрата

Для нумерованного списка

list-style-type: decimal - арабские цифры (по умолчанию)

list-style-type: decimal-leading-zero - арабские цифры c 0 впереди для чисел 1-9

list-style-type: upper-roman - заглавные римские цифры

list-style-type: lower-roman - строчные римские цифры

list-style-type: upper-latin - заглавные латинские буквы

list-style-type: upper-alpha - то же, что и upper-latin

list-style-type: lower-latin - строчные латинские буквы

list-style-type: lower-alpha - то же, что и lower-latin

list-style-type: lower-greek - строчные греческие буквы

list-style-type: armenian - армянские числа

list-style-type: georgean - грузинские числа

list-style-type: none - позволяет убрать маркеры списка. Для обоих списков

list-style-type: inherit - значение принимается от родительского элемента. Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Стиль:

#nl1
  {
  list-style-type: circle;
  }
#nl2
  {
  list-style-type: upper-latin;
  }

HTML код:

<ul id="nl1">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>
<ol id="nl2">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Попробуйте установить другие типы маркера.

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

<ul style="list-style-type: none">
  <li>Строка текста</li>
  <li>Другая строка текста</li>
</ul>

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

• В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
• В этом пункте списка маркер входит в элемент списка и является частью текста

Позицию маркера устанавливает свойство list-style-position. Оно принимает значения:

list-style-position: outside - за пределами элемента (по умолчанию)

list-style-position: inside - внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position:

Стиль:

list-style-position: inside;

HTML код:

<li>Пункт списка, который содержит длинный текст, состоящий более, чем из одной
строки. Марекр может находиться за пределами элемента списка или входить в него 
и быть частью текста</li>

Маркер в виде изображения

В качестве маркера может быть использовано изображение. При этом, список может выглядеть так:

• Первый пункт
• Второй пункт

Для использлвания изображения существует свойство list-style-image. Значением свойства является путь к файлу изображения.

Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите "Сохранить изображение как".

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

Стиль:

#nl3
  {
  list-style-image: url("marker.jpg");
  }

HTML код:

<ul id="nl3">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>

Краткая запись

Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style. В нём перечисляются через пробел сначала тип маркера, затем положение маркера, затем картинка. При этом, все свойства указывать не обязательно. Указываются только те свойства, которые нужны.

Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style.

Стиль:

#nl4
  {
  list-style: lower-greek inside;
  }

HTML код:

<ol id="nl4">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ol>

Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.