Типы списков

1. Числа

Для перечисления элементов списка числами можно использовать свойство list-style: decimal (задаётся по умолчанию для списка <ol>).

ol {
    list-style: decimal;
}

Результат:

  1. HTML
  2. CSS
  3. JavaScript

2. Римские числа

Для перечисления элементов списка римскими цифрами можно использовать свойство list-style: upper-roman.

ol {
    list-style: upper-roman;
}

Результат:

  1. HTML
  2. CSS
  3. JavaScript

3. Буквы

Для перечисления элементов списка буквами можно использовать свойства list-style: lower-alpha.

ol {
    list-style: lower-alpha;
}

Результат:

  1. HTML
  2. CSS
  3. JavaScript

Также можно использовать заглавные буквы через свойство list-style: upper-alpha.

ol {
    list-style: upper-alpha;
}

Результат:

  1. HTML
  2. CSS
  3. JavaScript

4. Маркеры

Для вывода маркированного списка можно использовать свойство list-style: disc (задаётся по умолчанию для списка <ul>).

ul {
    list-style: disc;
}

Результат:

  • HTML
  • CSS
  • JavaScript

5. Квадраты

Для перечисления элементов списка квадратиками можно использовать свойство list-style: square.

ul {
    list-style: square;
}

Результат:

  • HTML
  • CSS
  • JavaScript

6. Без маркеров

Для вывода списка без маркеров и перечислений можно через свойство list-style: none.

ol {
    list-style: none;
}

Результат:

  1. HTML
  2. CSS
  3. JavaScript

7. Пользовательский маркер

Для вывода списка с пользовательским маркером можно убрав текущий маркер и задав его через свойство background.

ul li {
    list-style-image: url(/img/li.png);
}

Результат:

  • HTML
  • CSS
  • JavaScript