Динамический HTML. Каскадные листы стилей (Cascading Style Sheets)

Понятие динамический HTML

При помощи динамического HTML (или кратко DHTML) мы можем оживить статическую HTML-страничку, сделать ее интерактивной. При этом страничка будет «отвечать» на действия пользователя, производимые им в окне браузера. Многие свойства, описываемые в этом разделе, в значительной степени зависят от того, в каком браузере просматривается HTMLстраничка. Это всегда следует иметь в виду при разработке динамических HTML-страниц. Полезно создавать такие странички, которые будут приемлемо отображаться в большинстве браузеров.

Динамический HTML основан на возможности изменения свойств объектов. Практически каждому элементу HTML соответствует объект, который создается в браузере при загрузке HTML-страницы или другого документа, например, XML-документа. Каждый объект имеет свои свойства и методы. Конкретная реализация объектов зависит от типа и версии конкретного браузера, в который загружен исходный Web-документ, поэтому возможности динамического HTML в сильной степени зависят от браузера. Доступ к свойствам и методам объектов осуществляется при помощи языков сценариев. Для работы с объектами, создаваемыми в клиентских приложениях-браузерах, используется язык JavaScript и язык VBScript.

Помимо сценариев динамический HTML основывается также на таблицах стилей CSS и особенностях того или иного браузера.

DHTML не является каким-либо стандартом. Это некий (нефиксированный раз и навсегда) набор средств, позволяющих сделать клиентский Web-документ интерактивным, живым и динамичным. DHTML – это скорее рекламный термин, вошедший в обиход с момента создания четвертых версий браузеров IE и NN. Как правило, набор программных средств, используемых в динамическом HTML, включает в себя следующее:

- язык HTML 4.0;

- стили CSS (Cascading Style Sheets);

- объектную модель документа DOM;

- языки сценариев (JavaScript и/или VBScrit).

Объектная модель документа дополняется набором факультативных свойств и методов объектов, свойственных данному конкретному виду браузера. Введение в стили CSS

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

Листы стилей CSS (Cascading Style Sheets – каскадные листы стилей) используются для задания способов отображения HTML-элементов. Листы стилей используются также для задания способов отображения любых XML-элементов.

Положение элемента. При помощи свойства листов стилей position можно задать относительное или абсолютное положение элемента на странице в окне браузера.

Относительное положение position:relative. Свойство position:relative используется для задания положения элемента по отношению к текущему его положению (которое было бы, если бы не было указано свойство position:relative).

Свойство position:relative

h1 {position:relative;left:10;}

Данный пример задает стиль отображения элемента h1, т.е. элемента заголовка первого уровня, который описывается при помощи тэга <h1>. Заметим, что в классическом HTML не имеет значения, какие буквы мы используем – строчные или заглавные. Однако при работе с XML и XHTML следует тщательно следить за тем, чтобы правильно соблюдать регистр букв в написании элементов. Пример устанавливает сдвиг элемента вправо от первоначального неформатированного положения на десять пикселей (левый край сдвинут на 10 пикселей).

Чтобы задать абсолютное положение элемента используем свойство position:absolute.

Свойствоposition:relative

h1{position:absolute;left:10;}

Этот пример устанавливает левый край элемента h1 на расстоянии 10 пикселей от левой границы окна браузера.

В качестве примеров относительного (рисунке 21.1) и абсолютного (рисунке 21.2) позиционирования элементов приведем файлы prel.html и pabs.html. После сдвига влево на 20 пикселей заголовок вышел за границу окна браузера.

Рисунок 21.1 – Относительное смещение элементов

Файлprel.html

<html>

<head>

<style>

h1.example1{position:relative;left:40;}

h1.example2{position:relative;left:-20;}

</style>

</head>

<body>

<h1>Заголовок первого уровня</h1>

<h1 class=«example1»>Заголовок первого уровня со сдвигом +40</h1>
<h1 class=«example2»>Заголовок первого уровня со сдвигом -20</h1>

<p> Относительное позиционирование задает сдвиг относительно исходного неизмененного положения элемента. </p>

<p> «left:40» прибавить 40 пикселей к положению левой границы. </p>

<p> «left:-20» отнять 20 пикселей от положения левой границы. </p>

</body></html>

Файлpabs.html

<html>

<head>

<style>

h1.x {position:absolute;left:120;top:150;}

</style>

</head>

<body>

<h1 class=«x»>Заголовокпервогоуровня</h1>

<p>Абсолютное позиционирование позволяет разместить элемент в любом месте странички.</p>

<p>Заголовок смещен на 120 пикселей вправо и на 150 пикселей вниз.</p>

</body>

</html>

Рисунок 21.2 – Абсолютное позиционирование элемента

Видимость объектов. Свойство visibility позволяет указать, будет данный элемент видимым или нет. Допускается использование двух значений:

visibility:visible или visibility:hidden

Свойство visibility используется в следующем виде:

h1{visibility:visible;}

или

h1{visibility:hidden;}

В примере в файле visibility.html задано свойство видимости второго заголовка так, что он не будет видим на HTML-страничке (рис. 3).

Файл visibility.html

<html>

<head>

<style>

h1.1

{visibility:visible;}

h1.2

{visibility:hidden;}

</style>

</head>

<body>

<h1 class=«1»>Первый заголовок</h1>

<h1 class=«2»>Второй заголовок</h1>

<p>Второй заголовок невидим.</p>

</body>

</html>

Рисунок 21. 3 – Второй заголовок будет невидим

Свойство Z-index. Элементы (объекты) Web-страницы можно упорядочить, расположив их «одну над одной» («одну за одной»). Для этого элементы нумеруются при помощи свойства z-index. Элемент с большим значением свойства z-index имеет больший приоритет. Все значения должны быть целыми.

Свойство z-index устанавливается следующим образом:

{z-index:1;}

{z-index:2;}

Файлzindex.html

Файл zindex.html

<html>

<head>

<style>

img.x

{position:absolute;left:0;top:0;z-index:-1;}

</style>

</head><body>

<h1>Заголовок</h1>

<p>По умолчанию задается значение свойства z-index равное 0. Свойство Z-index равное -1 имеет меньший приоритет, чем то, что задано по умолчанию.</p>

</body>

</html>

На рисунке 21.4 мы видим, что рисунок расположен на заднем плане, поверх него виден текст. Это происходит потому, что z-index для рисунка меньше, чем для текста. По умолчанию задается параметр z-index равный 0. Чем больше z-index, тем «выше» расположен элемент в окне браузера. Значения свойства z-index не обязаны быть последовательными числами, но они должны быть обязательно целыми.

Рисунок 21.4 – Расположение z-index элементов

Если изменить приоритет и установить значение z-index равным 1, как показано ниже, то рисунок окажется на переднем плане и заслонит собой текст (рисунок 21.5).

Рисунок 21.5 – Приоритет рисунка выше, чем приоритет текста

Фильтры

При работы с изображениями удобно использовать фильтры. Фильтры позволяют создавать различные эффекты при отображении рисунков и других элементов. Свойство фильтров задается следующим образом:

{width:100%;filter:glow; }

На рисунке 21.6 показаны различные способы отображения элементов с использованием некоторых фильтров (файл filter.html).

<html>

<head>

<style>

{width:100%;}

</style>

</head>

<body>

<h1 style=«filter:glow()»>Сияние</h2>

<h1 style=«filter:blur()»>Растушевка</h2>

<h1 style=«filter:fliph()»>Горизонтальное отражение</h2>

<h1 style=«filter:flipv()»>Вертикальное отклонение</h2>

<h1 style=«filter:shadow()»>Простаятень</h2>

<h1 style=«filter:dropshadow()»>Отброшеннаятень</h2>

<h1 style=«filter:wave(Strength=2)»>Волна</h2>

<p>Фильтры не работают, если не задано значение свойства элемента width.</p>

</body>

</html>

Рисунок 21.6 – Фильтры, примененные к тексту

В примере (файл alpha.html) после помещения курсора на рисунке происходит постепенное повышение яркости изображения до максимального значения (рисунок 21.7). После того, как курсор будет убран с рисунка, изображение опять «погружается в туман».

Рисунок 21.7 – Прозрачность рисунка

Как мы уже убедились, фильтры можно применять к рисункам. Можно различными способами отображать один и тот же рисунок с применением фильтров, рисунок можно расположить в самостоятельном слое, который закрыт другим непрозрачным слоем с рисунком, для которого задана маска. При этом нижний рисунок становится виден через верхний рисунок

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

С помощью маски, которая создает эффект освещения, можно создать двигающийся эффект освещения, который воспринимается, как иллюзия движения шаровой молнии.

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

Вопросы для самоконтроля:

1. Что такое CSS?

2. С помощью какого дескриптора присоединяются внешние (или присоединяемые) стили?

3. Ставятся ли угловые скобки вокруг наименования тэга при написании правила стилей для этого тэга?

4. Как задаются классы стилей?

5. В чём преимущество задания классов стилей?

6. С помощью какого свойства (атрибута) описываются частные стили?

7. С помощью какого дескриптора описываются внутренние стили?

8. Что такое абсолютная ссылка?

9. Что такое относительная ссылка?

10. Для чего предназначен атрибут alt в тэге для вставки изображений?

11. Для чего предназначен атрибут title в тэге для вставки изображений?

12. Как можно задать размеры изображения с помощью атрибута style?

13. Как можно задать размещение изображения относительно текста по горизонтали с помощью атрибута style?

14. Понятие слоя в HTML?

15. С помощью каких правил для стилей создаются слои в HTML?

16. Приведите пример двух слоёв, частично перекрывающих друг друга?

17. Какое значение стиля z-index необходимо задать, чтобы описываемый этим стилем слой перекрывал все остальные слои при наложении?