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

Посмотрите Руководство по ссылкам в 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;
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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