ДИНАМИЧЕСКИЙ html
DESCRIPTION
ДИНАМИЧЕСКИЙ HTML. Динамический HTML ( dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/1.jpg)
• Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым
• Реализация DHTML основывается на: непосредственно HTML, каскадных таблицах стилей (cascade style sheets – CSS) и языке сценариев (JavaScript или VBScript)
ДИНАМИЧЕСКИЙ HTML
![Page 2: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/2.jpg)
Каскадные таблицы стилей (Cascade Style Sheets – CSS)
Каскадные таблицы стилей предоставляют удобный способ добавления к web-страницам сложных атрибутов форматирования
С их помощью можно определить гарнитуры и размеры шрифтов, способ выравнивания и другие характеристики, до мельчайших деталей определить параметры текста, цветов, графики, линий, цитат и т.д.
Можно создать таблицу стилей и использовать её для всех документов, расположенных на сервере, что придаст стройность и строгость всему web-сайту
Таблица стилей – это набор правил, который управляет форматированием тэгов HTML в web-документе
![Page 3: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/3.jpg)
Правило каскадных таблиц стилей
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения
селектор {определение}
Селектор – любой тэг HTML Определение также состоит из двух частей: свойства и его
значения, разделенных знаком двоеточия (:) В одном правиле можно задать несколько определений,
разделённых символом точка с запятой (;)
селектор {свойство1: значение1;свойство2: значение2; …}
![Page 4: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/4.jpg)
Синтаксис правил каскадных таблиц стилей не чувствителен к регистру (селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке)
Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется
![Page 5: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/5.jpg)
Встраивание таблиц стилей в документ
1. СвязываниеТаблица стилей храниться в отдельном файлеПрисоединяется с помощью тэга <LINK> в разделе HEAD
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">
![Page 6: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/6.jpg)
2. ВнедрениеТаблица стилей задаётся в стилевом блоке в разделе HEADИспользуется тэг <STYLE>
<STYLE TYPE="text/css">селектор {свойство: значение}
…</STYLE>
![Page 7: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/7.jpg)
3. ИмпортированиеВ тэге <STYLE> можно импортировать внешнюю таблицу стилей
STYLE TYPE="text/css">@import: URL (адрес css);
</STYLE>
4. Встраивание в тэги документаКаждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей
<Н1 STYLE= "color: red">3аголовок отображается красным цветом
</Н1>
![Page 8: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/8.jpg)
Группирование
Для уменьшения размеров таблиц стилей можно группировать разные элементы страницы HTML в виде списка через запятую, если для них задаётся одно правило
H1 {font-family: Arial}H2 {font-family: Arial}H3 {font-family: Arial}
Можно задать в виде
H1, H2, Н3 {font-family: Arial}
![Page 9: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/9.jpg)
Можно группировать свойства элемента
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}
![Page 10: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/10.jpg)
Селекторы
Правила каскадных таблиц стилей влияют на отображение всех элементов заданного типа в документе
<STYLE TYPE="text/css">H1 {color: red}
</STYLE>
Для одного тэга можно создавать различные классы
<STYLE TYPE="text/css">H1.red {color: red}H1.blueBgrd {color: red; background-color: blue}
</STYLE>
![Page 11: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/11.jpg)
Использование классов
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS
<Н1 CLASS="red">Красный шрифт
</Н1><Н1 CLASS="blueBgrd">
Красный шрифт на синем фоне</Н1>
![Page 12: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/12.jpg)
Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента
<STYLE TYPE="text/css">.red {color: red}.blueBgrd {color: red; background-color: blue}
</STYLE>
<Н1 CLASS="red">Красный шрифт
</Н1><P CLASS="blueBgrd">
Красный шрифт на синем фоне</P>
![Page 13: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/13.jpg)
В качестве селектора можно использовать уникальное идентификационное имя элемента, предваряя его символом #
<STYLE TYPE="text/css">#par24 {letter-spacing: 1 em}H1#form3 {color: red; background-color: blue}
</STYLE>
<Н1 ID=form3>Красный шрифт на синем фоне</Н1>
<P ID=par24>Разреженные слова в абзаце
</Р>
![Page 14: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/14.jpg)
Свойства форматирования элементов
В каскадных таблицах стилей все доступные свойства форматирования элементов в документе HTML разбиты на 8 категорий
1. Шрифт2. Цвет и фон3. Текст4. Блок5. Визуальное форматирование6. Печать7. Фильтры и переходы8. Псевдоклассы и другие свойства
![Page 15: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/15.jpg)
Единицы измерения, используемые для задания значений свойств
Относительные единицы измерения
Абсолютные единицы измерения
em - высота элемента шрифта
in - дюйм (1 in = 2.54 cm)
ex - высота буквы cm – сантиметр
px - пиксел mm – миллиметр
% - процент pt - пункт (1pt= 1/72 in)
рс - пика (1 рс = 12 pt)
![Page 16: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/16.jpg)
Шрифты
Шрифты различаются повнешнему виду (начертанию)размерустилю (прямой, курсив или наклонный)"жирности" отображения (нормальный,
полужирный)
![Page 17: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/17.jpg)
Определение шрифта
Свойство 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)
![Page 18: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/18.jpg)
![Page 19: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/19.jpg)
Стиль шрифта
Свойство 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}
![Page 20: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/20.jpg)
![Page 21: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/21.jpg)
Жирность шрифта
Свойство font-weight выбирает из заданного семейства шрифт определённой жирности
Числовые значения (9 категорий): 100 (самый бледный), 200, 300 .. 900 (самый жирный)
Ключевые слова: normal, bold
H1 {font-weight : normal} H2 {font-weight : bold}H3 {font-weight : 500}
![Page 22: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/22.jpg)
![Page 23: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/23.jpg)
Размер шрифта
Свойство font-size определяет размер шрифта
line-height - высота строки
•ключевые слова: xx-small, х-small, small, medium, large, x-large, xx-large•абсолютное значение длины (pt)
Абсолютное значение
•ключевые слова: larger и smaller•проценты•относительные единицы длины (em)
Относительный размер
![Page 24: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/24.jpg)
![Page 25: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/25.jpg)
Для сочетания всех возможных стилей для шрифта используется свойство 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}
![Page 26: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/26.jpg)
<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>
![Page 27: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/27.jpg)
![Page 28: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/28.jpg)
Цвет и фон
цвет элемента
фон элемента
•цвет•изображение•положение•повторение•фиксация
![Page 29: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/29.jpg)
Цвет элемента
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>
![Page 30: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/30.jpg)
![Page 31: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/31.jpg)
Фон
background-color – цвет фона (начальное значение transparent - прозрачный)
background-image – фоновое изображениеbackground-repeat - повторяемость фонового
изображения repeat repeat-x repeat-y no-repeat
background-attachment – прокрутка фона fixed scroll
![Page 32: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/32.jpg)
![Page 33: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/33.jpg)
background-position – начальное положение фонового изображения ключевые значения: left, right, center, top и bottom проценты абсолютные единицы длины
Свойство background позволяет одновременно устанавливать значения всех свойств фонового изображения
body {background: URL (pic1.jpg) no-repeat
fixed 10mm 10mm}
![Page 34: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/34.jpg)
![Page 35: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/35.jpg)
Форматирование текста
Позволяет определить расстояние между словами расстояние между буквами в словах отступы и высота строк в абзацах
![Page 36: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/36.jpg)
word-spacing влияет на расстояние между словами
letter-spacing влияет на расстояние между символами
line-height – расстояние между базовыми линиями двух соседних строк
text-transform – преобразование текста capitalize – все слова отображаются с прописной
буквы uppercase – все буквы прописные lowercase – все буквы строчные
![Page 37: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/37.jpg)
![Page 38: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/38.jpg)
text-decoration - задаёт подчеркивание, надчеркивание или перечеркивание текста underline – подчеркивание overline – надчеркивание line-through – перечеркивание
text-align – выравнивание текста left right center justify
text-indent – отступ первой строки
![Page 39: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/39.jpg)
vertical-align – положение элемента по вертикали относительно элемента-родителя baseline – выравнивание базовой линии элемента по базовой линии
родителя middle – выравнивание средней точки элемента на уровне базовой
линии родителя плюс половина ширины блока содержимого родителя sub – элемент отображается в виде нижнего индекса sup – элемент отображается в виде верхнего индекса text-top – выравнивание верха элемента с верхом шрифта элемента-
родителя text-bottom – выравнивание низа элемента с низом шрифта элемента-
родителя top – выравнивание верха элемента с верхом самого высокого
элемента строки bottom – выравнивание низа элемента с низом самого низкого
элемента строки
![Page 40: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/40.jpg)
Пример
<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>
![Page 41: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/41.jpg)
![Page 42: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/42.jpg)
Визуальное форматирование
Элементы HTML отображаются браузером последовательно, в том порядке, как они определены в тексте HTML-файла с учётом их положения в структуре документа и расположения предыдущих отображенных элементов и элементов-контейнеров, в которых они могут содержаться
Свойство position элемента позволяет определить способ его позиционирования на странице: статический относительный абсолютный
![Page 43: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/43.jpg)
Относительный способ определяет смещение элемента относительно его естественного положения в потоке отображения элементов
Абсолютный способ удаляет элемент из естественного потока позиционирования и позволяет разместить его на странице абсолютно произвольным образом
Статический способ предполагает естественный поток отображения элементов страницы в окне браузера в соответствии с иерархией объектов документа
![Page 44: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/44.jpg)
Значения свойства position
absolute – что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента
fixed – близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы
relative – положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения
static – элементы отображаются как обычно inherit – наследует значение родителя
![Page 45: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/45.jpg)
Свойство bottom (top)
Устанавливает положение нижнего края содержимого элемента
Отсчёт координат зависит от свойства position: при относительном позиционировании элемента,
отсчёт ведется от нижнего края исходного положения элемента
при абсолютном — относительно нижнего края окна браузера
![Page 46: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/46.jpg)
Значение bottom при абсолютном позиционирование элемента
Значение bottom относительно родителя
![Page 47: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/47.jpg)
Свойство left (right)
Для позиционированного элемента определяет расстояние от левого края родительского элемента
Отсчет координат зависит от значения свойства position: если оно равно absolute, в качестве родителя выступает
окно браузера и положение элемента определяется от его левого края
в случае значения relative, left отсчитывается от левого края исходного положения элемента
если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя
![Page 48: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/48.jpg)
Значение свойства left относительно окна браузера
Значение свойства left относительно исходного положения
![Page 49: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/49.jpg)
Значение свойства left относительно родителя
![Page 50: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/50.jpg)
Синтаксис
left: значение | проценты | auto | inherit
в качестве значений принимаются любые единицы длины
auto – не изменяет положение элементаinherit – наследует значение родителя
![Page 51: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/51.jpg)
Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причём сам элемент или его потомки могут перекрывать ранее отображённые элементы
![Page 52: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/52.jpg)
<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>
![Page 53: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/53.jpg)
![Page 54: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/54.jpg)
Относительное позиционированние
Относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов, образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего
![Page 55: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/55.jpg)
<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>
![Page 56: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/56.jpg)
![Page 57: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/57.jpg)
Статическое позиционирование
В стандартном потоке статически позиционированные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке
Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top, bottom, right и left
![Page 58: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/58.jpg)
Визуальные эффекты
Несколько свойств каскадных таблиц стилей позволяют организовать, совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTM:
visibilitydisplayclipoverflow
![Page 59: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/59.jpg)
Свойство visibility
Свойство visibility управляет отображением элемента
Принимает значения: visible (по умолчанию) - элемент отображается hidden - элемент не отображается
Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения
![Page 60: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/60.jpg)
visible hidden
![Page 61: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/61.jpg)
Свойство display
При свойстве display равным none элемент не только не отображается, но и изымается из потока отображения
![Page 62: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/62.jpg)
Свойство clip
Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определённой ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height
Значения: auto – никакого отсечения не производится границы прямоугольника видимого изображения
элемента, которые задаются с помощью следующего параметра rect (top, right, bottom, left)
![Page 63: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/63.jpg)
<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>
![Page 64: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/64.jpg)
Свойство overflow
Свойство overflow определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения
Принимает значения: visible – заставляет элемент сжаться или увеличиться,
чтобы полностью отобразиться в заданном блоке hidden – обрезает элемент в соответствии с размерами
блока auto – добавляет полосы прокрутки к блоку отображения в
случае, если размеры содержимого элемента превосходят размеры блока отображения
scroll – добавляет полосы прокрутки к блоку отображения в любом случае
inherit - наследует значение родителя
![Page 65: ДИНАМИЧЕСКИЙ HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062720/56813515550346895d9c696d/html5/thumbnails/65.jpg)
<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>