Библиотека Интернет Индустрии I2R.ru

В основе концепции сети Интернет лежат гиперссылки. Практически любая HTML-страница содержит хотя бы одну ссылку, так что нельзя недооценивать важность этого элемента. В этой статье пойдет речь о том, как можно оформлять ссылки в тексте. Мы не будет рассматривать меню и прочие виды навигации по сайту, хотя некоторые из описанных здесь приемов можно с успехом применять и для этих элементов страницы.

Самое важное правило при оформлении гиперссылки в тексте — она должна значительно отличаться от основного текста. Правило совершенно очевидное. Если ссылка из текста не выделяется, то посетитель ее и не заметит. В большинстве случаев мы легко отличаем апельсин от яблока, потому что это разные понятия. Текст и гиперссылка тоже разные понятия. Так что если текст выводится черным цветом и шрифтом Verdana 12 пикселей, нельзя точно такой же стиль применять к ссылке.

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

Итак, по умолчанию для ссылки используется два вида выделения: подчеркивание и цвет. Некоторые ярые приверженцы Якоба Нильсена настоятельно рекомендуют оставлять все так, как есть. То есть чтобы ссылки были ярко синими и с подчеркиванием. Конечно, все бы ничего, но уж очень странно смотрятся синие ссылки на синем фоне (мало ли что дизайнер придумает, бывает и такое). Если подчеркивание имеет смысл оставлять, то цвет для ссылок может быть любым. И не верьте, когда вам говорят, что пользователи привыкли к синему цвету. Пользователи такого за свою жизнь насмотрелись, что их цветом ссылок не удивишь.

Традиционный способ оформления ссылок мы уже знаем, поры бы перейти к альтернативам.

Выделение полужирным и цветом шрифта

Выделять ссылку только цветом шрифта или только полужирным шрифтом плохо по той причине, что выделение получается слабым и акцент на ссылку не делается. Мало ли что автор статьи захотел там выделить. Может просто важное слово, а не ссылка. А вот выделение и цветом, и полужирным уже более подходяще, потому что акцент получается сильный и посетителю легко догадаться, что это есть нечто отличное от основного текста, вероятнее всего, гиперссылка. Например, именно так выделяются ссылки на сайте www.alistapart.com

Стиль для такого выделения будет примерно вот таким:

A {color: #00F; 
font-weight: bold; 
text-decoration: none}

Выделение фоновым цветом

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

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

A {color: #FFF;
 background-color: #09C;
 text-decoration: none}

Для улучшения эффекта можно сделать небольшой отступ:

A {color: #FFF;
 background-color: #09C;
 text-decoration: none;
 padding: 0px 3px}

Выделение рамкой

Относительно новый способ, который широко используется при выделении ссылок в PDF-документах. Например, в официальной спецификации CSS-2 ссылки именно так и выделяются. Плох тем, что относительно новый, и пользователи к таким ссылкам не привыкли.

Рамка может быть разной: сплошной, пунктирной и т.п. Однако в браузере MSIE 5.0 какую бы вы рамку не прописывали в стилях, все равно будет сплошная. Примерный стиль для оформления ссылок таким образом:

A {color: #000;
 border: 1px solid #000;
 text-decoration: none;
 padding: 0px 2px}

Как не надо делать

Крайне не рекомендуется выделять ссылки следующими способами:

• Увеличенным или уменьшенным размером шрифта
• Гарнитурой шрифта (если основной текст, скажем, Verdana, а ссылки выделены Courier New, смотрится ужасно)
• Наклонным шрифтом
• Только цветом без подчеркивания

Однако самое страшное, если ссылки вообще не будут выделены никак. Например, за такие стили:

A {color: #000;
 text-decoration: none}

P {color: #000}

Дизайнера можно смело увольнять с работы.

Магический hover

Оптимального решения, видимо, не существует, однако для себя я выбор сделал. Я использую выделение ссылок или только подчеркиванием, или подчеркиванием и цветом. Все остальные эффекты идеально ложатся под свойство hover. При наведении на ссылку курсором она просто обязана как-то измениться, потому что пользователям это нравится и прибавляет каплю интерактивности сайту. Простейший способ - при наведении менять цвет или убирать подчеркивание. Делается элементарно:

A {color: #000}

A:hover {color: #F60;
 text-decoration: none}

Кроме того, можно изменять подчеркивание сплошной линией на подчеркивание прерывистой линией. Например, вот так:

A {color: #000}

A:hover {text-decoration: none;
 border-bottom: 1px dotted #F60}

Эффект выглядит довольно оригинально и ново (пока).

Некоторые при наведении используют надчеркивание, то есть линия появляется над ссылкой. Делается это с помощью объявления text-decoration: overline. Лично мне такой эффект не нравится, уж больно странно выглядит надчеркнутая ссылка.

Естественно, на hover можно вешать все те стили, которые описаны в первой части статьи, то есть изменять фон при наведении или рисовать рамку вокруг ссылки. Рисование рамки сопряжено с определенными сложностями. Когда рамка появляется, то ссылка сдвигается вправо на пиксель (если ширина рамки 1px) и вся строка за ссылкой тоже сдвигается. Предотвратить сдвиг ссылки можно так:

A:hover {text-decoration: none;
 border: 1px dotted #F60;
 position: relative;
 left: -1px}

А вот со сдвигом строки сложнее. Можно сделать, чтобы строка не сдвигалась, но тогда будет сдвигаться сама ссылка:

A:hover {text-decoration: none;
 border: 1px dotted #F60;
 margin-left: -2px}

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

Собственно говоря, больше ничего сложного в работе с фоном нет. Для вас, я надеюсь, тоже.