css властивість list-style

Властивість list-style — універсальна властивість і дозволяє одночасно задати значення для наступних властивостуй:

• list-style-type
• list-style-position
• list-style-image

Значення, між собою, розділяються пропуском та повинні слідувати в зазначеному порядку:

1. тип списку
2. положення маркера
3. картинка маркера

Ця властивість застосовується до елементів списку, тобто елементів із display: list-item;. За умовчанням це включає в себе елементи. Оскільки ця властивість успадковується, її можна встановити на батьківський елемент (зазвичай <ol> або <ul>), щоб створити такий же стиль списку, що застосовується до всіх елементів всередині.

правити

Нотатка

Жодне з значень не є обов'язковим, тому невикористовувані дозволено опустити.

автор: Svitlana правити

Нотатка

Якщо одне із зазначених значень відсутнє, наприклад, list-style:circle inside;, замість нього буде встановлено його значення за замовчуванням.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

list-style: list-style-type list-style-position list-style-image|initial|inherit;

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

list-style-type

Визначає тип елемента списку.

автор: Svitlana

правити

list-style-position

Визначає позицію мітки списку.

автор: Svitlana

правити

list-style-image

Визначає зображення для мітки списку.

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
list-style	1.0	1.0	1.0	7.0	12.0	4.0

Підтримка: мобільні переглядачі

Переглядач
list-style	1.0	1.0	1.0

Приклади

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

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

ul {
    list-style: square url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23803ab3'/%3E%3C/svg%3E");
}