Модуль: CSS Селекторы


10. Упражнение - 2. Стилизация списков

Разработайте CSS-стили для неупорядоченного списка задач, чтобы он выглядел аккуратно и современно.
 

Требования к CSS

3.1. Базовые стили списка

  • Селектор: .task-list

    • list-style-type: none; — убирает стандартные маркеры списка (точки или цифры).

    • padding: 0; — убирает внутренние отступы у списка.

3.2. Стилизация элементов списка

  • Селектор: .task-list li (выбора всех элементов <li> (элементов списка), которые находятся внутри элемента с указанным классом (task-list))

    • padding: 10px; — задает внутренние отступы для каждого элемента списка (10px со всех сторон).

    • margin: 5px 0; — задает внешние отступы между элементами списка (5px сверху и снизу).

    • background-color: #f0f0f0; — устанавливает светло-серый фон для элементов списка.

    • border-radius: 5px; — скругляет углы элементов списка на 5px.

    • position: relative; — устанавливает относительное позиционирование для корректного отображения псевдоэлементов.

    • transition: background-color 0.3s ease, color 0.3s ease; — добавляет плавный переход для изменения цвета фона и текста (0.3 секунды).

3.3. Добавление кастомных маркеров

  • Селектор: .task-list li::before

    • content: '✔'; — добавляет символ "✔" перед каждым элементом списка.

    • color: green; — задает зеленый цвет для маркера.

    • margin-right: 10px; — добавляет отступ между маркером и текстом (10px).

    • transition: color 0.3s ease; — добавляет плавный переход для изменения цвета маркера (0.3 секунды).

3.4. Интерактивные эффекты

  • Селектор: .task-list li:hover

    • background-color: #0077ff; — изменяет цвет фона на синий при наведении курсора.

    • color: white; — изменяет цвет текста на белый при наведении курсора.

  • Селектор: .task-list li:hover::before

    • color: white; — изменяет цвет маркера на белый при наведении курсора.

3.5. Стилизация первого и последнего элементов

  • Селектор: .task-list li:first-child

    • background-color: #ffcc00; — устанавливает желтый фон для первого элемента списка.

  • Селектор: .task-list li:last-child

    • color: #ff0000; — устанавливает красный цвет текста для последнего элемента списка.



  
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Список задач</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Мой список задач</h1>
    <ul class="task-list">
        <li>Выучить HTML</li>
        <li>Выучить CSS</li>
        <li>Изучить JavaScript</li>
        <li>Создать свой сайт</li>
        <li>Найти хостинг и показать сайт миру</li>
    </ul>
</body>
</html>

JS

     
Результат проверки программы 
Для проверки решения задачи необходимо зарегистрироваться или авторизоваться!