Управление списками и маркерами в CSS

Управление списками и маркерами в CSS позволяет вам изменять стили и внешний вид маркеров (буллетов) в списках. Вот как это делается:

1. Изменение типа маркера:

Свойство list-style-type позволяет вам изменить тип маркера для упорядоченных и неупорядоченных списков.

Пример изменения типа маркера для неупорядоченного списка (маркированного):

ul {
    list-style-type: square; /* Заменяет маркеры на квадраты */
}

Пример изменения типа маркера для упорядоченного списка (нумерованного):

ol {
    list-style-type: upper-roman; /* Заменяет нумерацию на римские цифры в верхнем регистре */
}

2. Пользовательские изображения в качестве маркеров:

Свойство list-style-image позволяет вам использовать пользовательские изображения в качестве маркеров для списков.

Пример использования изображения в качестве маркера:

ul {
    list-style-image: url('custom-bullet.png'); /* Использует изображение в качестве маркера */
}

3. Удаление маркеров:

Иногда вам может потребоваться удалить маркеры из списка. Для этого используется свойство list-style-type с значением none.

Пример удаления маркеров из списка:

ul {
    list-style-type: none; /* Удаляет маркеры из неупорядоченного списка */
}

4. Пользовательские изображения вместо маркеров упорядоченных списков:

Также вы можете использовать пользовательские изображения вместо чисел или букв в упорядоченных списках.

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

ol {
    list-style-type: none; /* Удаляет встроенную нумерацию */
}

ol li {
    counter-increment: custom-counter; /* Увеличивает счетчик для каждого элемента */
}

ol li::before {
    content: counter(custom-counter) ". "; /* Отображает значение счетчика перед элементом */
}

В этом примере, упорядоченный список не имеет встроенной нумерации, но использует пользовательский счетчик и отображает его значение перед каждым элементом.

Эти методы позволяют вам полностью контролировать стили и внешний вид маркеров в ваших списках, что может быть полезным для создания уникального дизайна веб-страницы.