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

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

Маркер списка может быть трех видов: глифы (круг, точка, квадрат), система нумерации и алфавитная система.

Цвет маркера соответствует цвету элемента, к которому он применяется. Можно выбрать цвет здесь.

Значение по умолчанию disc
Применяется К элементам списка.
Наследуется Да
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.listStyleType = "armenian";

Синтаксис

list-style-type: 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 | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul.list-styles{ 
      list-style-type: square;
      }
      ul.list-styles2 {
      list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-type</h2>
    <ul class="list-styles">
      <li>Холодное блюдо</li>
      <li>Основное блюдо</li>
      <li>Салаты</li>
    </ul>
    <ul class="list-styles2">
      <li>Холодные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
  </body>
</html>

Пример с упорядоченным списком:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      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;}
      ol.e {list-style-type: armenian;}
      ol.f {list-style-type: decimal;}
      ol.g {list-style-type: cjk-ideographic;}
      ol.h {list-style-type: decimal-leading-zero;}
      ol.i {list-style-type: georgian;}
      ol.j {list-style-type: hebrew;}
      ol.k {list-style-type: hiragana;}
      ol.l {list-style-type: hiragana-iroha;}
      ol.m {list-style-type: katakana;}
      ol.n {list-style-type: katakana-iroha;}
      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: none;}
      ol.s {list-style-type: upper-alpha;}
      ol.t {list-style-type: upper-latin;}
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-type</h2>
    <p>Примеры маркированных списков:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>Нью-Йорк</li>
      <li>Лас-Вегас</li>
      <li>Вашингтон</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>Сан-Франциско</li>
      <li>Лос-Анджелес</li>
      <li>Майами</li>
    </ul>
    <p>Примеры упорядоченных списков:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Барселона</li>
      <li>Мадрид</li>
      <li>Лондон</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Дубай</li>
      <li>Абу-Даби</li>
      <li>Катар</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Ереван</li>
      <li>Париж</li>
      <li>Рим</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Сидней</li>
      <li>Гонк-Конг</li>
      <li>Москва</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Киев</li>
      <li>Санкт-Петербург</li>
      <li>Тула</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Бангкок</li>
      <li>Гюмри</li>
      <li>Валенсия</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Мадрид</li>
      <li>Барселона</li>
      <li>Прага</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Иерусалим</li>
      <li>Торонто</li>
      <li>Прага</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Каир</li>
      <li>Токио</li>
      <li>Афины</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Тегеран</li>
      <li>Тебриз</li>
      <li>Тель-Авив</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Мюних</li>
      <li>Берлин</li>
      <li>Бавариа</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Брюссель</li>
      <li>Стамбул</li>
      <li>Сидней</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Севилья</li>
      <li>Гранада</li>
      <li>Венеция</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Будапешт</li>
      <li>Виенна</li>
      <li>Амстердам</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Буэнос-Айрес</li>
      <li>Рио-де-Жанейро</li>
      <li>Сан-Паоло</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Вильнюс</li>
      <li>Таллин</li>
      <li>Рига</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Монреаль</li>
      <li>Мельбурн</li>
      <li>Эдинбург</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Дублин</li>
      <li>Мексика</li>
      <li>Флоренция</li>
    </ol>
  </body>
</html>

Значения

Значение Описание
disc Создает маркер в виде заполненного круга. Значение по умолчанию.
armenian Создает традиционную армянскую нумерацию.
circle Создает маркер в виде круга.
cjk-ideographic Создает маркер в виде идеографических цифр.
decimal Создает маркер в виде цифры.
decimal-leading-zero Создает цифры с нулем впереди (01,02,05…).
georgian Создает традиционную грузинскую нумерацию.
hebrew Создает традиционную еврейскую нумерацию.
hiragana Создает традиционную нумерацию хираганы.
hiragana-iroha Создает традиционную нумерацию хираганы ирохи.
katakana Создает традиционную нумерацию катаканы.
katakana-iroha Создает традиционную нумерацию катаканы ирохи.
lower-alpha Создает маркер в виде букв нижнего регистра (a,b,c,d…).
lower-greek Создает маркер в виде строчных греческих букв..
lower-latin Создает маркер в виде строчных латинских букв (a,b,c,d…)..
lower-roman Создает маркер в виде римских цифр нижнего регистра (i,ii,iii,iv…).
none Указывает на отсутствие маркера.
square Создает маркер в виде квадрата.
upper-alpha Создает маркер в виде букв верхнего регистра (A,B,C,D…).
upper-latin Создает маркер в виде латинских букв верхнего регистра (A,B,C,D…).
upper-roman Создает маркер в виде римских цифр верхнего регистра (I,II,III,IV,V…).
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Какие значения может принимать CSS-свойство list-style-type?
Считаете ли это полезным?