Итак, ссылки. В известное по
предыдущим статьям описание стилей
вставляем описание ссылок:
<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
|