---

Умный список задач и продвинутое меню
Цель:
•На практике применить :hover, :focus, :nth-child(), :not(), :first-child, :last-child и :checked.
 
У вас есть список ul / li
1.Задание А — :hover
•Сделайте так, чтобы при наведении на <li> у него менялся фон на #f0f0f0, а текст становился полужирным.
2.Задание B — :nth-child()
•Каждому чётному <li> задайте светлый фон #f9f9f9.
•Третьему <li> добавьте рамку 2px dotted orange (сделайте отступ, чтобы рамка была видна).

задание

 
Умный список задач и продвинутое меню
Цель:
•На практике применить :hover, :focus, :nth-child(), :not(), :first-child, :last-child и :checked.
 
У вас есть список ul / li
1.Задание C — :first-child и :last-child
•Первому <li> дайте зелёную точку слева (например, border-left: 5px solid green).
•Последнему <li> — синюю точку (border-left: 5px solid blue).

задание

 
Умный список задач и продвинутое меню
1.Задание E — дочерние псевдоклассы для меню
•Для блока .nav-menu:
•:first-child — у первой ссылки уберите margin-left (сделайте прижатую к левому краю).
•:last-child — у последней ссылки уберите border-right.
•:hover — при наведении на ссылку цвет текста #e67e22 и подчёркивание.
•:focus — когда по меню ходят Tab (клавиатура), добавьте жёлтую обводку outline: 3px solid gold и увеличьте z-index.

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
Что должно быть на странице (HTML):
•Заголовки и текст: Имя персонажа, его история
•Изображение (<figure> + <figcaption>): Портрет героя с красивой подписью
•Списки: Характеристики (сила, ловкость, навыки)
•Таблица: Сравнение сил, боевая статистика
•<details>: «Скрытые спойлеры» или биография, которая раскрывается по клику
•Ссылки: На официальный сайт или трейлер, или чет еще
 
Задание по CSS (Что нужно стилизовать):
•Цветовая гамма: Задать фоновый цвет для всей страницы (body) и цвет текста, соответствующий атмосфере
•Работа с текстом: Изменить шрифты (пока стандартные, например, Arial, Georgia), настроить text-align для заголовков, сделать line-height для читаемости
•Стилизация таблиц и списков: Убрать стандартные маркеры у списков (по желанию), раскрасить строки таблицы через классы
 
•Стилизация <details> и <summary>: Изменить цвет плашки, добавить рамку (border) и внутренний отступ (padding), чтобы это выглядело как интерактивная кнопка.
   Идентификатор (ID): Использовать ID для какого-то уникального элемента (например, главного заголовка #main-title или подвала страницы #footer).

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
•Стилизация <details> и <summary>: Изменить цвет плашки, добавить рамку (border) и внутренний отступ (padding), чтобы это выглядело как интерактивная кнопка.
•Назначать стили следует с помощью классов, чтобы постоянно применять их к различым элементам страницы
 
Чтобы страница не выглядела статичной, добавьте в требования использование псевдоклассов:
•:hover (наведение): Сделайте так, чтобы ссылки меняли цвет или подчеркивание при наведении, а плашка <summary> или кнопки слегка меняли фон, показывая, что на них можно кликнуть.
•:active (клик): Добавьте эффект «нажатия» для <summary> (например, небольшое смещение или затемнение цвета).
•:nth-child(even) или :nth-child(odd): Автоматически раскрасьте четные или нечетные строки в таблице статистики, чтобы она легче читалась.

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
Подсказка по CSS:
•font-family: Georgia, serif; — меняет шрифт. Для атмосферы фэнтези отлично подойдут Georgia или Times New Roman, для сай-фай или современных героев — Arial, Helvetica или sans-serif.
 
•font-size: 24px; — размер текста. Заголовкам (h1, h2) делайте побольше, обычному тексту — в районе 16px-18px.
 
•font-weight: bold; (или normal) — насыщенность (жирность) шрифта.
 
•line-height: 1.6; — межстрочный интервал. Сделайте его больше 1.2, чтобы длинные абзацы текста/биографии было удобно читать.
 
•text-transform: uppercase; — делает все буквы заглавными (круто смотрится в заголовках таблиц или для имени персонажа).

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
Подсказка по CSS:
•text-align: center; — выравнивает текст, заголовки и ссылки внутри блока по центру. Важно: на саму картинку это свойство не подействует, только на текст!
 
•margin: 0 auto; — классический способ отцентрировать блочный элемент (например, саму таблицу, блок <details> или картинку, если ей задана ширина).
 
 

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
Подсказка по CSS:
•background-color: #1a1a1a; — цвет фона
 
•color: #ffffff; — цвет самого текста.
 
•padding: 15px; — внутренний отступ (чтобы текст не прилипал к краям рамки или плашки <details>).
 
•margin-bottom: 20px; — внешний отступ снизу (чтобы разделять абзацы, списки и таблицы между собой).
 
•border: 2px solid #ffcc00; — рамка (толщина, тип линии, цвет). Отлично подойдет для выделения портрета героя или таблицы.
 
•border-radius: 8px; — скругление углов у рамок, картинок или плашек.
 

задание

 
«Визитка персонажа» (Игры/Кино/Аниме)
Подсказка по CSS:
•list-style-type: none; — убирает стандартные точки (маркеры) у списков <ul>.
 
•border-collapse: collapse; — обязательное свойство для таблицы (<table>), чтобы убрать двойные рамки между ячейками и сделать их аккуратными. CSS diner