-=:
Тех. поддержка =-
|
-=: Warning :=- |
©
Copyright Алекс aka TrigGer &
x-graphic studio © Все права защищены. |
![]() |
Интернет раскрутка: с чего начинать?
Советы
по созданию и раскрутке сайта
Хитрости
оформления HTML страниц - правильный выбор цвета
Для
чего нужны формы
Как установить Windows по телефону
Мой
диалог с Windows
Мужчина-прграммист
(краткое приложение по использованию
Диалог
у монитора
Динамическое определение разрешения монитора
Такие
разные ссылки
Стильные
курсоры
Оптимизируем
таблицы
-= Такие разные ссылки =-
Автор:
Влад Мержевич
Источник: Рецепты HTML
Часто возникает необходимость на одной странице использовать ссылки разных
цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего
типа. Одни для меню, другие для текста.
Первый подход для создания таких ссылок связан с использованием тега 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>
Способ прост, но неудобен при большом количестве ссылок. Только представьте,
если вдруг захочется поменять цвет у ссылок, то придется перелопачивать
все страницы. Тут нам на помощь приходят каскадные таблицы стилей, позволяющие
упростить процесс изменения оформления сайта. Создаем два или больше класса
со своими параметрами и применяем их по своему усмотрению. В нижеприведенном
примере достаточно поменять значения у соответствующего класса, и цвета
у ссылок, где этот класс используются изменятся автоматически.
Пример 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>
Дополнение к вышеописанному мне прислал 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>