|
Добро пожаловать,
Гость
|
ТЕМА:
Начальное руководство по HTML/CSS/JS. Создаём кликер на HTML. Часть шестая. 2 года 5 мес. назад #27
|
Продолжаем создавать свой мини-кликер с помощью HTML, CSS и JavaScript!
В этой статье мы снова немного разукрасим сам кликер и познакомимся с новыми функциями CSS. Предыдущая (пятая) часть. Кажется, стоит добавить нашей странице какой-нибудь фон, чтобы всё выглядело красочнее. Зайдем в наш файл style.css и добавим новый стиль для body, ведь <body> — это вся страница. Снова напоминаю, что в селекторах нужно ставить точку перед классами (.class), решетку перед id (#id), а перед тегами ничего не ставить. body {
background-color: #ffda99;
}Теперь страничка выглядит так: 
Теперь, я думаю, выглядит интереснее. Вы можете сами экспериментировать с цветами. Итак, попробуйте сейчас навести и нажать на кнопку. Ничего не происходит, цвет кнопки не меняется. Что, если мы хотим добавить, например, изменение цвета при наведении на кнопку? Для этого существуют псевдоклассы :hover (при наведении), :active (при зажатии) и т.д. Как их использовать? Добавим ещё один стиль для кнопки .clicker-button, и в конце селектора добавим :hover .clicker-button:hover {
}.clicker-button:hover {
background-color: #ffd66d;
}Готово! Теперь при наведении кнопка будет менять свой цвет фона (с помощью стиля background-color). Теперь попробуем снова изменить фон, только для зажатия кнопки. Для этого используется псевдокласс :active. .clicker-button:active {
background-color: #ffcd38;
} Продолжение следует... |
|
|
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе. |
Copyright © vlad. 2022
