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	Значение элемента наследуется от родительского элемента.