Псевдоклассы для ссылок: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Псевдоклассы ссылок позволяют стилизовать ссылки в зависимости от их состояния. Это делает веб-сайты более интерактивными и удобными для пользователей. В этих заданиях вы попрактикуетесь в использовании `:link`, `:visited`, `:hover` и `:active`, чтобы создавать различные визуальные эффекты для ссылок в разных ситуациях.

Список тем

Базовое оформление ссылок

Измените цвет непосещенной ссылки на синий и уберите подчеркивание.

CSS

a:input1 {
  color: blue;
  text-decoration: input2;
}

                     a:input1 {
  color: blue;
  text-decoration: input2;
}

HTML

<a href="#">Это непосещенная ссылка</a>

Используйте псевдокласс `:link`, чтобы стилизовать непосещенные ссылки. Свойство `color` отвечает за цвет текста, а `text-decoration` за оформление текста, включая подчеркивание.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стиль посещенной ссылки

Сделайте цвет посещенных ссылок серым, чтобы визуально отличать их от новых.

CSS

a:input1 {
  color: gray;
}

                     a:input1 {
  color: gray;
}

HTML

<a href="#">Это посещенная ссылка</a>
<br>
<a href="https://google.com">Это другая посещенная ссылка (внешняя)</a>

Псевдокласс `:visited` позволяет стилизовать уже посещенные пользователем ссылки. Используйте свойство `color` чтобы изменить цвет.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Эффект при наведении

Измените цвет ссылки на красный при наведении курсора мыши.

CSS

a:input1 {
  color: red;
}

                     a:input1 {
  color: red;
}

HTML

<a href="#">Наведи курсор на меня</a>

Для создания эффекта при наведении используйте псевдокласс `:hover`. Свойство `color` снова поможет изменить цвет.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Сделайте так, чтобы при нажатии на ссылку (активное состояние), её фон становился желтым.

CSS

a:input1 {
  background-color: yellow;
}

                     a:input1 {
  background-color: yellow;
}

HTML

<a href="#">Нажми и удерживай меня</a>

Псевдокласс `:active` применяется, когда на ссылку нажимают. Используйте `background-color` для изменения фона.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование псевдоклассов

Сделайте так, чтобы непосещенные ссылки были зелеными, посещенные - серыми, при наведении становились оранжевыми, а активные - с подчеркиванием.

CSS

a:input1 {
  color: green;
}
a:input2 {
  color: gray;
}
a:input3 {
  color: orange;
}
a:input4 {
  text-decoration: underline;
}

                     a:input1 {
  color: green;
}
a:input2 {
  color: gray;
}
a:input3 {
  color: orange;
}
a:input4 {
  text-decoration: underline;
}

HTML

<a href="#">Ссылка с разными состояниями</a>

Вы можете комбинировать псевдоклассы для создания более сложной стилизации. Укажите стиль для каждого состояния ссылки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение шрифта при наведении

Увеличьте размер шрифта ссылки до 18px при наведении.

CSS

a:input1 {
  font-size: 18px;
}

                     a:input1 {
  font-size: 18px;
}

HTML

<a href="#">Размер шрифта меняется при наведении</a>

Используйте псевдокласс `:hover` и свойство `font-size` чтобы изменить размер шрифта при наведении.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Удаление подчеркивания при наведении и добавка плавности

Уберите подчеркивание у ссылки по умолчанию, но добавляйте его при наведении, при этом добавьте плавное изменение подчеркивания.

CSS

a {
  text-decoration: input1;
  transition: text-decoration 0.3s ease;
}
a:input2 {
  text-decoration: underline;
}

                     a {
  text-decoration: input1;
  transition: text-decoration 0.3s ease;
}
a:input2 {
  text-decoration: underline;
}

HTML

<a href="#">Подчеркивание появляется плавно при наведении</a>

Используйте `text-decoration: none` для удаления подчеркивания по умолчанию и `text-decoration: underline` для добавления при наведении. Для плавности используйте `transition`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование фонового цвета при наведении

Сделайте так, чтобы при наведении на ссылку появлялся светло-серый фоновый цвет.

CSS

a:input1 {
  background-color: lightgray;
}

                     a:input1 {
  background-color: lightgray;
}

HTML

<a href="#">Фон меняется при наведении</a>

Используйте псевдокласс `:hover` и свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Стиль ссылок внутри навигации

Стилизуйте ссылки внутри блока навигации. Сделайте цвет ссылок белым, уберите подчеркивание, и при наведении фон должен стать темно-серым. Используйте контекстный селектор.

CSS

.navigation a:input1 {
  color: white;
  text-decoration: none;
}
.navigation a:input2 {
  background-color: darkgray;
}

                     .navigation a:input1 {
  color: white;
  text-decoration: none;
}
.navigation a:input2 {
  background-color: darkgray;
}

HTML

<nav class="navigation">
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
</nav>

Используйте контекстный селектор, чтобы применить стили только к ссылкам, находящимся внутри элемента с классом `navigation`. Комбинируйте псевдоклассы `:link` и `:hover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Псевдокласс :focus для ссылок

Добавьте стиль для состояния фокуса ссылки. Когда ссылка в фокусе (например, при переходе по Tab), сделайте ее границу пунктирной.

CSS

a:input1 {
  border: 1px dashed black;
  padding: 5px;
}

                     a:input1 {
  border: 1px dashed black;
  padding: 5px;
}

HTML

<a href="#">Ссылка в фокусе</a>
<a href="#">Другая ссылка</a>
<p>Текст после ссылок</p>

<p>Нажмите Tab несколько раз, чтобы увидеть эффект.</p>

Используйте псевдокласс `:focus` для стилизации состояния фокуса. Свойство `border` поможет добавить границу.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Состояния ссылок и изображения

Сделайте так, чтобы при наведении на ссылку-изображение, прозрачность изображения уменьшалась до 70%.

CSS

a:input1 img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
a img {
  width: 100px;
  height: auto;
}

                     a:input1 img {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
a img {
  width: 100px;
  height: auto;
}

HTML

<a href="#">
  <img src="https://naytikurs.ru/img/1.png" alt="Изображение">
</a>

Используйте псевдокласс `:hover` для ссылки и свойство `opacity` для изображения внутри ссылки.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Продвинутое комбинирование состояний

Создайте комплексный стиль для ссылок: непосещенная ссылка синяя, посещенная фиолетовая, при наведении цвет текста становится белым а фон синим, в активном состоянии увеличивается размер шрифта и добавляется тень. Все изменения должны быть плавными.

CSS

a {
  transition: all 0.3s ease;
}
a:input1 {
  color: blue;
}
a:input2 {
  color: purple;
}
a:input3 {
  color: white;
  background-color: blue;
}
a:input4 {
  font-size: 1.2em;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

                     a {
  transition: all 0.3s ease;
}
a:input1 {
  color: blue;
}
a:input2 {
  color: purple;
}
a:input3 {
  color: white;
  background-color: blue;
}
a:input4 {
  font-size: 1.2em;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

HTML

<a href="#">Комплексная стилизация ссылки</a>

Комбинируйте все изученные псевдоклассы и свойства. Для плавности используйте `transition` для всех изменяемых свойств.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку