css властивість 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>) списку відповідаються свої мітки.
Синтаксис
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" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| ≤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;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!