Загрузка...

Ссылки в CSS

Ссылки — путь людей по вашим страницам. В CSS вы стилизуете элемент a и его состояния — непосещённая, посещённая, наведение и активная — чтобы ссылка выглядела кликабельной, менялась при взаимодействии и оставалась читаемой.

Состояния ссылки одним взглядом

📊 Набор состояний ссылки

Состояние Когда применяется
a / a:link Ссылка по умолчанию / непосещённая
a:visited Ссылка, которую посетитель уже открывал
a:hover Указатель над ссылкой
a:active Ссылку нажимают (mousedown)
text-decoration Подчёркивание вкл/выкл — обычный контроль ссылок

Браузеры часто помнят полезный порядок LVHA: :link, :visited, :hover, :active. Правила в этом порядке реже случайно перекрывают поздние состояния.

Стилизуйте базовую ссылку

Начните с цвета и подчёркивания. Многие современные дизайны убирают стандартное подчёркивание и возвращают его при наведении.

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

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Посещённые ссылки

:visited может слегка сменить цвет, чтобы вернувшиеся посетители узнавали знакомые пути. Держите изменение тонким — приватность ограничивает, что можно стилизовать у visited.

Тон visited

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Отклик при наведении

:hover — самый ясный повседневный сигнал. Смена цвета, подчёркивание или оба говорят «это интерактивно» без крика.

Подчёркивание при hover

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

active — момент нажатия

:active действует, пока ссылку нажимают. Чуть более тёмный тон даёт короткое ощущение «клика».

Нажатие active

css
CSS Code 
a:active {
color: #062e80;
}

Спокойная привычка для ссылок навигации

Сгруппируйте состояния LVHA, держите hover очевидным и не стирайте контуры фокуса ради плоского вида. Пользователям клавиатуры нужен видимый сигнал фокуса.

Спокойные ссылки nav

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

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

  1. Задайте базовый цвет a и text-decoration: none.
  2. Добавьте a:visited с чуть другим цветом.
  3. На a:hover подчеркните и затемните цвет.
  4. Ещё чуть темнее на a:active.
  5. Стилизуйте nav a в порядке LVHA и оставьте outline :focus-visible.

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

  • Писать :hover раньше :link / :visited, так что некоторые состояния проигрывают
  • Убирать подчёркивание и любой другой признак, что это ссылка
  • Неоновый hover на каждом слове абзаца
  • outline: none на ссылках без замены стиля фокуса
  • Смешивать этот урок с text-shadow / многоточием (прошлый урок)

Кратко

  • Стилизуйте ссылки через a и состояния :link, :visited, :hover, :active
  • Порядок LVHA помогает каскаду вести себя как ожидается
  • Цвет + text-decoration — повседневные рычаги
  • Hover должен быть ясным; visited — тонким
  • Держите видимый стиль фокуса для клавиатурной навигации

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 30 из 35
Css Урок