CSS свойство list-style-type

CSS свойства

Определение и применение

CSS свойство list-style-type указывает тип маркера элемента списка.

Поддержка браузерами

.
СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
list-style-type1.01.03.51.04.0*12.0
* Значения hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha не поддерживаются Internet Explorer.

CSS синтаксис:

list-style-type:"none | disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-alpha | upper-latin | upper-roman | initial | inherit";

JavaScript синтаксис:

object.style.listStyleType = "katakana"

Значения свойства

Для маркированных (неупорядоченных) списков (элемент <ul>) предусмотрено три типа маркеров: в форме закрашенного кружка (disc по умолчанию), маркер в форме полого круга (сircle) и в форме квадрата (square), а для нумерованных (упорядоченных) списков (элемент <ol>) все оставшиеся. Полный перечень размещен в следующей таблице:

ЗначениеОписание
none
  • Элемент списка
  • Элемент списка
  • Элемент списка
Маркер не отображается.
disc
  • Элемент списка
  • Элемент списка
  • Элемент списка
Маркер в форме закрашенного кружка. Это значение по умолчанию.
armenian
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (традиционная Армянская нумерация).
circle
  • Элемент списка
  • Элемент списка
  • Элемент списка
Маркер в форме полого круга.
cjk-ideographic
  • Элемент списка
  • Элемент списка
  • Элемент списка
Простые идеографические числа.
decimal
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (десятеричные арабские числа, начинающихся с 1).
decimal-leading-zero
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (десятеричные арабские числа, начинающихся с 1 и дополненные начальным нулем - 01, 02, 03...).
georgian
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (традиционная Грузинская нумерация - an, ban, gan, ..., he, tan, in, in-an...).
hebrew
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (традиционная Еврейская нумерация.).
hiragana
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (японская слоговая азбука Хирагана - a, i, u, e, o, ka, ki...).
hiragana-iroha
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (японская слоговая азбука Хирагана ироха - i, ro, ha, ni, ho, he, to, ...).
katakana
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (японская слоговая азбука Катакана - A, I, U, E, O, KA, KI, ...).
katakana-iroha
  • Элемент списка
  • Элемент списка
  • Элемент списка
Числовой маркер (японская слоговая азбука Катакана ироха - I, RO, HA, NI, HO, HE, TO, ...).
lower-alpha
  • Элемент списка
  • Элемент списка
  • Элемент списка
Буквы ascii нижнего регистра (a, b, c, d...z).
lower-greek
  • Элемент списка
  • Элемент списка
  • Элемент списка
Строчные греческие буквы (α, β, γ, δ, и т.д.).
lower-latin
  • Элемент списка
  • Элемент списка
  • Элемент списка
Строчные латинские буквы (a, b, c, d,...z).
lower-roman
  • Элемент списка
  • Элемент списка
  • Элемент списка
Римские числа в нижнем регистре (i, ii, iii, iv, v и т.д.).
square
  • Элемент списка
  • Элемент списка
  • Элемент списка
Маркер в форме квадрата.
upper-alpha
  • Элемент списка
  • Элемент списка
  • Элемент списка
Буквы ascii верхнего регистра (A, B, C, D,...Z).
upper-latin
  • Элемент списка
  • Элемент списка
  • Элемент списка
Заглавные латинские буквы (A, B, C, D,...Z).
upper-roman
  • Элемент списка
  • Элемент списка
  • Элемент списка
Римские цифры в верхнем регистре (I, II, III, IV, V и т.д.).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style-type.</title>
<style> 
.test {
list-style-type : lower-roman; /* устанавливаем тип маркера - римские числа в нижнем регистре  */
color : orange; /* обратите внимание, что текст цвета соответствует цвету маркера */
}
.test2 {
list-style-type : circle; /* устанавливаем тип маркера в форме круга */
color : IndianRed; /* обратите внимание, что текст цвета соответствует цвету маркера */
}
</style>
</head>
	<body>
		<ul> /* список со значением типа маркера по умолчанию (disc).  */
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ol class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ol>
		<ul class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>
Пример использования CSS свойства list-style-type (установка типа маркера).
Пример использования CSS свойства list-style-type (установка типа маркера).
CSS свойства