ДИНАМИЧЕСКИЙ HTML

• Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым

• Реализация DHTML основывается на: непосредственно HTML, каскадных таблицах стилей (cascade style sheets – CSS) и языке сценариев (JavaScript или VBScript)

ДИНАМИЧЕСКИЙ HTML

Каскадные таблицы стилей (Cascade Style Sheets – CSS)

Каскадные таблицы стилей предоставляют удобный способ добавления к web-страницам сложных атрибутов форматирования

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

Можно создать таблицу стилей и использовать её для всех документов, расположенных на сервере, что придаст стройность и строгость всему web-сайту

Таблица стилей – это набор правил, который управляет форматированием тэгов HTML в web-документе

Правило каскадных таблиц стилей

Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения

селектор {определение}

Селектор – любой тэг HTML Определение также состоит из двух частей: свойства и его

значения, разделенных знаком двоеточия (:) В одном правиле можно задать несколько определений,

разделённых символом точка с запятой (;)

селектор {свойство1: значение1;свойство2: значение2; …}

Синтаксис правил каскадных таблиц стилей не чувствителен к регистру (селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке)

Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется

Встраивание таблиц стилей в документ

1. СвязываниеТаблица стилей храниться в отдельном файлеПрисоединяется с помощью тэга <LINK> в разделе HEAD

<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">

2. ВнедрениеТаблица стилей задаётся в стилевом блоке в разделе HEADИспользуется тэг <STYLE>

<STYLE TYPE="text/css">селектор {свойство: значение}

…</STYLE>

3. ИмпортированиеВ тэге <STYLE> можно импортировать внешнюю таблицу стилей

STYLE TYPE="text/css">@import: URL (адрес css);

</STYLE>

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

<Н1 STYLE= "color: red">3аголовок отображается красным цветом

</Н1>

Группирование

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

H1 {font-family: Arial}H2 {font-family: Arial}H3 {font-family: Arial}

Можно задать в виде

H1, H2, Н3 {font-family: Arial}

Можно группировать свойства элемента

H1 {font-weight: bold} H1 {font-size: 14pt}

H1 {font-family: Arial}

Можно задать в виде

H1 {font-weight: bold; font-size: 14pt; font-family: Arial}

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

H1 {font: bold 14pt Arial}

Селекторы

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

<STYLE TYPE="text/css">H1 {color: red}

</STYLE>

Для одного тэга можно создавать различные классы

<STYLE TYPE="text/css">H1.red {color: red}H1.blueBgrd {color: red; background-color: blue}

</STYLE>

Использование классов

В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS

<Н1 CLASS="red">Красный шрифт

</Н1><Н1 CLASS="blueBgrd">

Красный шрифт на синем фоне</Н1>

Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента

<STYLE TYPE="text/css">.red {color: red}.blueBgrd {color: red; background-color: blue}

</STYLE>

<Н1 CLASS="red">Красный шрифт

</Н1><P CLASS="blueBgrd">

Красный шрифт на синем фоне</P>

В качестве селектора можно использовать уникальное идентификационное имя элемента, предваряя его символом #

<STYLE TYPE="text/css">#par24 {letter-spacing: 1 em}H1#form3 {color: red; background-color: blue}

</STYLE>

<Н1 ID=form3>Красный шрифт на синем фоне</Н1>

<P ID=par24>Разреженные слова в абзаце

</Р>

Свойства форматирования элементов

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

1. Шрифт2. Цвет и фон3. Текст4. Блок5. Визуальное форматирование6. Печать7. Фильтры и переходы8. Псевдоклассы и другие свойства

Единицы измерения, используемые для задания значений свойств

Относительные единицы измерения

Абсолютные единицы измерения

em - высота элемента шрифта

in - дюйм (1 in = 2.54 cm)

ex - высота буквы cm – сантиметр

px - пиксел mm – миллиметр

% - процент pt - пункт (1pt= 1/72 in)

рс - пика (1 рс = 12 pt)

Шрифты

Шрифты различаются повнешнему виду (начертанию)размерустилю (прямой, курсив или наклонный)"жирности" отображения (нормальный,

полужирный)

Определение шрифта

Свойство font-family задаёт приоритетный список шрифтов

body {font-family: Impact, "Times New Roman", serif}

типовые семейства шрифтов1. serif (например, Times)2. sans-serif (например, Helvetica)3. cursive (например, Zapf-Chancery)4. fantasy (например, Western)5. monospace (например, Courier)

Стиль шрифта

Свойство font-style определяет стиль шрифта1. normal2. italic3. oblique

font-variant - шрифт капитель (small-caps)

H1 {font-style: normal} H2 {font-style: italic}H3 {font-style: oblique}Н4 {font-variant: small-caps}

Жирность шрифта

Свойство font-weight выбирает из заданного семейства шрифт определённой жирности

Числовые значения (9 категорий): 100 (самый бледный), 200, 300 .. 900 (самый жирный)

Ключевые слова: normal, bold

H1 {font-weight : normal} H2 {font-weight : bold}H3 {font-weight : 500}

Размер шрифта

Свойство font-size определяет размер шрифта

line-height - высота строки

•ключевые слова: xx-small, х-small, small, medium, large, x-large, xx-large•абсолютное значение длины (pt)

Абсолютное значение

•ключевые слова: larger и smaller•проценты•относительные единицы длины (em)

Относительный размер

Для сочетания всех возможных стилей для шрифта используется свойство font

Все значения свойств задаются через пробелы в порядке font-style, font-variant, font-weight, font-size, line-height и font-family

Первые три свойства могут не задаваться, что соответствует установке их значений в normal

Размер шрифта и высота строки (свойство line-height) задаются через косую черту

Элементы списка семейств шрифтов свойства font-family задаются через запятую

Р {font: oblique 12pt/14pt "Times Cyr", serif}

<HTML><HEAD>

<TITLE>шрифты</TITLE><STYLE TYPE="text/css">

body {font: oblique 24pt/36pt "Courier New", monospace}

</STYLE></HEAD><BODY>

Текст 1<P STYLE = "font-size: 14pt"> Текст 2 <P STYLE = "line-height: 24pt"> Текст 3<P STYLE = "font-style: normal"> Текст 4 <P> Текст 5

</BODY></HTML>

Цвет и фон

цвет элемента

фон элемента

•цвет•изображение•положение•повторение•фиксация

Цвет элемента

color - цвет текста элемента

<HTML><HEAD>

<TITLE>шрифты</TITLE><STYLE TYPE="text/css">

body {font-size:24pt; color: red}p {color: blue}

</STYLE></HEAD><BODY>

Текст 1<P> Текст 2 </P> Текст 3

</BODY></HTML>

Фон

background-color – цвет фона (начальное значение transparent - прозрачный)

background-image – фоновое изображениеbackground-repeat - повторяемость фонового

изображения repeat repeat-x repeat-y no-repeat

background-attachment – прокрутка фона fixed scroll

background-position – начальное положение фонового изображения ключевые значения: left, right, center, top и bottom проценты абсолютные единицы длины

Свойство background позволяет одновременно устанавливать значения всех свойств фонового изображения

body {background: URL (pic1.jpg) no-repeat

fixed 10mm 10mm}

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

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

word-spacing влияет на расстояние между словами

letter-spacing влияет на расстояние между символами

line-height – расстояние между базовыми линиями двух соседних строк

text-transform – преобразование текста capitalize – все слова отображаются с прописной

буквы uppercase – все буквы прописные lowercase – все буквы строчные

text-decoration - задаёт подчеркивание, надчеркивание или перечеркивание текста underline – подчеркивание overline – надчеркивание line-through – перечеркивание

text-align – выравнивание текста left right center justify

text-indent – отступ первой строки

vertical-align – положение элемента по вертикали относительно элемента-родителя baseline – выравнивание базовой линии элемента по базовой линии

родителя middle – выравнивание средней точки элемента на уровне базовой

линии родителя плюс половина ширины блока содержимого родителя sub – элемент отображается в виде нижнего индекса sup – элемент отображается в виде верхнего индекса text-top – выравнивание верха элемента с верхом шрифта элемента-

родителя text-bottom – выравнивание низа элемента с низом шрифта элемента-

родителя top – выравнивание верха элемента с верхом самого высокого

элемента строки bottom – выравнивание низа элемента с низом самого низкого

элемента строки

Пример

<HTML><HEAD>

<TITLE>шрифты</TITLE></HEAD>

<BODY><P>текст1<P STYLE="letter-spacing: 0.5em"> текст2<P STYLE="letter-spacing: 1em; text-transform: capitalize"> текст3<P STYLE="text-transform: lowercase"> тЕкСт4<P STYLE="text-decoration: underline; color: red">текст5<P STYLE="text-decoration: overline">текст6<P STYLE="text-decoration: line-through; color: blue">текст7<P STYLE="text-align: right; color:green">текст8<P STYLE="text-indent: 20">текст9

</BODY></HTML>

Визуальное форматирование

Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учётом их положения в структуре документа и расположения предыдущих отображенных элементов и элементов-контейнеров, в которых они могут содержаться

Свойство position элемента позволяет определить способ его позиционирования на странице: статический относительный абсолютный

Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов

Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом

Статический способ предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа

Значения свойства position

absolute – что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента

fixed – близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы

relative – положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения

static – элементы отображаются как обычно inherit – наследует значение родителя

Свойство bottom (top)

Устанавливает положение нижнего края содержимого элемента

Отсчёт координат зависит от свойства position: при относительном позиционировании элемента,

отсчёт ведется от нижнего края исходного положения элемента

при абсолютном — относительно нижнего края окна браузера

Значение bottom при абсолютном позиционирование элемента

Значение bottom относительно родителя

Свойство left (right)

Для позиционированного элемента определяет расстояние от левого края родительского элемента

Отсчет координат зависит от значения свойства position: если оно равно absolute, в качестве родителя выступает

окно браузера и положение элемента определяется от его левого края

в случае значения relative, left отсчитывается от левого края исходного положения элемента

если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя

Значение свойства left относительно окна браузера

Значение свойства left относительно исходного положения

Значение свойства left относительно родителя

Синтаксис

left: значение | проценты | auto | inherit

в качестве значений принимаются любые единицы длины

auto – не изменяет положение элементаinherit – наследует значение родителя

Абсолютное позиционирование

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

<HTML><HEAD>

<TITLE> Абсолютное позиционирование </TITLE>

</HEAD><BODY>

<SPAN STYLE = "position: static; background-color: #90EE90">Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br>Родитель, позиционированный статически!<br><IMG SRC="pic.jpg" border=1 STYLE="position: absolute; top:100px; left:100px">

</SPAN></BODY>

</HTML>

Относительное позиционированние

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

<HTML><HEAD>

<TITLE> Относительноt позиционирование </TITLE>

</HEAD><BODY bgcolor=#00a5b6>

<SPAN STYLE="position: relative; background-color: gray“><h1>Рисунок</h1>Это изображение

</SPAN><IMG SRC="pic.jpg" border=1 STYLE="position: relative; top: 60px; left:

60px“><SPAN STYLE="position:relative; background-color: lightgrey“>

является картинка pic в формате JEPG. </SPAN>

</BODY></HTML>

Статическое позиционирование

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

Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top, bottom, right и left

Визуальные эффекты

Несколько свойств каскадных таблиц стилей позволяют организовать, совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTM:

visibilitydisplayclipoverflow

Свойство visibility

Свойство visibility управляет отображением элемента

Принимает значения: visible (по умолчанию) - элемент отображается hidden - элемент не отображается

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

visible hidden

Свойство display

При свойстве display равным none элемент не только не отображается, но и изымается из потока отображения

Свойство clip

Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определённой ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height

Значения: auto – никакого отсечения не производится границы прямоугольника видимого изображения

элемента, которые задаются с помощью следующего параметра rect (top, right, bottom, left)

<HTML><HEAD>

<TITLE> Область </TITLE>

</HEAD><BODY bgcolor=#00a5b6>

<h1>Рисунок</h1><IMG SRC="pic.jpg"

border=1 STYLE="position: absolute; clip: rect(50, 150, 150, 50)">

Это изображение в формате JEPG

</BODY></HTML>

Свойство overflow

Свойство overflow определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения

Принимает значения: visible – заставляет элемент сжаться или увеличиться,

чтобы полностью отобразиться в заданном блоке hidden – обрезает элемент в соответствии с размерами

блока auto – добавляет полосы прокрутки к блоку отображения в

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

scroll – добавляет полосы прокрутки к блоку отображения в любом случае

inherit - наследует значение родителя

<HTML><HEAD>

<TITLE>overflow</TITLE><STYLE>

.layer {overflow: scroll; width: 100px;height: 100px;border: solid 1px black; }

</STYLE></HEAD><BODY bgcolor=#00a5b6>

<H1>Рисунок</H1><DIV class="layer">

<IMG SRC="pic.jpg"></DIV>Это изображение в формате

JEPG</BODY>

</HTML>