Добро пожаловать на четвёртый курс! На первых трёх курсах вы научились размечать страницы, оформлять их, строить гибкие макеты на Flexbox и двумерные сетки на Grid, а затем делать всё это адаптивным. Ваши страницы уже выглядят аккуратно и профессионально — но пока они статичны. Пора вдохнуть в них жизнь: научить интерфейс реагировать на действия пользователя, плавно менять вид и красиво двигаться. Этот курс посвящён «живому» CSS — псевдоклассам и псевдоэлементам, переходам и анимациям, а также современным возможностям CSS: переменным, эффектам и темам оформления.

Курс, как и прежде, строится вокруг сквозного проекта: мы продолжим наш сайт компании и добавим ему динамику. Кнопки начнут откликаться на наведение, ссылки — подсвечиваться, элементы — плавно появляться и двигаться, а в конце мы сделаем полноценную тёмную тему. Каждый урок добавляет к проекту новую живую деталь. Начнём с самого основного и заметного — реакции элементов на действия пользователя.

Зачем это нужно

Когда вы наводите курсор на кнопку и она меняет цвет, или переходите по форме клавишей Tab и поле подсвечивается рамкой — это не магия, а псевдоклассы состояний. Они позволяют задать элементу особый вид в зависимости от того, что с ним делает пользователь: навёл мышь, поставил фокус, нажал. Без такой обратной связи интерфейс кажется мёртвым: непонятно, кликабельна ли кнопка, куда сейчас направлен ввод, реагирует ли страница вообще.

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

Что уже умеем / что добавим

Вы умеете строить адаптивные макеты на Grid и Flexbox и оформлять элементы через классы. Теперь добавим к оформлению новое измерение — состояние элемента. Мы научимся стилизовать не просто «кнопку», а «кнопку, на которую навели мышь» или «поле в фокусе». В сквозном проекте мы оживим кнопки и ссылки сайта компании: они начнут откликаться на наведение и фокус.

Что вы узнаете в рамках статьи

• Что такое псевдокласс и как он записывается в CSS.
• Как менять вид элемента при наведении мышью через :hover.
• Как показывать фокус на элементах с помощью :focus и :focus-visible.
• Как оформлять момент нажатия через :active.
• Почему убирать видимый фокус — плохая идея для доступности.

Ключевые термины

• Псевдокласс — ключевое слово после селектора (через двоеточие), задающее стиль для особого состояния элемента.
• :hover — состояние «на элемент наведён указатель мыши».
• :focus — состояние «элемент получил фокус ввода».
• :focus-visible — фокус, который браузер считает нужным показать (обычно при навигации с клавиатуры).
• :active — состояние «элемент в момент нажатия».
• Фокус — указание на элемент, который сейчас принимает ввод с клавиатуры.

Что такое псевдокласс

Псевдокласс — это добавка к селектору, которая уточняет: стилизуем элемент не всегда, а только в особом состоянии. Записывается он через двоеточие сразу после селектора, без пробела. Например, .btn — это «все кнопки», а .btn:hover — «кнопка, на которую сейчас наведена мышь».

.btn {
  background: #2d6cdf;
  color: white;
}

.btn:hover {
  background: #1e4fa3;
}

Обычное правило .btn задаёт вид кнопки по умолчанию, а .btn:hover — вид в момент наведения. Как только курсор уходит с кнопки, состояние :hover пропадает и возвращается обычный стиль. Важно, что псевдокласс не требует ничего добавлять в HTML: браузер сам отслеживает состояние и применяет нужное правило. Это делает интерфейс отзывчивым буквально парой строк CSS.

Реакция на мышь: :hover

:hover срабатывает, когда указатель находится над элементом. Это самый заметный способ показать, что элемент интерактивен. Наводя мышь, пользователь ожидает отклика — изменения цвета, тени, лёгкого сдвига:

.card {
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

При наведении на карточку тень станет глубже — появится ощущение, что карточка чуть «приподнялась». Обычная область применения :hover — кнопки, ссылки, карточки, пункты меню. Учтите: на сенсорных экранах наведения нет, палец сразу нажимает. Поэтому :hover — это приятное усиление для мыши, но никогда не единственный способ донести важную информацию: то, без чего нельзя обойтись, должно быть видно и без наведения.

Фокус: :focus и :focus-visible

Фокус — это элемент, который сейчас принимает ввод с клавиатуры. Когда вы кликаете в поле или переходите по странице клавишей Tab, фокус перемещается, и псевдокласс :focus позволяет этот элемент подсветить:

.input:focus {
  outline: 2px solid #2d6cdf;
  outline-offset: 2px;
}

Поле в фокусе получит заметную рамку — пользователь клавиатуры всегда видит, где он находится. Но у :focus есть нюанс: он срабатывает и при клике мышью, из-за чего рамка иногда появляется там, где мышиному пользователю она не нужна. Для этого придумали :focus-visible — он показывает фокус только когда браузер считает это уместным, чаще всего при навигации с клавиатуры:

.btn:focus-visible {
  outline: 2px solid #2d6cdf;
  outline-offset: 2px;
}

Так рамка появляется у тех, кто ходит по странице с клавиатуры, и не мешает тем, кто кликает мышью. Это современный и рекомендованный способ оформления фокуса.

Нажатие: :active

:active действует в тот короткий момент, пока элемент нажат: между нажатием кнопки мыши и её отпусканием. Это способ дать тактильный отклик — показать, что нажатие «поймано»:

.btn:active {
  transform: translateY(1px);
}

В момент нажатия кнопка чуть сместится вниз, будто её вдавили. Эффект длится доли секунды, но делает интерфейс живым и «физичным». Порядок записи псевдоклассов имеет значение: если задаёте и :hover, и :active для ссылок, пишите их в порядке hover, затем active, иначе более позднее правило может перекрыть нужное.

Применяем в проекте

Оживим сайт компании. Дадим главной кнопке отклик на наведение и нажатие, а ссылкам и полям — понятный фокус. Так интерфейс станет отзывчивым и удобным для всех — и мыши, и клавиатуры.

.btn {
  background: #2d6cdf;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
}

.btn:hover {
  background: #1e4fa3;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid #1e4fa3;
  outline-offset: 3px;
}

Откройте страницу и наведите мышь на кнопку: она потемнеет. Нажмите — слегка вдавится. А теперь пройдите по странице клавишей Tab: кнопка получит аккуратную рамку фокуса. Мы не добавили ни строчки в HTML — только описали состояния в CSS, и статичная кнопка стала живой и доступной. Тот же приём применим к ссылкам меню и полям формы.

Частые ошибки

• Убрать фокус совсем.
  Запись outline: none без замены делает сайт непроходимым с клавиатуры; всегда оставляйте видимый фокус, лучше через :focus-visible.
• Полагаться только на :hover.
  На сенсорных экранах наведения нет; важную информацию нельзя прятать за наведением.
• Пробел перед двоеточием.
  .btn :hover (с пробелом) означает совсем другое — потомка кнопки; правильно писать слитно .btn:hover.
• Неверный порядок псевдоклассов.
  Для ссылок соблюдайте порядок hover перед active, иначе один стиль перекроет другой.

Итоги

Поздравляем с началом четвёртого курса и первым шагом к живому интерфейсу! Вы узнали, что такое псевдоклассы состояний, и научились управлять видом элемента в зависимости от действий пользователя: подсвечивать кнопки при наведении через :hover, показывать фокус с помощью :focus и современного :focus-visible, отзываться на нажатие через :active. Вы уже оживили кнопку на сайте компании — и заодно сделали её удобнее для тех, кто пользуется клавиатурой.

Отличное начало — интерфейс перестал быть статичным! В следующем уроке мы разберём структурные псевдоклассы :nth-child, :first-child, :last-child и :not(), которые позволяют выбирать элементы по их месту в списке — без единого лишнего класса в разметке.