Примеры оформление ссылок в тексте

Дорогие друзья, о том, что такое гиперссылки и как ими пользоваться я уже рассказывал. Теперь пришло время уделить внимание их оформлению. Здесь очень много вариантов. Возможности CSS достаточно велики. Поэтому я остановлюсь лишь на краткой теории и одном нестандартном решении оформлении ссылок.

В частности, вы узнаете о некоторых CSS-свойствах, состояниях ссылок, разберётесь с настройками браузера по оформлению ссылок, а также научитесь создавать ссылки с нестандартным подчёркиванием. Приступим?

CSS-свойства

Что собой представляет ссылка? Ссылки - это размеченный тегом a текст или картинка. При этом ссылка интерпретируется браузером как некий активный элемент. Кликнув по такому элементу, вы переходите на страницу, адрес которой указан в атрибуте href.

Если с этим разобрались, давайте рассмотрим некоторые CSS свойства, которые позволяют оформить текст соответствующим образом. Сразу скажу, что здесь я привёл лишь малую их часть, но и этого будет вполне достаточно.

  • color - определяет цвет текста. Цвет может быть указан как название, HEX, RGB (RGBA) или HSL (HSLA).
  • text-decoration - добавляет оформление тексту. Например: underline - подчёркивание, none - отмена всех эффектов и т.д.
  • font-family - устанавливает семейство шрифтов. Список шрифтов может включать одно или несколько названий, разделенных запятой. Подробнее о шрифтах читайте тут.
  • font-size - устанавливает размер шрифта. Например, в пикселях.
  • cursor - установка формы курсора. Например, hand (невалидный, для старых версий браузеров) или pointer - рука.

Для наглядности приведу пример описания CSS-свойств, указанных для тега a.

a {
  color: blue; /* цвет синий */
  text-decoration: underline; /* подчёркивание */
  font-family: "Times New Roman", Times, serif; /* семейство шрифтов */
  font-size: 14px; /* размер шрифта */
  cursor: hand; /* для IE */
  cursor: pointer; /* курсор при наведении станет «рукой» */
}

Состояния ссылок

У ссылок имеются и (назовём это так) состояния. Для того чтобы указать свойства для соответствующего состояния ссылки, в CSS используются псевдоклассы. Ниже я приведу некоторые из них.

  • :link - ссылка, которая ещё не посещалась пользователем.
  • :visited - ссылка, которая уже посещалась пользователем.
  • :active - активная ссылка, становится таковой при её нажатии.
  • :hover - ссылка, при наведении на неё курсора мыши.

Следует отметить, что без наличия подобных «обработчиков» состояний, для ссылки используются CSS-свойства, прописанные для тега <a> (см. пример выше). Другими словами, их использование не обязательно и служит лишь в качестве дополнения. Так я обычно использую лишь :visited и :hover.

a:visited { color: Purple; }
a:hover { color:red; }

Оформление ссылок в бразуере Firefox

По умолчанию, оформление ссылок задаётся в настройках браузера. Например, в браузере Firefox вам надо проследовать в «Настройки», где перейдите на вкладку «Содержимое». Здесь нас интересует секция «Шрифты и цвета».

Есть и другие настройки, которые можно изменить, кликнув кнопку «Дполнительно…». Нас же интересует кнопка «Цвета…». В открывшемся окне обратите внимание на секцию «Цвет ссылок» и галочку «Подчёркивать ссылки».

Ссылки с нестандартным подчёркиванием

Ну а теперь давайте покреативим. У себя на блоге я использую ссылку чёрного цвета с голубым подчёркиванием. Сложность такой реализации заключается в том, что цвет подчёркивания такой же, что и у текста. Так как я это сделал? Есть два варианта.

Вариант 1: внутренний span.

Суть его сводится к тому, чтобы разместить внутри ссылки тег span с отличным от ссылки цветом. Таким образом, подчёркивание у ссылки будет одного цвета, а сам текст - другого. Пример:

<style>
a {color:blue;}
a span {color:black;}
</style>
<a href="http://www.wmascat.ru/"><span>ссылка с нестандартным подчёркиванием</span></a>

Результата интерпретации такого кода будет иметь следующий вид:

ссылка с нестандартным подчёркиванием

Плюсы: этот вариант логически правильный, есть чёткая иерархия элементов. Помимо этого, здесь не будет проблем с картинками, как во втором варианте.

Минусы: лишние теги усложняют вёрстку, велика вероятность ошибки. Обойтись только визуальным редактором здесь не получится. Придётся уделить внимание исходному коду. В случае если уже имеются страницы без соответствующей разметки, придётся дорабатывать.

jQuery авто-вставка span тега. По сути, проблема со вставкой тега span легко решается с помощью JavaScript. Готовый вариант решения выглядит так:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){ $("a").wrapInner('<span />') });
</script>

Здесь я использовал JavaScript библиотеку jQuery с Google API. Потом, дождавшись полной загрузки страницы, (функция redy() для document) и произвел вставку тега span нужным нам образом, используя функцию wrapInner().

Вариант 2: имитация подчёркивания через border-bottom.

Суть его заключается в том, чтобы отказаться от подчёркивания (будем использовать: text-decoration:none;) и имитировать его через границу элемента (например, так: border-bottom:1px solid blue;). Здесь мы сталкиваемся ещё с одним CSS-свойством, а именно border-bottom. Оно устанавливает толщину, стиль и цвет границы внизу элемента.

<style>
a {
  color:black;
  text-decoration:none;
  border-bottom:1px solid blue;
}
</style>
<a href="http://wmascat.blogspot.com/">ссылка с нестандартным подчёркиванием</a>

Результата интерпретации такого кода будет иметь следующий вид:

ссылка с нестандартным подчёркиванием

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

Минусы: в случае с картинкой мы тоже получим «подчёркивание», что не всегда приемлемо.

jQuery авто-удаление подчёркивания у картинки. По сути, проблема с подчёркиванием у картинки легко решается с помощью JavaScript. Готовый вариант решения выглядит так:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){ $("a:has(img)").css("border", "0"); });
</script>

Здесь мы подключаем библиотеку jQuery с Google API. Потом дожидаемся полной загрузки страницы (redy()) и если в теге a есть тег img, убираем границу у ссылки.

Послесловие

В принципе не сложно догадаться, как можно комбинировать предложенные решения и в каком направлении искать, чтобы создать достаточно привлекательные ссылки. Сама идея с нестандартным подчёркиванием основана на желание более естественно вписать ссылки в текст, оставляя их ссылками.

Примечательно, что вы можете добавить сюда и обработку состояний ссылок, как это реализовано у меня в блоге. Да вообще, с помощью CSS и тем более JavaScript можно творить что угодно, но я попытался остаться в рамках рассматриваемой темы. Так что у меня всё. Спасибо за внимание. Удачи!

Twitter Facebook ВКонтакте Одноклассники Google+

Комментариев нет:

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