2.6. CSS ссылки

css-linkCSS ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок html-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение css-стилей для оформления улучшит их визуальное восприятие.

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor.

Оформление гипертекстовых ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

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

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — еще нет, например:

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

2. Выборка отдельных ссылок

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

3. Подчеркивание ссылок

Удаление подчеркивания:

Добавление подчеркивания только при наведении на ссылку:

Внешний вид нижней границы ссылки:

4. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

4. Внешний вид курсора мыши cursor

Курсор мыши может иметь различный вид, также можно установить пользовательское изображение в качестве курсора. Наведите над ячейками таблицы ниже, чтобы увидеть, как выглядит курсор для каждого установленного значения. Значение по умолчанию cursor: pointer;.

See the Pen RGWgBQ by Elena (@html5book) on CodePen.

5. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image. Так как элемент <а> является строчным a {display: inline;}, то предварительно его нужно преобразовать в блочный элемент a {display: block;}.

Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left. Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.

Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href, заканчивающиеся определенным образом (в данном случае .pdf) и добавить к ссылке соответствующий значок.

6. Ссылки-кнопки

Благодаря свойствам background-color, border и padding, ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover, добавить интересные эффекты.

buttons-design

Перейти на страницу с примерами

CSS стили

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover.

styling-links

Перейти на страницу с примерами

CSS стили