База данных для веб-мастеров: Библиотека

Так уж создан человек, что он всегда стремится к чему-нибудь оригинальному. Изначально броузеры показывали все ссылки подчёркнутыми для большего удобства. Сразу же у создателей web-страничек возник вопрос, как же сконструировать не подчёркнутую ссылку. Аналогичная история произошла и со шрифтами: в настройках броузера можно установить размер шрифта. Так нет же – в web-дизайне сразу появилась задача: как запретить пользователю менять размеры шрифтов. Другими словами, на протяжении всего времени существования Интернета идёт непримиримая война между производителями броузеров и производителями сайтов. Естественно, мы сейчас встанем на защиту второй стороны и расскажем о некоторых приёмах, позволяющих не только зафиксировать шрифт на вашей страничке, но и удивить пользователя внезапно появившейся рамкой у таблицы или подкрашенной ячейкой.

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

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

Приведём простейший пример таблицы стилей:

Работающий вариант:

Стиль text1

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

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

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

Аналогично

Работающий вариант:

Стиль text2

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

Создание динамических элементов страницы с помощью CSS.

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

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

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

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

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

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

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

Работающий вариант:
Класс group1
Класс group2

В этом случае ссылки, для которых указан класс 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, чтобы реализовать что-то подобное, требуется либо использовать графические элементы, либо слои. Однако фиксация шрифтов работает и для того и для другого броузера так же, как и реализация неподчёркнутых ссылок, а это уже даёт неплохое поле для деятельности.

Удачного творчества!