CSS list-style-type — маркери списку: диски, числа, літери

Властивість list-style-type визначає вигляд мітки кожного елемента списку.

Властивість list-style-type

Ця властивість працює тільки тоді, коли значення властивості list-style-image встановлено як none (без задання).

Властивість list-style-type можна використовувати в будь-якому елементі списку. Елемент списку - це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.

Ви можете вказати стиль списку стилів як один з попередньо визначених стилів (наприклад, диск, квадрат, римські цифри тощо) або ви можете використовувати свій власний стиль лічильника, створений за допомогою ліцензії правила @counter-style at-rule, а потім посилатися на цей стиль, просто додавши, його ім'я як значення для стилю списку.

Ви також можете вказати рядок як значення (рядок стає маркером) або використовувати функцію symbols().

Колір маркера буде таким самим, як і колір елемента, до якого він застосовується.

автор: NagarD

Загальний опис

автор: NagarD

Нотатка

Маркованому (<ul>) та нумерованому (<ol>) списку відповідаються свої мітки.

автор: NagarD

Синтаксис

list-style-type: value;

Властивість list-style-type може отримувати 22 значень:

disc

Мітка у вигляді заповненого кола. Без задання.

автор: NagarD

armenian

Традиційна армянська нумерація

автор: NagarD

circle

Мітка у вигляді пустого кола.

автор: NagarD

decimal

Арабські числа

автор: NagarD

decimal-leading-zero

Арабські цифри з нулем на початку (01, 02, 03). Нулі буде встановлений для чисел менше 10.

автор: NagarD

georgian

Традиційна грузинська нумерація

автор: NagarD

lower-alpha

Малі латинські літери

автор: NagarD

lower-greek

Малі грецькі літери

автор: NagarD

lower-latin

Малі латинські літери

автор: NagarD

lower-roman

Малі римські літери

автор: NagarD

none

Мітка відсутня.

автор: NagarD

square

Мітка у вигляді квадрату.

автор: NagarD

upper-alpha

Прописні латинські літери.

автор: NagarD

upper-latin

Великі латинські літери

автор: NagarD

upper-roman

Великі римські літери

автор: NagarD

initial

Встановлює властивість у значення без задання

автор: NagarD

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: NagarD

hebrew

Іврит нумерація.

автор: NagarD

hiragana

Хірагана нумерація.

автор: NagarD

hiragana-iroha

Хірагана-іроха нумерація.

автор: NagarD

katakana

Катакана нумерація.

автор: NagarD

katakana-iroha

Катакана-іроха нумерація.

автор: NagarD

Значення без задання: disc (для <ul>); decimal (для <ol>)
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.listStyleType="square"

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3.5 12 4
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
≤4.4 18 4 1

Приклади

+ запропонувати свій приклад у пісочниці

Чотири види маркерів поруч: кільця і квадрати для ненумерованих списків, римські числа й літери — для нумерованих.

HTML

<ul class="circle">
    <li>circle</li>
    <li>кільця</li>
</ul>
<ul class="square">
    <li>square</li>
    <li>квадрати</li>
</ul>
<ol class="upper-roman">
    <li>upper-roman</li>
    <li>римські числа</li>
</ol>
<ol class="lower-alpha">
    <li>lower-alpha</li>
    <li>латинські літери</li>
</ol>

CSS

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

ol.upper-roman {
    list-style-type: upper-roman;
}

ol.lower-alpha {
    list-style-type: lower-alpha;
}
автор: NagarD

Пунктирна рамка показує межі самого списку. Ліворуч маркер того ж кольору, що й текст; посередині його пофарбовано окремо через ::marker; праворуч none — маркер зник, а відступ від padding-left лишився.

HTML

<figure>
    <ul class="plain"><li>перший</li><li>другий</li></ul>
    <figcaption>square</figcaption>
</figure>

<figure>
    <ul class="marked"><li>перший</li><li>другий</li></ul>
    <figcaption>square + ::marker</figcaption>
</figure>

<figure>
    <ul class="none"><li>перший</li><li>другий</li></ul>
    <figcaption>none</figcaption>
</figure>

CSS

figure {
    display: inline-block;
    margin: 0 16px 0 0;
    font: 13px monospace;
    text-align: center;
    vertical-align: top;
}

ul {
    margin: 0;
    border: 1px dashed #999;
    text-align: left;
}

.plain {
    list-style-type: square;
    color: #c0392b;
}

.marked {
    list-style-type: square;
    color: #333;
}

.marked li::marker {
    color: #0172ad;
    font-size: 1.4em;
}

.none {
    list-style-type: none;
}
автор: NagarD

Значення у дії

HTML

<p>Вибери потрібне значення для <code>list-style-type</code>:</p>

<select id="form">
  <option>none</option>
  <option>inherit</option>
  <optgroup label="Рядок">
    <option>"Елемент..."</option>
    <option>"Пункт ->"</option>
  </optgroup>
  <optgroup label="Символи">
    <option>disc</option>
    <option>circle</option>
    <option>square</option>
    <option>disclosure-open</option>
    <option>disclosure-closed</option>
  </optgroup>
  <optgroup label="Алфавіт">
    <option>lower-alpha</option>
    <option>lower-latin</option>
    <option>upper-alpha</option>
    <option>upper-latin</option>
    <option>cjk-earthly-branch</option>
    <option>cjk-heavenly-stem</option>
    <option>lower-greek</option>
    <option>hiragana</option>
    <option>hiragana-iroha</option>
    <option>katakana</option>
    <option>katakana-iroha</option>
  </optgroup>
  <optgroup label="Числа">
    <option>decimal</option>
    <option>decimal-leading-zero</option>
    <option>arabic-indic</option>
    <option>armenian</option>
    <option>upper-armenian</option>
    <option>lower-armenian</option>
    <option>bengali</option>
    <option>cambodian</option>
    <option>khmer</option>
    <option>cjk-decimal</option>
    <option>devanagari</option>
    <option>georgian</option>
    <option>gujarati</option>
    <option>gurmukhi</option>
    <option>hebrew</option>
    <option>kannada</option>
    <option>lao</option>
    <option>malayalam</option>
    <option>mongolian</option>
    <option>myanmar</option>
    <option>oriya</option>
    <option>persian</option>
    <option>lower-roman</option>
    <option>upper-roman</option>
    <option>tamil</option>
    <option>telugu</option>
    <option>thai</option>
    <option>tibetan</option>
  </optgroup>
</select>

<p id="text"></p>

<hr>

<ul id="block">
  <li>Це елемент один</li>
  <li>Це елемент два</li>
  <li>Це елемент три</li>
</ul>

CSS

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  padding: 56px 0 0 150px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

JS

var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function change() {

  var newVal = getNewValue();
  block.style.listStyleType = newVal;

};

function getNewValue() {

  var result = '';

  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }window.CP.exitedLoop(0);

  return result;

}
//# sourceURL=pen.js
автор: NagarD

Приклад використання

HTML

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

CSS

ul:nth-of-type(1) {
  list-style-type: disc;
}

ul:nth-of-type(2) {
  list-style-type: circle;
}

ul:nth-of-type(3) {
  list-style-type: square;
}

ul:nth-of-type(4) {
  list-style-type: decimal;
}

ul:nth-of-type(5) {
  list-style-type: decimal-leading-zero;
}

ul:nth-of-type(6) {
  list-style-type: lower-roman;
}

ul:nth-of-type(7) {
  list-style-type: upper-roman;
}

ul:nth-of-type(8) {
  list-style-type: lower-greek;
}

ul:nth-of-type(9) {
  list-style-type: lower-latin;
}

ul:nth-of-type(10) {
  list-style-type: upper-latin;
}

ul:nth-of-type(11) {
  list-style-type: armenian;
}

ul:nth-of-type(12) {
  list-style-type: georgian;
}

ul:nth-of-type(13) {
  list-style-type: lower-alpha;
}

ul:nth-of-type(14) {
  list-style-type: upper-alpha;
}

ul:nth-of-type(15) {
  list-style-type: none;
}
ul{
  display: inline-block;
}
li{
  font-size: 18px;
}
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід