• Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым • Реализация DHTML основывается на: непосредственно HTML, каскадных таблицах стилей (cascade style sheets – CSS) и языке сценариев (JavaScript или VBScript) ДИНАМИЧЕСКИЙ HTML
ДИНАМИЧЕСКИЙ HTML. Динамический HTML ( dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
• Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым
• Реализация DHTML основывается на: непосредственно HTML, каскадных таблицах стилей (cascade style sheets – CSS) и языке сценариев (JavaScript или VBScript)
Каскадные таблицы стилей предоставляют удобный способ добавления к web-страницам сложных атрибутов форматирования
С их помощью можно определить гарнитуры и размеры шрифтов, способ выравнивания и другие характеристики, до мельчайших деталей определить параметры текста, цветов, графики, линий, цитат и т.д.
Можно создать таблицу стилей и использовать её для всех документов, расположенных на сервере, что придаст стройность и строгость всему web-сайту
Таблица стилей – это набор правил, который управляет форматированием тэгов HTML в web-документе
Правило каскадных таблиц стилей
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения
селектор {определение}
Селектор – любой тэг HTML Определение также состоит из двух частей: свойства и его
значения, разделенных знаком двоеточия (:) В одном правиле можно задать несколько определений,
Синтаксис правил каскадных таблиц стилей не чувствителен к регистру (селекторы, свойства и их значения можно задавать как строчными, так и прописными буквами, или в смешанном порядке)
Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется
Встраивание таблиц стилей в документ
1. СвязываниеТаблица стилей храниться в отдельном файлеПрисоединяется с помощью тэга <LINK> в разделе HEAD
3. ИмпортированиеВ тэге <STYLE> можно импортировать внешнюю таблицу стилей
STYLE TYPE="text/css">@import: URL (адрес css);
</STYLE>
4. Встраивание в тэги документаКаждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей
В каскадных таблицах стилей все доступные свойства форматирования элементов в документе 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
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 отображаются браузером последовательно, в том порядке, как они определены в тексте 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> Относительноt позиционирование </TITLE>
</HEAD><BODY bgcolor=#00a5b6>
<SPAN STYLE="position: relative; background-color: gray“><h1>Рисунок</h1>Это изображение
В стандартном потоке статически позиционированные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке
Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top, bottom, right и left
Визуальные эффекты
Несколько свойств каскадных таблиц стилей позволяют организовать, совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTM:
Принимает значения: visible (по умолчанию) - элемент отображается hidden - элемент не отображается
Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения
visible hidden
Свойство display
При свойстве display равным none элемент не только не отображается, но и изымается из потока отображения
Свойство clip
Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определённой ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height
Значения: auto – никакого отсечения не производится границы прямоугольника видимого изображения
элемента, которые задаются с помощью следующего параметра rect (top, right, bottom, left)