Псевдоклассы для ссылок [Модуль 1: Основы CSS]: Тренажер CSS

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

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

Список тем

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

id: 37300_link-pseudo-1

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

CSS

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

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-2

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

CSS

a:input1 {
  color: gray;
}

                     a:input1 {
  color: gray;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-3

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

CSS

a:input1 {
  color: red;
}

                     a:input1 {
  color: red;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-4

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

CSS

a:input1 {
  background-color: yellow;
}

                     a:input1 {
  background-color: yellow;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-5

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

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>

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-6

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

CSS

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

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-7

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

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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-8

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

CSS

a:input1 {
  background-color: lightgray;
}

                     a:input1 {
  background-color: lightgray;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-9

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

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 для ссылок

id: 37300_link-pseudo-10

Добавьте стиль для состояния фокуса ссылки. Когда ссылка в фокусе (например, при переходе по 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` поможет добавить границу.

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-11

Сделайте так, чтобы при наведении на ссылку-изображение, прозрачность изображения уменьшалась до 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` для изображения внутри ссылки.

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

Результат

Сообщения

Выполнить

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

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

id: 37300_link-pseudo-12

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

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` для всех изменяемых свойств.

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

Результат

Сообщения

Выполнить

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