Атрибут link тега <body>
Описание
Атрибут link использовался в HTML4 для задания цвета непосещённых ссылок на всей странице. Этот атрибут устарел и был удалён из HTML5 в пользу CSS-стилей.
Устарело: Атрибут link не поддерживается в HTML5. Используйте CSS-псевдокласс
:link вместо него.
Устаревший синтаксис:
<body link="#0000FF">
<a href="/page.html">Эта ссылка будет синей</a>
</body>
Современный CSS-эквивалент:
/* Стиль для непосещённых ссылок */
a:link {
color: #0000FF;
}
Полная замена всех устаревших атрибутов ссылок:
| Устаревший атрибут | CSS-эквивалент |
|---|---|
link (непосещённые) |
a:link |
vlink (посещённые) |
a:visited |
alink (активные) |
a:active |
Современный подход к стилизации ссылок:
/* Базовые стили ссылок */
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
/* Непосещённые ссылки */
a:link {
color: var(--link-color);
}
/* Посещённые ссылки */
a:visited {
color: var(--visited-color);
}
/* Активные ссылки */
a:active {
color: var(--active-color);
transform: translateY(1px);
}
/* Состояние наведения */
a:hover {
color: var(--hover-color);
text-decoration: underline;
}
/* Состояние фокуса (для доступности) */
a:focus {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
Причины отказа от атрибута link:
- Нарушает принцип разделения структуры и стилей
- Ограничивает возможности стилизации (только цвет)
- Не поддерживает современные дизайн-системы
- Усложняет поддержку и изменение стилей
- Не работает с CSS-переменными и медиа-запросами
Рекомендации по стилизации ссылок:
- Используйте семантические CSS-классы для разных типов ссылок
- Добавляйте визуальные подсказки при наведении/фокусе
- Обеспечьте достаточный цветовой контраст (WCAG)
- Различайте посещённые и непосещённые ссылки
- Тестируйте на различных устройствах и браузерах
Пример комплексной стилизации:
:root {
--link-color: #2563eb;
--visited-color: #7c3aed;
--hover-color: #1d4ed8;
--active-color: #1e40af;
--focus-color: #93c5fd;
}
a {
color: var(--link-color);
text-decoration: none;
padding: 0.2rem 0;
position: relative;
transition: all 0.3s ease;
}
a:hover {
color: var(--hover-color);
}
a:visited {
color: var(--visited-color);
}
a:active {
color: var(--active-color);
}
a:focus {
outline: none;
background-color: var(--focus-color);
}
/* Подчёркивание при наведении */
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
Примечание: Хотя атрибут link может продолжать работать в браузерах, современная веб-разработка требует использования CSS для всех аспектов визуального оформления. Это обеспечивает лучшую гибкость, поддерживаемость и соответствие стандартам доступности.