W3Docs

Тема

Русский

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

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

Маркер списка может иметь три типа: глифы (circle, disc, square), системы нумерации и алфавитные системы.

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

Только элементы <li> и <summary> имеют значение "list-item" свойства display. Мы можем применить свойство list-style-type к любому элементу, для которого display установлен в list-item. Это свойство можно задать для родительского элемента (обычно <ol> или <ul>).

Initial Valuedisc
Applies toList items.
InheritedYes.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.listStyleType = "armenian";

Синтаксис ​

Синтаксис свойства CSS list-style-type

css
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;

Пример свойства list-style-type: ​

Пример свойства CSS list-style-type со значениями square и hebrew

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Try it Yourself »

Результат ​

CSS list-style-type Property

Пример свойства list-style-type со значением "disc": ​

Пример свойства list-style-type со значением "disc":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Пример свойства list-style-type со значением "decimal": ​

Пример свойства list-style-type со значением "decimal":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Пример свойства list-style-type для упорядоченных списков: ​

Пример свойства CSS list-style-type со значениями circle,square,upper-roman,lower-alpha,armenian,decimal,cjk-ideographic,georgian, upper-alpha и другими значениями

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>
Try it Yourself »

Значения ​

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

Практика ​

Что указывает свойство list-style-type в CSS?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.