Активные стили

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 10 из 43.

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

Например:

<button class="action-button">Click Me!</button>

Добавьте CSS, чтобы стилизовать кнопку, когда она активна:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

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

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Напишите CSS для класса .special-link, который добавляет следующие стили, когда ссылка активна:

Изменяет цвет текста на #e74c3c
Добавляет тень текста 1px 1px 2px rgba(0,0,0,0.3)

Шпаргалка

Псевдокласс :active применяет стили к элементу, когда он активируется пользователем, обычно при нажатии и удержании кнопки мыши.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Это обеспечивает визуальную обратную связь, подтверждающую, что действие пользователя регистрируется.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.