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

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

<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. Если же пользователь ставит крупный шрифт, то он увидит немалое количество Интернет-страниц в неадекватном виде.