CSS Списки

Свойства списка CSS позволяют:

Установить различные маркированные пункты для упорядоченных списков
Установить различные маркированные пункты для неупорядоченных списков
Установить изображение в качестве маркера элемента списка

Список

В HTML существуют два типа списков:

неупорядоченные списки - элементы списка помечены кружками
упорядоченные списки - элементы списка помечены номерами или буквами

С помощью CSS, списки могут быть стилизованы дальше, и изображения могут быть использованы в качестве маркера списка.

Различные маркеры списка элементов

Тип маркера пункта списка указывается со свойством list-style-type:

Пример 1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     ul.a { list-style-type:circle; }
     ul.b { list-style-type:square; }
     ol.c { list-style-type:upper-roman; }
     ol.d { list-style-type:lower-alpha; }
</style>

</head>
<body>
<p>Пример неупорядоченного списка:</p>

<ul class="a">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Кока Кола</li>
</ul>

<ul class="b">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Кока Кола</li>
</ul>

<p>Пример упорядоченного списка:</p>

<ol class="c">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Кока Кола</li>
</ol>

<ol class="d">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Кока Кола</li>
</ol>

</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Некоторые значения свойств для неупорядоченных списков, и некоторые для упорядоченных списков.

Значения для неупорядоченных списков

Значение	Описание
none	Без маркера
disc	По умолчанию. Маркер в виде заполненного круга
circle	Маркер круг
square	Маркер квадрат

Значения для упорядоченных списков

Значение	Описание
armenian	Маркер - традиционная армянская нумерация
decimal	Маркер - число
decimal-leading-zero	Маркер число с нулями в начале (01, 02, 03, и так далее)
georgian	Маркер - традиционная грузинская нумерация (an, ban, gan, и так далее)
lower-alpha	Маркер - нижняя-альфа (a, b, c, d, e, и так далее)
lower-greek	Маркер - нижний греческий (alpha, beta, gamma, и так далее)
lower-latin	Маркер - нижний латинский (a, b, c, d, e, и так далее)
lower-roman	Маркер - нижний-римский (i, ii, iii, iv, v, и так далее)
upper-alpha	Маркер - верхняя-альфа (A, B, C, D, E, и так далее)
upper-latin	Маркер - верхний латинский (A, B, C, D, E, и так далее)
upper-roman	Маркер - верхней-римский (I, II, III, IV, V, и так далее)

Примечание: Ни одна версия Internet Explorer (включая IE8) не поддерживает значения свойств "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian", и "georgian"!

Изображение в качестве маркера списка элементов

Чтобы указать изображение в качестве маркера элемента списка, используйте свойство list-style-image:

Пример 2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     ul { list-style-image:url('/images/square.gif'); }
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Приведенный выше пример не отображается в равной степени во всех браузерах. IE и Opera будут отображать изображение-маркер немного выше, чем Firefox, Chrome, и Safari.

Если вы хотите, чтобы изображение-маркер размещалось одинаково во всех браузерах, кросс-браузерное решение объясняется ниже.

Кросс-браузерное решение

Следующий пример отображает изображение-маркер одинаково во всех браузерах:

Пример 3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     ul 
     { 
          list-style-type:none; 
          padding:0px; 
          margin:0px; 
     }
     li
     {
          background-image:url('/images/square.gif');
          background-repeat:no-repeat;
          background-position:0px 5px; 
          padding-left:14px;
     }
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Объяснение примера:

Для ul:
- list-style-type устанавливается в none для удаления маркера
- padding и margin устанавливаются в 0px (для кросс-браузерной совместимости)
Для li:
- Устанавливается URL изображения, и показывается только одинажды (no-repeat)
- Позиция изображения, где вы его хотите (слева 0px и сверху 5px)
- Позиция текста в списке padding-left

Список - Краткая форма записи

Кроме того, можно указать все свойства списка в одном, единственном свойстве. Это называется сокращение свойства.

Краткой формой записи используемой для списков, является свойство list-style:

Пример 4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     ul { list-style:square url("/images/square.gif"); }
</style>

</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>

</ul>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

При использовании сокращенного свойство, порядок значений следующий:

list-style-type
list-style-position (для описания см. таблицу Свойства CSS ниже)
list-style-image

Не имеет значения, если одно из значений выше отсутствует, до тех пор, как остальные находятся в определенном порядке.

Еще примеры

Пример 5

Этот пример демонстрирует все различные элементы списка в CSS.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
     ul.a {list-style-type:disc;}
     ul.b {list-style-type:circle;}
     ul.c {list-style-type:square;}
     ul.d {list-style-type:none;}
     ol.e {list-style-type:decimal;}
     ol.f {list-style-type:decimal-leading-zero;}
     ol.g {list-style-type:lower-roman;}
     ol.h {list-style-type:upper-roman;}
     ol.i {list-style-type:lower-alpha;}
     ol.j {list-style-type:upper-alpha;}
     ol.k {list-style-type:lower-greek;}
     ol.l {list-style-type:lower-latin;}
     ol.m {list-style-type:upper-latin;}
     ol.n {list-style-type:armenian;}
     ol.o {list-style-type:georgian;}
</style>
</head>
<body>
<ul class="a">
<li>Тип - диск</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>

<ul class="b">
<li>Тип - круг</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>

<ul class="c">
<li>Тип - квадрат</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>

<ul class="d">
<li>Пустой тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>

<ol class="e">
<li>Десятичный тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="f">
<li>Десятичный тип с нулем в начале</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="g">
<li>Нижний-римский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="h">
<li>Верхний-римский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="i">
<li>Нижний-альфа тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="j">
<li>Верхний-альфа тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="k">
<li>Нижний-греческий тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="l">
<li>Нижний-латинский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="m">
<li>Верхний-латинский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="n">
<li>Армянский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>

<ol class="o">
<li>Грузинский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
</body>
</html>

Результат выполнения кода выше:

Попробуйте сами

Все свойства списков CSS

Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).

Свойство	Описание	Значения	CSS
list-style	Устанавливает все свойства для списка в одной декларации	list-style-type list-style-position list-style-image inherit	1
list-style-image	Определяет изображение как маркер элемента списка	URL none inherit	1
list-style-position	Указывает, если маркеры элемента списка должны находиться внутри или за пределами содержания	inside outside inherit	1
list-style-type	Задает тип маркера элемента списка	none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit	1

Была ли эта информация полезной?

Да Нет

CSS Списки

Список

Различные маркеры списка элементов

Пример 1

Значения для неупорядоченных списков

Значения для упорядоченных списков

Изображение в качестве маркера списка элементов

Пример 2

Кросс-браузерное решение

Пример 3

Список - Краткая форма записи

Пример 4

Пример 5

Все свойства списков CSS

Комментарии