CSS приклад: list-style-type

Коротка інформація

Тег <li> визначає вигляд маркера для кожного елемента списку.

Синтаксис

list-style-type: circle | disc | square | armenian | decimal | ...

Значення

Залежать від типу списку: маркованого або нумерованого.

Маркований список

circle
Маркер - кружок.
disc
Маркер - крапка.
square
Маркер - квадрат.

Нумерований список

armenian
Армянська нумерація.
decimal
Арабські числа (1, 2, 3, ...).
decimal-leading-zero
Арабські числа зі нулем спереду для цифр менше десяти (01, 02, 03, ...).
...

Приклад

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetuer adipiscing elit</li>
  <li>Sed diem nonummy nibh euismod</li>
  <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.</li>
</ol>

Об'єктна модель

[window.]document.getElementById("elementID").style.listStyleType

Браузери

У браузері Internet Explorer 6 при використанні нумерованого списку та значення inside властивості list-style-position, числа з 10 починають накладатися на текст списку.

Internet Explorer до версії 7.0 не підтримує деякі значення, виводячи арабські числа замість них.

Internet Explorer 8 додатково розуміє значення upper-greek, що встановлює нумерацію у вигляді заголовних грецьких літер (Α, Β, Γ, Δ, ...).

Часті запитання

  • Q: Як використовувати list-style-type в CSS?

    A: list-style-type в CSS використовується для задання стилю маркерів списку, таких як крапки, цифри, літери тощо.

  • Q: Як встановити круглі маркери списку в CSS?

    A: Для встановлення круглих маркерів списку в CSS використовують значення 'disc' для властивості list-style-type.

  • Q: Де використовують list-style-type в CSS?

    A: list-style-type використовують для стилізації маркерів списку в HTML-елементах, таких як <ul> (ненумерований список) та <ol> (нумерований список).

  • Q: Як змінити маркери списку на квадратні в CSS?

    A: Для зміни маркерів списку на квадратні в CSS використовують значення 'square' для властивості list-style-type.

  • Q: Чи можна стилізувати маркери списку так, щоб вони були зображеннями?

    A: Так, можна стилізувати маркери списку в CSS, використовуючи зображення замість стандартних маркерів. Для цього використовують властивість list-style-image.