Списки в 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>

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