Как настроить номера упорядоченного списка с помощью CSS?

10 лучших проектов для начинающих по отработке навыков HTML и CSS Программирование и разработка

В этой статье мы узнаем, как настроить (украсить) числа в упорядоченном списке. Мы используем свойство counter-increment для украшения чисел.

Подход: сложно добавить стили CSS к элементам <ol> напрямую, чтобы настроить числа. Вместо этого мы получаем доступ к диапазону упорядоченного списка и устанавливаем для стиля списка CSS значение «none», чтобы обычный порядок был невидим. Зная диапазон, мы устанавливаем свойство counter-increment, чтобы упорядочить список, и добавляем свойства CSS для стилизации чисел с использованием других свойств CSS.

В приведенном ниже примере демонстрируется описанный выше подход.

Пример 1. В этом примере мы изменим цвет чисел, используя свойства counter-increment и counter-reset. В этом примере увеличиваются числа от 1 до 4, а цвет устанавливается на «зеленый». Мы можем стилизовать числа в соответствии с нашими требованиями, добавив свойства CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Customize numbers in ordered list</title>
    <style>
        ol {
            list-style: none;
            counter-reset: num;
        }
 
        ol li {
            counter-increment: num;
        }
 
        ol li::before {
            content: counter(num) ". ";
            color: green;
        }
    </style>
</head>
 
<body>
    <ol>
        <li>GeeksforGeeks</li>
        <li>Computer Science</li>
        <li>CSS</li>
        <li>HTML</li>
    </ol>
</body>
 
</html>

Выход:

В этом примере мы изменим цвет чисел, используя свойства counter-increment

Пример 2. В этом примере мы использовали тот же подход, добавляя еще несколько свойств стиля в тот же HTML-файл.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Customizing numbers in ordered list</title>
    <style>
        ol {
            list-style: none;
            counter-reset: num;
        }
 
        ol li {
            counter-increment: num;
            font-size: 20px;
        }
 
        ol li::before {
            content: "0" counter(num);
            font-weight: bold;
            color: green;
            font-family: 'Segoe UI', Tahoma, Geneva, 
                  Verdana, sans-serif;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <ol>
        <li>GeeksforGeeks</li>
        <li>Computer Science</li>
        <li>CSS</li>
        <li>HTML</li>
    </ol>
</body>
 
</html>

Выход:

Читайте также:  Java Stream filter

В этом примере мы использовали тот же подход, добавляя еще несколько

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector