| Рейтинги
|
|
|
|
|
Дизайн - CSS - Описание ССЫЛОК
Вставка описания стилей
Описание BODY
Описание ТЕКСТА
Описание и назначение КЛАССОВ
Итак, ссылки. В известное по предыдущим статьям описание стилей вставляем описание ссылок:
<![CDATA[<style type=text/css>
<!--
body{background-color:#000000;
font-family: MS Sans Serif, tahoma, Verdana, Arial;
FONT-SIZE: 10px; color:#00EFFF}
A { color :#00E1FF; 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 только те свойства текста, которые меняются. В A:Hover мы задали цвет и подчеркивание снизу. Так как A:Hover относится к А, то указанные в A:Hover свойства текста изменяются, а все остальное остается так, как описано в А. При наведении мыши изменяется цвет и появляется подчеркивание, шрифт и размер шрифта не меняются.
ПРИМЕР ССЫЛКИ
В примере Вы видите ссылку, описанную нашим стилем. В Нетскейпе это не работает. Можно, конечно, задавать каждому состоянию ссылки полное описание. Как хотите. Можно, например, изменять размер шрифта. Для этого указываем размер шрифта и в A:Hover
<![CDATA[ A { color :#00E1FF; 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-ов. Два примера ссылок, которые были выше, у меня описывались так:
<![CDATA[ A { color :#00E1FF;
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".
<![CDATA[<A HREF="#" CLASS="a1">ПРИМЕР ССЫЛКИ</A>]]>
Теперь все ссылки изменяются так, а ссылки с "CLASS="a1" - иначе. Таких классов можно назначить сколько угодно, для любого состояния ссылки!
<![CDATA[
A {описание}
A.a1{ описание}
A.a2{описание}
A:Hover {описание}
A.a1:Hover {описание}
A.a2:Hover {описание}
]]>
В данном примере мы задали три вида ссылок, изменяющихся при наведении мыши. Теперь надо только в ТЭГИ "А" вставить CLASS="a1" или CLASS="a2" или ничего не пишем.
|
|
|
|
|
|
CSS