Примеры оформление ссылок в тексте
 |
Дорогие друзья, о том, что такое гиперссылки и как ими пользоваться я уже рассказывал. Теперь пришло время уделить внимание их оформлению. Здесь очень много вариантов. Возможности 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 можно творить что угодно, но я попытался остаться в рамках рассматриваемой темы. Так что у меня всё. Спасибо за внимание. Удачи!
Комментариев нет:
Отправить комментарий