Стилизация гиперссылок (HTML + CSS)

По-умолчанию во всех браузерах текстовые гиперссылки визуально выделяются. Наиболее распространенный вариант — синий текст с подчеркиванием, при наведении на ссылку курсор принимает форму руки. Посещенные ссылки меняют свой цвет на бардовый. Это удобно в плане наглядности, но для гармоничности дизайна сайта такой вариант практически никогда не подходит. Поэтому для ссылок применяют специальные стили. Как мы знаем, чтобы применить стили для всех элементов данного типа на странице можно воспользоваться селектором в виде имени тега. Для ссылок это будет селектор a. Для селекторов, использующихся для изменения стилей ссылок, применимы следующие постфиксы:

:link

применяет стили для ссылок, которые еще не посещены

:hover

применяет стили для ссылки при наведении курсора мыши

:active

применяет стили для ссылки при нажатии на нее

:visited

применяет стили для ссылок, которые уже посещены

Не обязательно использовать все эти постфиксы вместе для описания стилей. Допустим, нам необходимо сделать все ссылки на странице черными, а при наведении курсора — красными. Для этого достаточным будет:

a {color: black}
a:hover {color: red}

Подчеркнутость текста ссылок задается стилем text-decoration. Два наиболее распространенные значения — это underline (подчеркнутый, установлено по-умолчанию для ссылок) и none (без подчеркивания). Таким образом, чтобы убрать подчеркивания ссылок, необходимо задать стилю text-decoration значение none:

a {text-decoration: none}

Стиль text-decoration не позволяет изменять стиль подчеркивания, поэтому для создания, допустим, ссылок со штриховым подчеркиванием можно воспользоваться стилем border-bottom. Взгляните на небольшой пример, в котором ссылки при наведении курсора становятся подчеркнутыми штриховой линией:

<style>
* {
  font-family: verdana;
  font-size: 12px
}
 
a {
  text-decoration: none; /* убираем у ссылок подчеркнутость, заданную по-умолчанию */
  color: red;
}
 
a:hover {
  border-bottom: 1px dashed red;
}
</style>
<span>
  В этом примере <a href="#">ссылки</a> при наведении <a href="#">курсора</a> мыши становятся подчеркнутыми <a href="#">штриховой</a> линией
</span>

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий