Css как добавить ссылку

Css как добавить ссылку



Ссылки могут быть оформлены различными путями.


Оформление Ссылок

Ссылки могут быть оформлены с помощью любого CSS свойства (например color, font-family, background и т.д.).

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

Четыре состояния ссылки это:

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

Пример

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

При установке стиля для нескольких состояний ссылки, есть несколько порядковых правил:

  • a:hover ДОЛЖНО идти после a:link и a:visited
  • a:active ДОЛЖНО идти после a:hover

Способы Оформления Ссылок

В примере выше ссылка меняет цвет в зависимости от состояния, в котором она находится.

Давайте посмотрим некоторые другие способы оформления ссылок:

Декорация Текста

Свойство text-decoration в основном используется для удаления подчеркивания из ссылок:

Пример

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

Цвет Фона

Свойство background-color указывает цвет фона для ссылок:

Пример

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает


Примеры

Еще примеры

Добавление различных стилей к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.

Продвинутый пример — Создание ссылок в виде блоков
Этот пример демонстрирует более продвинутый пример, где мы сочетаем несколько свойств CSS, чтобы отображать ссылки как блоки.




Источник: uroki-css.ru


Добавить комментарий