Ссылки или гиперссылки являются неотъемлемой частью сайта. Это позволяет посетителям перемещаться по сайту. Поэтому правильное оформление ссылок является важным аспектом создания удобного веб-сайта.

Посмотрите Руководство по ссылкам в HTML, чтобы узнать больше о том, как их создавать.

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

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

Вы можете использовать те же CSS-свойства, что и для обычного текста например, например, color, font, background, border и т. д. для каждого из этих селекторов, чтобы настроить стиль ссылок.

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

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

В общем случае порядок псевдоклассов должен быть следующим — :link, :visited, :hover, :active, :focus, чтобы они работали правильно.

Изменение стандартных стилей ссылок

Во всех основных браузерах, таких как Chrome, Firefox, Safari и т. д. , если вы не установите стили для ссылок, по умолчанию они будут подчеркнуты и будут использовать цвета ссылок браузера.

По умолчанию текстовые ссылки будут выглядеть следующим образом в большинстве браузеров:

  • Не посещенная ссылка подчеркнута и выделена синим цветом;
  • Посещенная ссылка подчеркнута и выделена фиолетовым цветом;
  • Активная ссылка подчеркнута и выделена красным цветом.

Тем не менее, нет никаких визуальных изменений ссылки в случае состояния наведения. Она остается синей, фиолетовой или красной в зависимости от того, в каком состоянии (то есть не посещенном, посещенном или активном) она находится.

Теперь давайте посмотрим, как настроить ссылки, переопределив их стили по умолчанию.

Настройка пользовательского цвета ссылок

Просто используйте CSS-свойство color, чтобы определить цвет по вашему выбору для любого состояния ссылки. Но при выборе цвета убедитесь, что пользователь может четко различать обычный текст и цвет ссылки.

В следующем примере показано как это работает:

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Удаление подчеркивания по умолчанию из ссылок

Если вам не нравится подчеркивание по умолчанию для ссылок, вы можете просто использовать CSS-свойство text-decoration, чтобы избавиться от него. Кроме того, вы можете применить другие стили к ссылкам, такие как background-color, border-bottom, font-weight: bold и т. д., чтобы ссылки визуально отличались от обычного текста.

На этом сайте используется свойство border-bottom для выделения ссылок в тексте.

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

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Создание текстовых ссылок в виде кнопок

Вы также можете сделать ваши обычные текстовые ссылки похожими на кнопки, используя CSS. Для этого нам нужно использовать еще несколько CSS-свойств, таких как background-color, border, display, padding и т. д. Об этих свойствах вы узнаете подробнее в следующих главах.

Следующий пример демонстрирует код для кнопки:

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.