Подсветка ссылки

Для того, чтобы подсветить ссылку при наведении на неё курсора мышки, необходимо задать такую таблицу стилей:

<STYLE TYPE="text/css">
<!--
a:hover {color: red; mso-bidi-font-size:12pt}
-->
</STYLE>

В
этом случае все ссылки на странице при наведении на них курсора мышки
будут подсвечиваться красным цветом и перезаписываться шрифтом размером
в 12 pt.

Для того, чтобы с одной из ссылок этого не происходило,
необходимо задать для неё принудительно шрифт с помощью тега
<font> внутри ссылки, например:

<a href=#><font color=blue>Неподсвеченная ссылка</font></a>

Для
того, чтобы одна группа ссылок подсвечивалась одним цветом, другая
другим, необходимо несколько иначе написать таблицу стилей:

<style>
body a:Hover {color : red}
.group1 {text-decoration: none; font-family: arial; font-size: 8pt; color: black}
a:hover.group1 {text-decoration: none; font-family: arial, font-size: 8pt; color: blue}
.group2 {font-family: arial, font-size: 10pt; color: green}
a:hover.group2 {font-family: arial, font-size: 10pt; color: gray}
</style>

В
этом случае ссылки, для которых указан класс group1, будут отображаться
не подчеркнутыми, чёрным цветом, шрифтом Arial размером 8 pt. При
наведении мышки они станут подчёркнутыми и перекрасятся в синий цвет.

Ссылки,
для которых указан класс group2, будут подчёркнутыми и отображаться
шрифтом размера 10pt зелёным цветом. При наведении мышки они станут
серыми.

Изменение фона в таблице.

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

Для
этого необходимо написать небольшой обработчик соответствующего
события, например, попадание курсора мышки в область таблицы:

<table
id=table onMouseover="table.bgColor='red'"
onMouseOut="table.bgColor='white'" bgcolor=white
border=1><tr><td>
При наведении курсора мышки на таблицу она поменяет цвет.
</td></tr></table>

При
наведении мышки на область таблицы она изменит цвет с белого на
красный. Соответственно, когда курсор мышки вновь покинет эту область,
она вновь станет белой.

Аналогичным образом можно менять не только цвет, но и фоновый рисунок таблицы.

А вот ещё небольщой пример, который демонстрирует, как можно с помощью CSS динамически обвести таблицу контуром:

<table id=tabl1e onMouseover="table1.border='2" onMouseOut="table1.border=0'" border=0><tr><td>
<a href=#>При наведении курсора мышки на таблицу она очертится контуром;/a>
</td></tr></table>

Как
Вы можете заметить, CSS даёт достаточно немалые возможности создания
динамической страницы для последующего отображения в Internet Explorer.
Для Netscape Navigator, чтобы реализовать что-то подобное, требуется
либо использовать графические элементы, либо слои. Однако фиксация
шрифтов работает и для того и для другого броузера так же, как и
реализация не подчеркнутых ссылок, а это уже даёт неплохое поле для
деятельности.

Фиксирование шрифтов на странице с помощью таблицы стилей.

Предположим,
что Вы создали достаточно симпатичную страничку с малым количеством
графических элементов, текст у Вас расположен в таблице в две колонки.
Вы некоторое время любуетесь вашим творением, но тут приходит Ваш
приятель и погружает Вас в глубокое уныние, поставив в настройках
броузера более крупный шрифт. Вы видите, что страница приняла вид
весьма далёкий от того, что было задумано изначально. Что же делать?
Самый простой способ решения подобной задачи заключается в составлении
таблицы стилей для Вашего сайта. Эти таблицы относятся к каскадным
таблицам стилей (Cascading Style Sheets – CSS). Это означает, что при
определении стиля какого-нибудь элемента все элементы, находящиеся
внутри него, наследуют этот стиль.

Вот простейший пример таблицы стилей:

<style>
body
.text1 {text-decoration: none; font-family: arial, font-size: 10pt; font-weight : bold; color: red}
.text2 {font-family: sans-serif; font-size: 14pt; color: black;}
</style>

Обращение к элементам таблицы:
<div
class=text1>Стиль text1</div> - в этом случае фраза "Стиль
text1" будет напечатана красным жирным шрифтом Arial размером 10 pt.

Если же эту фразу сделать ещё и ссылкой, то она не будет подчёркнутой, так как text-decoration: none:

<a href=# class=text1>Стиль text1</a>

Аналогично

<div
class=text2>Стиль text2</div> - в этом случае фраза "Стиль
text2" будет напечатана чёрным шрифтом Sans-serif размером 14 pt.

Можно
не составлять таблицу стилей отдельно, а задать стиль непосредственно в
теге. Так, например, чтобы создать неподчёркнутую ссылку, необходимо её
реализовать в таком виде:
<a href=# style=" text-decoration: none;">Неподчеркнутая ссылка</a>

Неподчёркнутая ссылка

Преимуществом
реализации таких способов задания стилей является то, что всё
рассказанное выше работает как в Internet Explorer , так и в Netscape
Navigator. При этом даже если Вы поменяете настройки любого из этих
броузеров с целью увеличения или уменьшения размера шрифтов, то Вы
увидите, что они не изменяются, - использование стилей не позволяет
броузеру менять размеры шрифтов. Это является большим достижением CSS,
так как теперь Вы можете рассчитывать, что у большинства пользователей
страница будет отображаться именно так, как Вы и ожидаете этого.
Правда, применение CSS вовсе не спасает от изменения размеров системных
шрифтов Widows, но у большинства людей шрифт Normal. Если же
пользователь ставит крупный шрифт, то он увидит немалое количество
Интернет-страниц в неадекватном виде.