CSS - Ссылки: Полное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы погружаемся в奇妙ный мир CSS ссылок. Как кто-то, кто teaches это уже много лет, я могу告诉你, что овладение ссылками похоже научение завязывать шнурки - сначала это кажется сложным, но как только ты это освоишь, ты будешь удивляться, как ты жил без этого!

CSS - Links

Понимание состояний ссылок

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

a:link - Обычная, не посещенная ссылка
a:visited - Ссылка, которую пользователь уже посещал
a:hover - Ссылка, когда пользователь наводит на нее курсор
a:active - Ссылка в момент щелчка

Вот удобная таблица, чтобы запомнить эти состояния:

Состояние	Описание
a:link	Обычная, не посещенная ссылка
a:visited	Ссылка, которую пользователь уже посещал
a:hover	Ссылка, когда наводят курсор
a:active	Ссылка в момент щелчка

Условные стили ссылок

По умолчанию браузеры стилизуют ссылки определенным образом. Вы, наверное, заметили:

Не посещенные ссылки синие и подчеркнутые
Посещенные ссылки фиолетовые и подчеркнутые
Активные ссылки红色

Но не волнуйтесь, мы собираемся это изменить!

CSS Ссылки - Основной пример

Давайте начнем с простого примера:

a {
color: #FF0000;
text-decoration: none;
}

Этот код сделает все ваши ссылки красными и удалит подчеркивание. Pretty neat, right? Давайте разберем это:

a выбирает все элементы ссылок
color: #FF0000; устанавливает цвет на красный
text-decoration: none; удаляет подчеркивание

CSS Ссылки - Стилизация некоторых ссылок

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

/* не посещенная ссылка */
a:link {
color: #FF0000;
}

/* посещенная ссылка */
a:visited {
color: #00FF00;
}

/* ссылка при наведении курсора */
a:hover {
color: #FF00FF;
}

/* выделенная ссылка */
a:active {
color: #0000FF;
}

Этот код даст вам:

Красные не посещенные ссылки
Зеленные посещенные ссылки
Розовые ссылки при наведении курсора
Синие ссылки при щелчке

Помните, порядок имеет значение! Correct order is: link, visited, hover, active. Я люблю запомнить это как "LoVe HAte" (Link, Visited, Hover, Active).

Добавление иконок на ссылки

Хотите сделать ваши ссылки еще более заметными? Давайте добавим иконки!

Во-первых, вам нужно иметь изображение иконки. Давайте представим, что у нас есть маленькая стрелочная иконка под названием 'arrow.png'.

a {
background: url('arrow.png') no-repeat left center;
padding-left: 20px;
}

Этот код добавит стрелочную иконку слева от текста вашей ссылки. padding-left обеспечивает то, чтобы текст не перекрывал иконку.

CSS Ссылки - Добавление иконок

Давайте поднимем планку и добавим разные иконки для разных типов ссылок:

/* Добавление иконки к внешним ссылкам */
a[href^="http"] {
background: url('external-link.png') no-repeat right center;
padding-right: 20px;
}

/* Добавление иконки PDF к ссылкам на PDF-файлы */
a[href$=".pdf"] {
background: url('pdf-icon.png') no-repeat right center;
padding-right: 20px;
}

Этот код сделает следующее:

Добавит иконку внешней ссылки к ссылкам, начинающимся с "http"
Добавит иконку PDF к ссылкам, заканчивающимся на ".pdf"

Ссылки как кнопки

Иногда вы хотите, чтобы ваши ссылки выглядели как кнопки. CSS делает это легко!

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Теперь любая ссылка с классом "button-link" будет выглядеть как стильная зеленая кнопка!

CSS Ссылки - Ссылки как кнопки

Давайте сделаем наши button-links еще более интерактивными:

.button-link {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button-link:hover {
background-color: #45a049;
}

.button-link:active {
background-color: #3e8e41;
}

Этот код сделает следующее:

Создаст зеленую кнопку-ссылку
Затенит кнопку слегка при наведении
Затенит ее еще больше при щелчке
Добавит эффект плавного изменения цвета

И все! Теперь у вас есть знания для создания потрясающих, интерактивных ссылок, которые оживят ваши веб-страницы. Помните, практика делает мастера, так что не бойтесь экспериментировать с разными стилями и kombinaciyami.

Как я всегда говорю своим студентам, CSS как готовка - вы начинаете с базовых ингредиентов (свойств), но именно их kombinirovanie создает шедевр. Так что идите и создавайте свои CSS шедевры!

Credits: Image by storyset