IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Основы CSS. Текст - верстка

Итак, ссылки. В известное по предыдущим статьям описание стилей вставляем описание ссылок:

<style type=text/css>
<!--
body{background-color: #000000;
font-family: MS Sans Serif, tahoma, Verdana, Arial;
FONT-SIZE: 10px; color:#00EFFF}
 A { color: #FFFFFF;  FONT-FAMILY:  Verdana, Arial;
text-decoration: none; FONT-SIZE: 8pt;}
 A:Hover { color: #FF0000; text-decoration: underline;}
-->
</style>

Все, что начинается с "А", это описание ссылок. Ссылки описываются точно также, как и текст. Единственное отличие — "состояния", так сказать, ссылок. Описание " A { color :#00E1FF; FONT-FAMILY: Verdana, Arial; text-decoration:underline; FONT-SIZE: 8pt;}" описание основного стиля. Если мы зададим только это описание, ссылки будут иметь заданный вид, но не будут меняться. Для этого описываются отдельно стили других состояний ссылки. Строка " A:Hover { color :#FF0000; text-decoration: underline;}" описывает состояние ссылки при наведении на нее мыши.
A:Hover — это ссылка под мышкой, color :#FF0000; — цвет ссылки под мышкой, text-decoration: underline; — подчеркивание снизу.
Обратите внимание! В описании А мы задали полное описание(цвет, шрифт, размер), а в описании A:Hover только те свойства текста, которые меняются. В A:Hover мы задали цвет и подчеркивание снизу. Так как A:Hover относится к А, то указанные в A:Hover свойства текста изменяются, а все остальное остается так, как описано в А. При наведении мыши изменяется цвет и появляется подчеркивание, шрифт и размер шрифта не меняются.

В Нетскейпе до шестого это не работает. Можно, конечно, задавать каждому состоянию ссылки полное описание. Как хотите. Можно, например, изменять размер шрифта. Для этого указываем размер шрифта и в A:Hover

 A { color: #FFFFFF;  FONT-FAMILY:  Verdana, Arial;
text-decoration: none; FONT-SIZE: 8pt;}
 A:Hover { color: #FF0000; text-decoration: underline;
FONT-SIZE: 14pt; }

Получаем ссылку, увеличивающую свой размер при наведении, меняющую цвет и подчеркивание. Таким-же образом описываем все состояния ссылки.
А:active — описание нажатой ссылки
А:link — описание непосещенных ссылок( по идее, если вы описали "А", то нет смысла описывать "А:link")
А:visited — описание посещенных ссылок
Надо-ли вам указывать все состояния ссылки, смотрите сами. В зависимости от оформления страницы можно описать два-три. Вполне практично задать описания А, A:Hover и А:visited. Этих трех состояний вполне достаточно.

Часто хочется задать разные параметры ссылок. Например, чтоб одни ссылки загорались красным, а другие желтым. Для этого надо просто обьединить описание ссылок с описанием CLASS-ов. Два примера ссылок, которые были выше, у меня описывались так:

 A { color: #FFFFFF;
 FONT-FAMILY:  Verdana, Arial;
 text-decoration: none;  FONT-SIZE: 8pt;}

 A:Hover { color: #FF0000;
 text-decoration: underline;}

 A.a1:hover{ color: #FF0000;
 text-decoration: underline;
 FONT-SIZE: 14pt;}

Обратите внимание на A.a1:hover. Мы задали свойства при наведении мыши для ссылки с классом "a1".
В самой ссылке добавляем CLASS="a1".

<A HREF="#" CLASS="a1">ПРИМЕР ССЫЛКИ</A>

Теперь все ссылки изменяются так, а ссылки с "CLASS="a1" - иначе. Таких классов можно назначить сколько угодно, для любого состояния ссылки!

A {описание}
A.a1{ описание}
A.a2{описание}
A:Hover {описание}
A.a1:Hover {описание}
A.a2:Hover {описание}

В данном примере мы задали три вида ссылок, изменяющихся при наведении мыши. Теперь надо только в ТЭГИ "А" вставить CLASS="a1" или CLASS="a2" или ничего не пишем.

 

Дополнение
Нетскейп 6 отлично все это "переваривает"— без проблем. Так что, можно все использовать.

Источник: A-design studio http://mtk.on.ufanet.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.