Каскадные таблицы стилей

В этой главе вы научитесь пользоваться таблицами стилей, узнаете, как ими можно управлять с помощью языка JavaScript, и начнете создавать динамические Web-страницы.

Каскадные таблицы стилей (известные также как таблицы стилей, или CSS) являются одним из лучших средств форматирования HTML-документа. Помимо того, что CSS просты в применении, они позволяют добиться единообразного оформления всего Web-сайта.

В этой главе излагается следующая информация:

  • краткая история CSS;
  • общее представление о CSS;
  • способы взаимодействия CSS и JavaScript;
  • примеры совместного использования JavaScript и CSS.

Краткая история каскадных таблиц

Принятые Консорциумом W3C в декабре 1996 года в качестве стандарта CSS первого уровня были огромным шагом вперед, поскольку позволяли отделить содержание Web-страницы (текст, изображения и т.д.) от ее форматирования (макет и характеристики текста, например, информация о шрифтах). После этого язык HTML снова стал функционально-ориентированным (а не ориентированным на форму), что, однако, не мешало пользователям почти полностью контролировать вид страницы.

В мае 1998 года был принят стандарт CSS2, позволяющий разработчикам осуществлять контроль над Web-страницами на более высоком уровне. Этот стандарт основан на CSS первого уровня и включает некоторые новые функции, в частности, возможность точно располагать элементы и объекты Web-страницы, а также звуковые таблицы стилей, позволяющие специальному программному обеспечению считывать содержимое Web-страницы (что очень полезно для слабовидящих пользователей сети).

Примечание В одной книге невозможно описать CSS во всей их полноте - это достаточно объемная и сложная технология. В настоящем издании предлагается всего лишь введение в этот интересный предмет. Кроме того, множество полезной информации, касающейся CSS, имеется в сети. Ниже указаны ресурсы, предоставленные компанией Microsoft:

http://msdn.microsoft.com/workshop/author/css/ usmgcss.asp;
http://msdn.microsoft.com/workshop/author/css/ css.asp
http://msdn.microsoft.com/workshop/author/css/reference/ attributes.asp.

Компания Netscape предлагает информацию о CSS на следующем сайте:

http://developer.netscape.com/tech/css/.

Заметим, что эти адреса были верны во время написания книги, но впоследствии они могут измениться.

Рекомендация От вас не требуется всесторонних знаний о CSS. Тем не менее к концу главы вы освоите кое-какие приемы, которые сразу сможете использовать в своих Web-проектах.

Введение в CSS

Поначалу технология CSS может показаться сложной. Однако добавить CSS на Web-страницу так же просто, как и поместить новые атрибуты в существующие тэги HTML.

Пример. Рассмотрим простую Web-страницу:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1>Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Допустим, вы хотите с помощью CSS сделать заголовок подчеркнутым. Для этого нужно вставить атрибут стиля CSS в тэг <h1>:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 style="">Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации.</р>
</body>
</html>

Затем внутри кавычек добавляется атрибут CSS text-decoration:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->

</script>
</head>
<body>
<h1 style="text-decoration">Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации.</р>
</body>
</html>

И наконец, вам нужно указать значение атрибута. В данном случае требуется значение underline. Атрибуты и их значения отделяются друг от друга двоеточием.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 style="text-decoration:underline"> Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации. Здесь много интересной информации.
Здесь много интересной информации.</р>
</body>
</html>

А теперь сохраните страницу и откройте ее в браузере (см. рис. 13.1).

Рассмотрим несколько простых примеров. Некоторые из них пригодятся вам позже, когда вы будете изменять значения, присваиваемые атрибутам CSS.


Рис. 13.1. Пример использования CSS для подчеркивания заголовка

Пример 1. Изменение цвета надписи

В данном случае CSS используются для того, чтобы сделать красным цвет заголовка (см. рис. 13.2).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 style="color:red">Дo6po пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Далее приводятся названия других цветов, используемых CSS:

aqua (цвет морской волны) black (черный)
blue (голубой) fuchsia (фуксин)
gray (серый) green (зеленый)
lime (светло-зеленый) maroon (красно-коричневый)
navy (темно-синий) olive (оливковый)
purple (пурпурный) red (красный)
silver (серебристо-серый) teal (сине-зеленый)
white (белый) yellow (желтый)



Рис. 13.2. Пример использования СSS изменения цвета заголовка

Упражнение Попробуйте создать собственные примеры с использованием этих цветов.

Пример 2. Форматирование текста

Вы уже поняли, как можно использовать CSS, чтобы подчеркнуть текст или изменить его цвет. Возможно и многое другое. Для начала используем в тексте полужирный шрифт, курсив, зачеркивание и надстрочную черту с помощью нескольких атрибутов CSS (см. рис. 13.3).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<hl style="text-decoration:underline">Дo6po пожаловать на нашу страницу!</hl>
<р>Это<span style="font-weight:bold">полужирный</span> шрифт.</р>
<р>Это <span style="font-style:italic">курсив</span>.</р>
<р>Это <span style="text-decoration:overline">черта сверху</span>
- не поддерживается в браузере Netscape Navigator 4.</p>
<р>Это <span style="text-decoration:line-through">зачеркивание</span>.</р>
<р>Это <span style="text-transform:uppercase">Bepхний</span>
регистр.</р>
<р>Это <span style="text-transform:lowercase">НИЖНИЙ</span>
регистр.</р>
</body>
</html>


Рис. 13.3. Текстовые эффекты CSS в браузере Internet Explorer 5

Все эти эффекты CSS прекрасно выполняются в браузере Internet Explorer 5.

Эффекты поддерживаются и браузером Netscape Navigator 6 (см. рис. 13.4).

Однако в браузере Netscape Navigator 4 не действует эффект надстрочной черты (см. рис. 13.5).

Обратите внимание, что задание формата CSS выполняется внутри тэга HTML <span>. Этот тэг удобно использовать в тех случаях, когда нужно применить CSS к ограниченному фрагменту текста. Тэг <span> является контейнерным элементом и не присваивает тексту никакого форматирования. Таким образом, он идеально подходит для вышеуказанных целей.

Упражнение Поэкспериментируйте с атрибутами CSS в собственных проектах, особенно если эти атрибуты являются новыми для вас. Потренируйтесь в использовании тэга <span>.


Рис. 13.4. Текстовые эффекты CSS в браузере Netscape Navigator 6


Рис. 13.5. В браузере Netscape Navigator 4 эффект overline не выполняется

Еще одно интересное применение CSS - изменение формата гиперссылок. Эта методика отличается от того, что вы делали до сих пор. На этот раз вы переходите от встроенных CSS к тем, которые относятся ко всему документу и помещаются в блоке STYLE заголовка. Заметим, что информация о стиле встроенных CSS располагается непосредственно в тэгах, так что в данном случае слово «встроенный» имеет то же значение, что и в языке JavaScript.

Пример 3. Форматирование гиперссылок

Давайте поэтапно рассмотрим процесс создания более эффектных гиперссылок.

Шаг 1. Создание страницы с гиперссылками

<html>
<head>
<title>span</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 style="text-decoration:underline">Дo6po пожаловать на нашу страницу!</hl>
<a href="http://www.mcp.соm>Гиперссылка.</а>
<br>
<a href="http://www.kingsley-hughes.com">Еще одна гиперссылка.</а>
</body>
</html>

Шаг 2. Использование блока STYLE

Блок STYLE во многом похож на блок SCRIPT. Они размещаются в блоке HEAD и требуют тэгов комментариев HTML, чтобы скрыть их содержимое от старых версий браузеров, не использующих CSS. Однако на этом все сходство заканчивается. Вы не можете поместить сценарий JavaScript в блоке STYLE (или информацию CSS в блоке SCRIPT).

Многие разработчики, постоянно использующие CSS, включают блок STYLE в свои шаблоны HTML:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</ script>
<style>
<!--

-->
</style>
</head>
<body>
</body>
</html>

Это прекрасная идея, но будьте предельно внимательны: если вставить сценарий JavaScript не в тот блок, он не будет выполняться (то же самое происходит, если поместить информацию CSS в блоке SCRIPT). Если вы применяете подобный шаблон, следите, чтобы соответствующие блоки использовались по назначению.

Итак, вы добавляете в блок STYLE следующий код:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
<style>
<!--

-- >
</style>
</head>
<body>
<hl style=" text-decoration: underline">Добро пожаловать на нашу страницу!</hl>
<а href="http://www.mcp.сот">Гиперссылка.</а>
<br>
<а href="http://www.kingsley-hughes.сот">Еще одна гиперссылка.</а>
</body>
</html>

Шаг 3. Использование атрибутов CSS

Для применения к гиперссылкам специальных эффектов используется несколько атрибутов CSS:

  • a:hover - стиль гиперссылки изменяется, когда посетитель наводит на нее курсор. Ссылка принимает обычный вид, когда курсор убирается. Этот эффект не действует в браузере Netscape Navigator 4;
  • a:active - стиль гиперссылки изменяется, когда посетитель щелкает по ней левой кнопкой мыши;
  • a:visited - стиль гиперссылки изменяется после того, как посетитель воспользовался ею;
  • a:link - определяется стиль гиперссылки, которой посетитель еще не пользовался.

В следующем коде применяется атрибут а: hover. Чтобы стиль гиперссылки изменялся при наведении на нее курсора, нужно вписать название указанного атрибута в блок STYLE:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<!--
a:hover
-->
</style>
</head>
<body>
<hl style=" text -decoration: under line ">Добро пожаловать на нашу страницу!</h1>
<а href="http://www.mcp.сот">Гиперссылка.</а>
<br>
<a href="http://www.kingsley-hughes.сот">Еще одна гиперссылка.</а>
</body>
</html>

Шаг 4. Изменение гиперссылки

Наконец, вы добавляете информацию CSS о том, каким образом должна измениться гиперссылка. Данные о стиле размещаются внутри фигурных скобок после атрибута а: hover. Обратите внимание на сходство с JavaScript.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --
a:hover { }
</style>
</head>
<body>
<hl style=" text-decorat ion: under1ine">Добро пожаловать на нашу страницу! </hl>
<а href="http://www.mcp.сот">Гиперссылка.</а>
<br>
<a href="http://www.kingsley-hughes.com">Еще одна гиперссылка.</а>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --
a:hover {color:red}
</style>
</head>
<body>
<hl style=" text-decoration: underline">Добро пожаловать на нашу страницу !</hl>
<а href="http://www.mcp.соm">Гиперссылка.</а>
<br>
<a href="http://www.kingsley-hughes.сот">Еще одна гиперссылка.</а>
</body>
</html>

Допустим, вы хотите применить к гиперссылке эффект надстрочной черты. Добавьте строку text-decoration: overline после первой пары «атрибут:значение» (

color: red

) и разделите эти пары точкой с запятой:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --
a:hover {color:red; text-decoration:overline}
-->
</style>
</head>
<body>
<hl style="text-decoration:underline">Дo6po пожаловать на нашу страницу!</hl>
<а href="http://www.mcp.сот">Гиперссылка.</а>
<br>
<a href="http://www.kingsley-hughes.сот">Еще одна гиперссылка.</а>
</body>
</html>

Шаг 5. Сохранение Web-страницы и просмотр ее в браузере.

На рис. 13.6, 13.7 и 13.8 представлен вид страницы в браузерах Internet Explorer 5, Netscape Navigator 4 и Netscape Navigator 6.

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


Рис. 13.6. Гиперссылки в браузере Internet Explorer 5

Пример 4. Позиционирование

Одно из самых полезных новшеств динамического HTML - это возможность точно контролировать размещение текста и изображений на странице. Поначалу у компаний Netscape и Microsoft имелись совершенно разные, противоположные подходы к решению этой задачи. Компания Netscape предпочла использовать атрибуты, добавляемые в тэг <1ауег>, и осуществлять позиционирование с помощью HTML, в то время как Microsoft выбрала для этой цели технологию CSS.


Рис. 13.7. Гиперссылки в браузере Netscape Navigator 4


Рис. 13.8. Гиперссылки в браузере Netscape Navigator 6

Сначала оба этих стандарта соперничали между собой, но Консорциум W3C принял подход компании Microsoft, после чего метод компании Netscape перестал использоваться. Следует отметить, что браузер Netscape Navigator 4 поддерживает большинство функций позиционирования CSS. Это позволяет разработчикам использовать данную технологию для создания HTML-страниц, действующих в обоих браузерах.

Пример. Сначала необходимо рассмотреть, каким образом осуществляется позиционирование текста. Ниже приводится код простой Web-страницы, над которым будет производиться последующая работа:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --
-- >
</style>
</head>
<body>
<hl style=" text -decoration: underline">Добро пожаловать на нашу страницу! </hl>
<р>Простой текст для позиционирования.</р>
</body>
</html>

Наиболее часто применяются следующие атрибуты позиционирования:

  • position - имеет два интересующих нас значения: absolute и relative. Разница между ними небольшая. Для значения absolute в качестве точки отсчета используется верхний левый угол окна браузера, и все параметры местоположения отмеряются от него. В свою очередь, для relative точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было представлено никакой информации о местоположении;
  • top - используется для указания вертикального смещения элемента от точки отсчета. Величина смещения может выражаться в различных единицах (пикселы, дюймы, сантиметры, миллиметры и т.п.). В наших примерах используются пикселы. Положительное значение top соответствует смещению элемента страницы вниз, в то время как отрицательное - по направлению к верхней границе окна браузера;
  • left - подобен атрибуту top, но применяется для указания горизонтального направления. Положительное значение соответствует сдвигу элемента вправо, отрицательное - влево.

Пример. Информацию CSS, как вы знаете, можно либо помещать в блок STYLE, либо встраивать. Ниже приводится пример использования встроенной информации.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<!--

-->
</style>
</head>
<body>
<hl style=" text-decoration: underline">Добро пожаловать на нашу страницу!</hl>
<р style="position:absolute;top:125px;left:200рх">Простой текст для позиционирования.</р>
</body>
</html>

Итак, что осуществляется с помощью CSS в этом примере? Прежде всего, текст перемещен со значением absolute, то есть его положение отсчитывается от верхнего левого угла окна браузера. Значение атрибута top равно 125рх, таким образом, текст будет расположен на 125 пикселов ниже верхнего края страницы. Значение атрибута left равно 200рх, то есть текст будет сдвинут на 200 пикселов от левого края окна браузера.

На рис. 13.9, 13.10 и 13.11 показаны результаты выполнения примера в каждом из браузеров.


Рис. 13.9. Позиционирование текста в браузере Internet Explorer 5


Рис. 13.10. Позиционирование текста в браузере Netscape Navigator 4


Рис. 13.11. Позиционирование текста в браузере Netscape Navigator 6

Пример. То же самое можно делать и с изображениями:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
// Снимаем маскировку. -->
</script>
<style>
<!--
-->
</style>
</head>
<body>
<hl style="text-decoration: underline">Добро пожаловать на нашу страницу!</h1>
<img src="circle.gif"
style="position:absolute;top:125px;left:200px">
</body>
</html>

Этот метод действует в браузерах Internet Explorer 5 и Netscape Navigator 6, но не выполняется в Netscape Navigator 4 (см. рис. 13.12, 13.13 и 13.14).


Рис. 13.12. Позиционирование изображения в браузере Internet Explorer 5

Пример. Но если вы попробуете использовать такой метод, то все получится:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --
-->
</style>
</head>
<body>
<hl style=" text-decoration: under1ine">Добро пожаловать на нашу страницу!</hl>
<div style="position:absolute;top:125px;left:200px">
<img src="circle.gif">
</div>
</body>
</html>

В данном примере используется еще один контейнерный элемент - тэг <div> - для охвата изображения (см. рис. 13.15).


Рис. 13.13. Позиционирование изображения не выполняется в браузере Netscape Navigator 4

Пример. Если же вместо значения absolute воспользоваться значением relative, то появятся некоторые различия. Изображение, позиционированное относительным методом, на странице расположено ниже, чем позиционированное абсолютным (см. рис. 13.6).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<!--
-- >
</style>
</head>
<body>
<hl style="text-decoration:underline">Добро пожаловать на нашу страницу!</hl>
<div style="position:relative;; top:125px;left:200px">
<img src="circle.gif">
</div>
</body>
</html>


Рис. 13.14. Позиционирование изображения в браузере Netscape Navigator 6

Причина того, что изображение на странице расположено ниже, заключается в другой точке отсчета (от которой браузер отмеряет сдвиг изображения). В данном случае это точка, в которую было бы помещено изображение, если бы отсутствовала информация CSS. Этот метод удобен, если вы хотите ввести отступы, например создать полосу границы в виде идентичных изображений в нескольких пикселах друг от друга.


Рис. 13.15. Позиционирование изображения в браузере Netscape Navigator 4


Рис. 13.16. Изображение, позиционированное относительным методом

Пример 5. Работа в трехмерном пространстве - 2.5D

В 2.5D можно не только сдвигать текст и изображения в горизонтальном и вертикальном направлениях, но и контролировать наложение элементов.

Обычно в языке HTML наложение объектов определяется порядком их размещения в коде. Если элемент указывается в коде позже, то он будет располагаться сверху.

Пример. В данном примере изображение будет наложено поверх текста (см. рис. 13.17).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<!--

-->
</style>
</head>
<body>
<hl style="position:absolute;top:15px;left:lOpx; text-decoration:underline"> Добро пожаловать на нашу страницу!</hl>
<div style="position:absolute;top:15px;left:200px">
<img src="circle.gif">
</div>
</body>
</html>


Рис. 13.17. Очередность наложения элементов в HTML

Пример. Порядок наложения элементов можно изменить простой перестановкой строк в коде HTML (см. рис. 13.18).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<!--

-->
</style>
</head>
<body>
<div style="position:absolute;top:15px;left:200px">
<img src="circle.gif">
</div>
<hl style="position:absolute;top:15px;left:lOpx; text-decoration:underline"> Добро пожаловать на нашу страницу!</hl>
</body>
</html>


Рис. 13.18. Изменение порядка наложения элементов

Этот метод малоэффективен и отличается большой трудоемкостью. Гораздо удобнее применять для этой цели атрибут CSS z-index. Его значениями являются числа, и элемент с более высоким номером оказывается наверху. То есть, слегка подправив предыдущий пример, вы можете изменить естественный порядок вещей

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
<style>
<! --

-- >
</style>
</head>
<body>
<div style="posit ion:absolute;top:15px;left:200px; z-index:2">
<img src="circle.gif">
</div>
<hl style="position:absolute;top:15px;left:lOpx; text-decoration:uiiderline; z-index:1">Добро пожаловать на нашу
страницу!</h1>
</body>
</html>

Если судить по коду HTML, то сверху должен располагаться текст. Однако в окне браузера сверху оказывается изображение (см. рис. 13.19).


Рис. 13.19. Использование атрибута z-index

JavaScript и CSS

Итак, было рассмотрено несколько примеров использования CSS. Объединение их с JavaScript открывает совершенно новые горизонты. Необходимо запомнить, что для изменения значений атрибутов CSS всегда применяется JavaScript. Теперь это делается после загрузки страницы, и пользователь наблюдает изменение объектов непосредственно в браузере - вот что такое динамический HTML.

Пример. Воспользуемся ранее рассмотренным примером изменения цвета текста.

Примечание Этот пример будет выполняться только в браузере Internet Explorer 4 или в более поздней версии.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript ">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 style="color:red">Дo6po пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Допустим, вы хотите, чтобы текст заголовка только тогда становился красным, когда пользователь наводит на него курсор. Этого можно добиться с помощью CSS и JavaScript.

Шаг 1. Удаление существующей информации о стиле

Это действие может показаться вам шагом назад, но оно действительно необходимо:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1>Добро пожаловать на нашу страницу! </h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Шаг 2. Добавление идентификатора

Поскольку вам нужно как-то обращаться к элементу, с которым будут производиться манипуляции, необходимо в тэг <hl> добавить атрибут id. id - это краткое обозначение, позволяющее указать нужный элемент:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<hl id="headl">Дo6po пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Шаг 3. Добавление обработчика событий

Следующий шаг — добавление обработчика событий. Это требуется, чтобы определить, когда именно пользователь наводит на заголовок курсор. Этому действию соответствует событие onMouseover. Также следует указать имя функции, которая будет вызываться при выполнении события:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 id="headl" onMouseover ="colorchange ()">Добро пожаловать на нашу
страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Шаг 4. Написание сценария JavaScript

Вот и наступил самый интересный момент - написание сценария JavaScript.

Сначала необходимо добавить в код каркас функции:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function colorchange()
{
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 id="headl" onMouseover="colorchange()">Добро пожаловать на
нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Теперь очередь дошла и до сценария JavaScript. Вам потребуется единственная строка, состоящая из следующих частей:

  • место на странице, где должен выполняться ваш сценарий - в данном случае headl;
  • применяемый аспект JavaScript - в данном случае style;
  • атрибут стиля, который будет изменяться - в данном случае color;
  • новое значение, принимаемое атрибутом стиля - в данном случае red.

Соедините это, и получится следующая строка:

head1.style.color = "red"

Добавьте ее в функцию и сохраните файл. В окончательном варианте страница должна выглядеть так:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function colorchange()
{
headl.style.color = "red";
}
//Снимаем маскировку. -->
</script>
</head>
<body>
<h1 id="head1" onMouseover="colorchange()">Добро пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Откройте эту страницу в браузере и посмотрите, что происходит, когда вы наводите курсор на заголовок. Если все было сделано правильно, то цвет заголовка изменится.

Но обратите внимание, что цвет текста не становится прежним, когда вы убираете курсор с заголовка (см. рис. 13.20). Вам нужно создать еще одну функцию JavaScript, которая будет выполняться при отводе курсора. Этому соответствует событие onMouseout.


Рис. 13.20. Совместное использование JavaScript и CSS

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function colorchange()
{
headl.style.color = "red";
}
function colorchangeback()
{
headl.style.color = "black";
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl id="headl" onMouseover="colorchange()"
onMouseout="colorchangeback()">Добро пожаловать на нашу
страницу!</hl>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Пример. Давайте рассмотрим еще один пример - на этот раз с использованием атрибута text-decoration.

Предупреждение Используя в сценариях JavaScript атрибуты, название которых пишется через дефис, убирайте дефис и пишите оба слова слитно, причем второе слово должно начинаться с заглавной буквы. Таким образом, text-decoration в сценариях должно выглядеть как textDecoration.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function addunderline()
{
headl.style.textDecoration = "underline";
}
function removeunderline()
{
headl.style.textDecoration = "none";
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<h1 id="headl" onMouseover="addunderline()"
onMouseout="removeunderline()">Добро пожаловать на нашу страницу! </h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Предупреждение Необходимо обратить внимание на прописную букву в слове textDecoration — если все слово набрать в нижнем регистре, сценарий выполняться не будет. Теперь при наведении курсора заголовок станет подчеркнутым, а затем, если убрать курсор, вернется в прежнее состояние.

Пример. Вы можете взять другие значения атрибута text-decoration и потренироваться в использовании событий. В данном примере после выполнения события onclick к заголовку применяется эффект overline (см. рис. 13.21).

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function addunderline()
{
headl.style.textDecoration = "underline";
}
function removeunderline()
{
headl.style.textDecoration = "none";
}
function addoverline()
{
headl.style.textDecoration = "overline";
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl id="headl" onMouseover="addunderline()"
onMouseout="removeunderline()" onClick="addoverline()">Добро
пожаловать на нашу страницу!</h1>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Пример. Наконец, сделайте так, чтобы после выполнения события onDblclick (двойной щелчок мыши) заголовок стал зачеркнутым. Результат показан на рис. 13.22.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function addunderline()
{
headl.style.textDecoration = "underline";
}
function removeunderline()
{
headl.style. textDecoration = "none";
}
function addoverline()
{
headl.style.textDecoration = "overline";
}
function addlinethrough()
{
headl.style.textDecoration = "line-through";
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<hl id="headl" onMouseover="addunderline()"
onMouseout="removeunderline() "onClick="addoverline()"
onDblclick="addlinethrough()">Добро пожаловать на нашу
страницу!</hl>
<р>3десь много интересной информации. Здесь много интересной
информации. Здесь много интересной информации. Здесь много
интересной информации. Здесь много интересной информации.</р>
</body>
</html>

Создание анимационных объектов

Вот и дошла очередь до еще одной интересной темы - использования CSS и JavaScript для создания анимационных объектов на Web-странице. И самое замечательное здесь то, что пользователю не нужно при этом ничего загружать из сети или приобретать дополнительные модули, потому что все уже есть в браузере.

Что такое анимация

Анимация - это процесс «оживления» картинки. Поскольку в мире компьютеров все, происходящее на экране, управляется лучом света, давайте рассмотрим, как и почему объекты кажутся движущимися.

Анимация включает в себя две составляющие: расстояние между соседними кадрами, называемое скачком (jump), и временной промежуток между двумя последовательными скачками, называемый интервалом (interval). При больших скачках и длительных интервалах анимация выглядит медленной и грубой. Движение объектов кажется неестественным и воспринимается как мелькание. При малых скачках и кратких интервалах анимация выглядит более плавной, хотя, если чересчур увлечься, движение покажется нарочитым. Здесь открывается простор для экспериментов, и единого рецепта на все случаи жизни попросту не существует.


Рис. 13.21. Эффект overline, добавляемый при выполнении события onClick


Рис. 13.22. Эффект зачеркивания

В мире компьютеров для измерения скачка можно применять различные единицы, но лучше всего использовать пикселы. Это наименьшая единица измерения, приложимая к любому монитору и позволяющая снизить вероятность ошибок. Что касается интервалов, то их лучше измерять в миллисекундах (тысячных долях секунды).

Примечание Изображение на экране телевизора обновляется 24 раза в секунду, или приблизительно через 40 мс. Это настолько малый промежуток времени, что человеческий глаз не способен уловить скачки изображения и поэтому движение кажется таким плавным. Но если вы снимете экран телевизора на видеокамеру, этот процесс станет зримым.

Основная проблема заключается в имеющихся различиях между браузерами Internet Explorer и Netscape Navigator. Самое обидное, что Navigator 4 и Navigator 6 тоже разнятся!

Чтобы не усложнять и без того запутанную ситуацию, давайте применим два подхода - отдельно для Internet Explorer 5 и Netscape Navigator 4. Таким образом, будет охвачена большая часть пользователей и вы легче найдете применение рассмотренным здесь примерам.

Анимация в браузере Internet Explorer 5

Пример. Сначала выберите Web-страницу, на которой требуется применить анимацию. В данном примере текст будет перемещаться слева направо:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<div>
Текст, шагом марш!
</div>
</body>
</html>

Сначала следует ввести в тэге <div>, ограничивающем текст, идентификатор id и дать ему название, по которому впоследствии легко будет его отыскать.

<html>
<head>
<title>Простая страница</title>
<script language= "JavaScript" >
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil">
Текст, шагом марш!
</div>
</body>
</html>

Затем воспользуемся CSS, чтобы поместить текст в начальное положение:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!

// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute;left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Теперь применим функцию JavaScript. Сначала следует вставить в сценарий ее каркас. Функция будет называться moveTxt ().

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt( )
{
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Далее начинаем работать над сценарием JavaScript. Поскольку не нужно, чтобы текст вечно двигался вправо, надо предусмотреть возможность контролирования этого процесса. Чтобы запустить сценарий на выполнение только при условии, если текст находится, например, менее чем в 500 пикселах от левой границы экрана, удобнее всего воспользоваться оператором if. Для этого понадобится атрибут CSS pixelLeft.

Рекомендация Не забудьте добавить второй набор фигурных скобок для операторов, которые будут выполняться, если условие оператора if истинно.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelLeft < 500)
{

}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Теперь рассмотрим операторы, управляющие анимацией. Прежде всего нужно задать скачок. Каждый раз текст будет перемещаться вправо на два пиксела. Атрибут pixelLeft используется не только для определения положения текста, но и для изменения положения на два пиксела:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelLeft < 500)
{
anil.style.pixelLeft +=2;
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10;top:10">
Текст, шагом марш!
</div>
</body>
</html>

Далее речь пойдет об интервале. Он задается с помощью метода setTimeout, позволяющего вновь запустить функцию после истечения определенного промежутка времени. Давайте установим интервал до повторного запуска функции moveTxt (), равным 50 мс:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelLeft < 500)
{
anil.style.pixelLeft +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Процесс будет повторяться до тех пор, пока условие оператора if не станет ложным. Последнее, что нужно сделать, - запустить сценарий на выполнение. Для этого следует воспользоваться событием onLoad:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelLeft < 500)
{
anil.style.pixelLeft +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Сохраните файл и откройте его в браузере Internet Explorer (см. рис. 13.23).


Рис. 13.23. Перемещение текста

Анимация в браузере Netscape Navigator 4

Пример. Если вы хотите создать анимацию в браузере Netscape Navigator 4, вернитесь к тому моменту, когда вы собирались добавить операторы в функцию JavaScript в примере, предназначенном для браузера Internet Explorer.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>>
</body>
</html>

Как и в предыдущем примере, вам нужно добавить оператор if. Но на этот раз синтаксис выражения будет несколько иным (расхождение, вызванное несовместимостью браузеров):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (document.anil.left < 500)
{
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute;left:10;top:10">
Текст, шагом марш!
</div>
</body>
</html>

Следующий оператор тоже будет не совсем таким, как в примере, предназначенном для браузера Internet Explorer. Однако метод setTimeout остается неизменным.

<html>
<head>
<title> Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (document.anil.left < 500)
{
document.anil.left +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

И напоследок добавьте событие onLoad:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (document.anil.left < 500)
{
document.anil.left +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute;left:10;top:10">
Текст, шагом марш!
</div>
</body>
</html>

Откройте этот пример в браузере Netscape Navigator 4. Результат должен быть подобен результату предыдущего примера, предназначенного для браузера Internet Explorer.

Как сделать сценарий совместимым с обоими браузерами

На первый взгляд, подобное кажется неосуществимым. Однако, как вы увидите дальше, сценарий вполне может быть выполнен в обоих браузерах.

Пример. Чтобы добиться этого, нужно всего лишь воспользоваться различиями между браузерами. В Internet Explorer существует объект, известный как document.all. Итак, если применить для проверки оператор if, то можно выяснить, имеете ли вы дело с браузером Internet Explorer 5 или Netscape Navigator 4.

<script language="JavaScript">
<!-- Маскируемся!
function someFunction()
{
if (document.all)
{
//Выражение истинно, следовательно, пользуемся операторами для IE5.
}
else
{
//Выражение ложно, следовательно, пользуемся операторами для NN4.
}
}
// Снимаем маскировку. -->
</script>

Таким образом вы создаете универсальный сценарий JavaScript, совместимый с обоими браузерами, просто копируя необходимые строки из отдельных примеров и вставляя их в этот шаблон:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript ">
<!-- Маскируемся!
function moveTxt()
{
if (document.all)
{
if (anil.style.pixelLeft < 500}
{
anil.style.pixelLeft +=2;
setTimeout("moveTxt(}", 50);
}
}
else
{
if (document.anil.left < 500)
{
document.anil.left +=2;
setTimeout("moveTxt()", 50};
}
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Таким образом, отдельные сценарии для браузеров Internet Explorer и Netscape Navigator можно объединить с помощью оператора if.

Откройте пример в обоих браузерах и взгляните на результат.

Упражнение Используя предыдущий пример, создайте сценарий, в котором текст будет двигаться в противоположном направлении — справа налево. Не забудьте, что вам придется изменить начальное положение текста и место остановки. Кроме того, вместо увеличения количество пикселов нужно уменьшать.

Перемещение по вертикали

Чтобы текст перемещался не в горизонтальном направлении, а вверх или вниз, нужно воспользоваться вместо атрибута pixelLeft атрибутом pixelTop.

Пример. Ниже приводится слегка измененный пример сценария, предназначенного для браузера Internet Explorer:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelTop < 500)
{
anil.style.pixelTop +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

А теперь то же самое следует повторить для браузера Netscape Navigator. В данном случае вместо атрибута left используется атрибут top:

<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (document.anil.top < 500)
{
document.anil.top +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Упражнение Сделайте из этих двух сценариев один, совместимый с обоими браузерами.

Перемещение по диагонали

Перемещение по диагонали складывается из движений по горизонтали и по вертикали в каждом цикле. В следующем примере текст будет перемещаться из верхнего левого в правый нижний угол страницы.

Пример. Давайте сначала рассмотрим вариант для браузера Internet Explorer 5:

<html>
<head>
<itle>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (anil.style.pixelTop < 500)
{
anil.style.pixelTop + = 2;
anil.style.pixelLeft +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

И то же самое приводится для браузера Netscape Navigator 4:

<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function moveTxt()
{
if (document.anil.top < 500)
{
document.anil.top +=2;
document.anil.left +=2;
setTimeout("moveTxt()", 50);
}
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш!
</div>
</body>
</html>

Примечание Значение атрибутов top или left можно использовать в управляющем выражении, которое будет определять движение объекта и содержаться в операторе if.

Упражнение Попытайтесь создать пример, который будет выполняться в обоих браузерах.

И снова о JavaScript

Вы заметили, как свободно вы пользовались языком JavaScript в последних примерах? Дело в том, что, объединяя известную вам технологию (JavaScript) с технологией менее известной (CSS), вы применяли знакомые операторы JavaScript.

Освоив в общих чертах язык подготовки сценариев и потратив некоторое время на изучение основ, вы можете применять полученные навыки и для решения более сложных задач, поскольку в языке JavaScript соединяются все разнообразные технологии, входящие в состав DHTML.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz