На главную

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

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Такие разные ссылки

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста.

Первый подход для создания таких ссылок связан с использованием тега FONT. Помещаем тег FONT между тегами <a href=...> и </a> и задаем нужный цвет шрифта и его размер.

Пример 1. Ссылки разных цветов с помощью тега FONT
<body link=#0000ff>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html><font color=#ff0000 size=-1>Ссылка 2</font></a>
</body>

| Ссылка 1 | Ссылка 2 |

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

Пример 2. Ссылки разных цветов с использованием стилей

<html>
<head>
<style>
a { font-size: 14px; color: red }
a.link1 { font-size: 12px; color: green }
a.link2 {font-size: 14px; color: blue }
</style>

<body link=#0000ff>
<p><a href=link1.html>Ссылка 1</a>
<p><a href=link2.html class=link1>Ссылка 2</a>
<p><a href=link3.html class=link2>Ссылка 3</a>
</body>

| Ссылка 1 | Ссылка 2 | Ссылка 3 |

Дополнение к вышеописанному мне прислал VinnyNov (Vinny@mail.novgorod.ru) уже после опубликования данной статьи.
Замечание: если цвет в каскадной таблице указывать у ссылки (тега <a>), то замечены глюки в Нетскейпе (цвет ссылки не меняется) и Опере (цвет черты подчеркивания ссылки не меняется), поэтому для надежности я использую вложенный внутрь ссылки тег <div> с прописанным в каскадной таблице цветом.

Пример 3. Использование вложенного тега DIV
<html>
<head>
<style>
.Red { font-size: 14px; color: red }
</style>

<body link=#0000ff>
<a href="..."><div class="Red">Red Link</div></a>
</body>

Согласен с Vinny и спасибо ему за замечание и дополнение к данному материалу.

Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. При создании двух и более типов ссылок можно воспользоваться селектором hover, однако, этот параметр не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.

Пример 4. Использование параметра HOVER

<html>
<head>
<style>
a.link1 { color: green; text-decoration: none }
a:hover.link1 { text-decoration: underline; color: red }
a.link2 { color: blue; }
a:hover.link2 { color: black }
</style>

<body link=#0000ff>
<p><a href=link1.html class=link1>Ссылка 1</a>
<p><a href=link2.html class=link2>Ссылка 2</a>
</body>

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

| Ссылка 1 | Ссылка 2 |

Влад Мержевич
Рецепты HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100