Пример
Устанавливает несколько различных стилей списка:
<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>
Определение и использование
Свойство list-style-type определяет тип маркера элемента списка.
| Значение по умолчанию: | disc |
|---|---|
| Унаследованный: | да |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.listStyleType="square" |
Поддержка браузеров
Свойство list-style-type поддерживается во всех ведущих браузерах.
Примечание: IE9 и Opera 11 не поддерживают: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, и katakana-iroha.
Примечание: IE8, и более ранние поддерживают только значения свойства: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, и inherit если указан DOCTYPE!
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| armenian | Маркер - традиционная армянская нумерация | Играйте » |
| circle | Маркер круг | Играйте » |
| cjk-ideographic | Маркер - простые идеографические номера | Играйте » |
| decimal | Маркер - число. Это по умолчанию для <ol> | Играйте » |
| decimal-leading-zero | Маркер число с нулями в начале (01, 02, 03, и так далее) | Играйте » |
| disc | Маркер в виде заполненного круга. Это по умолчанию для <ul> | Играйте » |
| georgian | Маркер - традиционная грузинская нумерация (an, ban, gan, и так далее) | Играйте » |
| hebrew | Маркер - традиционная ивритская нумерация | Играйте » |
| hiragana | Маркер - традиционная нумерация Хирагана | Играйте » |
| hiragana-iroha | Маркер - традиционная нумерация Хирагана Ироха | Играйте » |
| inherit | Значение свойства listStyleType является унаследованным от родительского элемента | |
| katakana | Маркер - традиционная нумерация Катакана | Играйте » |
| katakana-iroha | Маркер - традиционная нумерация Катакана Ироха | Играйте » |
| 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, и так далее) | Играйте » |
| none | Без маркера | Играйте » |
| square | Маркер квадрат | Играйте » |
| upper-alpha | Маркер - верхняя-альфа (A, B, C, D, E, и так далее) | Играйте » |
| upper-latin | Маркер - верхний латинский (A, B, C, D, E, и так далее) | Играйте » |
| upper-roman | Маркер - нижний-римский (i, ii, iii, iv, v, и так далее) | Играйте » |
Больше примеров
Пример
Этот пример демонстрирует все различные элемента списка в CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katagana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</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>
<ol class="d">
<li>Армянский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="e">
<li>Cjk-идеографический тип</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>
<ol class="p">
<li>Нижний латинский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="q">
<li>Нижний-римский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="r">
<li>Тип верхняя-альфа</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="s">
<li>Верхний латинский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="t">
<li>Верхний римский тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="u">
<li>Без типа</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
<ol class="v">
<li>Унаследованный тип</li>
<li>Чай</li>
<li>Кока Кола</li>
</ol>
</body>
</html>
Была ли эта информация полезной?
