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

ДИНАМИЧЕСКИЙ HTML
• Динамический HTML (dynamic HTML или
D H T M L ) н е я в л я е т ся к а к и м - т о о с о б ы м
языком разметки страниц. Это всего лишь
термин, применяемый для обозначения
HTML-страниц с динамически
изменяемым содержимым
• Р е а л и з а ц и я D H T M L о с н о в ы в а е т ся н а :
н е п о с р е д с т в е н но H T M L , к а с к а д н ы х
таблицах стилей (cascade style sheets –
CSS) и языке сценариев (JavaScript или
VBScript)
Каскадные таблицы стилей
(Cascade Style Sheets – CSS)
 Каскадные таблицы стилей предоставляют удобный
способ добавления к web-страницам сложных атрибутов
форматирования
 С их помощью можно определить гарнитуры и размеры
шрифтов, способ выравнивания и другие
характеристики, до мельчайших деталей определить
параметры текста, цветов, графики, линий, цитат и т.д.
 Можно создать таблицу стилей и использовать её для
всех документов, расположенных на сервере, что
придаст стройность и строгость всему web-сайту
 Таблица стилей – это набор правил, который управляет
форматированием тэгов HTML в web-документе
Правило каскадных таблиц стилей
 Любое правило каскадных таблиц стилей состоит из двух
частей: селектора и определения
 Селектор – любой тэг HTML
 Определение также состоит из двух частей: свойства и его
значения, разделенных знаком двоеточия (:)
 В одном правиле можно задать несколько определений,
разделённых символом точка с запятой (;)
 Синтаксис правил каскадных таблиц стилей не
чувствителен к регистру (селекторы, свойства и
их значения можно задавать как строчными, так
и прописными буквами, или в смешанном
порядке)
 Любая грамматическая ошибка приводит к тому,
что правило пропускается анализатором
браузера, и никакого предупреждающего
сообщения не появляется
Встраивание таблиц стилей в документ
1. Связывание
Таблица стилей храниться в отдельном файле
Присоединяется с помощью тэга <LINK> в разделе
HEAD
2. Внедрение
Таблица стилей задаётся в стилевом блоке в разделе
HEAD
Используется тэг <STYLE>
3. Импортирование
В тэге <STYLE> можно импортировать внешнюю таблицу стилей
4. Встраивание в тэги документа
Каждый тэг HTML имеет параметр STYLE, в котором можно
задать значения его свойств в соответствии с синтаксисом
каскадных таблиц стилей
Группирование
 Для уменьшения размеров таблиц стилей можно
группировать разные элементы страницы HTML в
виде списка через запятую, если для них задаётся
одно правило
 Можно задать в виде
 Можно группировать свойства элемента
 Можно задать в виде
 Некоторые свойства имеют собственный синтаксис
группирования, связанный с заданием значений нескольких
свойств в одном
Селекторы
 Правила каскадных таблиц стилей влияют на отображение всех
элементов заданного типа в документе
 Для одного тэга можно создавать различные классы
Использование классов
 В тексте документа ссылка на соответствующий класс
задаётся в параметре CLASS
 Если класс должен применяться ко всем элементам
документа, то в селекторе задаётся имя класса с
лидирующей точкой без указания конкретного элемента
 В качестве селектора можно использовать уникальное
идентификационное имя элемента, предваряя его символом
#
Свойства форматирования элементов
 В каскадных таблицах стилей все доступные свойства
форматирования элементов в документе HTML
разбиты на 8 категорий
1.
2.
3.
4.
5.
6.
7.
8.
Шрифт
Цвет и фон
Текст
Блок
Визуальное форматирование
Печать
Фильтры и переходы
Псевдоклассы и другие свойства
Единицы измерения, используемые для задания
значений свойств
Относительные единицы
измерения
em - высота элемента
шрифта
ex - высота буквы
px - пиксел
% - процент
Абсолютные единицы
измерения
in - дюйм (1 in = 2.54 cm)
cm – сантиметр
mm – миллиметр
pt - пункт (1pt= 1/72 in)
рс - пика (1 рс = 12 pt)
Шрифты
Шрифты различаются по
 внешнему виду (начертанию)
 размеру
 стилю (прямой, курсив или наклонный)
 "жирности" отображения (нормальный, полужирный)
Определение шрифта
 Свойство
задаёт приоритетный список шрифтов
 типовые семейства шрифтов
1.
2.
3.
4.
5.
serif (например, Times)
sans-serif (например, Helvetica)
cursive (например, Zapf-Chancery)
fantasy (например, Western)
monospace (например, Courier)
Стиль шрифта
 Свойство
1.
2.
3.

определяет стиль шрифта
normal
italic
oblique
- шрифт капитель (small-caps)
Жирность шрифта
 Свойство
выбирает из заданного
семейства шрифт определённой жирности
 Числовые значения (9 категорий): 100 (самый
бледный), 200, 300 .. 900 (самый жирный)
 Ключевые слова: normal, bold
Размер шрифта
 Свойство

определяет размер шрифта
Абсолютное
значение
• ключевые слова: xx-small, х-small,
small, medium, large, x-large, xx-large
• абсолютное значение длины (pt)
Относительный
размер
• ключевые слова: larger и smaller
• проценты
• относительные единицы длины (em)
- высота строки
 Для сочетания всех возможных стилей для шрифта




используется свойство
Все значения свойств задаются через пробелы в
порядке font-style, font-variant, font-weight, font-size,
line-height и font-family
Первые три свойства могут не задаваться, что
соответствует установке их значений в normal
Размер шрифта и высота строки (свойство line-height)
задаются через косую черту
Элементы списка семейств шрифтов свойства fontfamily задаются через запятую
Цвет и фон
цвет
элемента
фон элемента
• цвет
• изображение
• положение
• повторение
• фиксация
Цвет элемента

- цвет текста элемента
Фон
– цвет фона (начальное значение
transparent - прозрачный)

– фоновое изображение

- повторяемость фонового
изображения





repeat
repeat-x
repeat-y
no-repeat
– прокрутка фона



fixed
scroll

фонового изображения



– начальное положение
ключевые значения: left, right, center, top и bottom
проценты
абсолютные единицы длины
 Свойство
позволяет одновременно
устанавливать значения всех свойств фонового
изображения

Форматирование текста
 Позволяет определить
 расстояние между словами
 расстояние между буквами в словах
 отступы и высота строк в абзацах


словами
символами
влияет на расстояние между
влияет на расстояние между
– расстояние между базовыми
линиями двух соседних строк

– преобразование текста




capitalize – все слова отображаются с прописной буквы
uppercase – все буквы прописные
lowercase – все буквы строчные

- задаёт подчеркивание,
надчеркивание или перечеркивание текста



underline – подчеркивание
overline – надчеркивание
line-through – перечеркивание
– выравнивание текста






left
right
center
justify
– отступ первой строки

– положение элемента по вертикали
относительно элемента-родителя








baseline – выравнивание базовой линии элемента по базовой линии
родителя
middle – выравнивание средней точки элемента на уровне базовой
линии родителя плюс половина ширины блока содержимого родителя
sub – элемент отображается в виде нижнего индекса
sup – элемент отображается в виде верхнего индекса
text-top – выравнивание верха элемента с верхом шрифта элементародителя
text-bottom – выравнивание низа элемента с низом шрифта элементародителя
top – выравнивание верха элемента с верхом самого высокого элемента
строки
bottom – выравнивание низа элемента с низом самого низкого
элемента строки
Пример
Визуальное форматирование
 Элементы HTML отображаются браузером
последовательно, в том порядке, как они определены
в тексте HTML-файла с учётом их положения в
структуре документа и расположения предыдущих
отображенных элементов и элементов-контейнеров,
в которых они могут содержаться
 Свойство
элемента позволяет определить
способ его позиционирования на странице:



статический
относительный
абсолютный
 Относительный способ определяет смещение
элемента относительно его естественного
положения в потоке отображения элементов
 Абсолютный способ удаляет элемент из
естественного потока позиционирования и
позволяет разместить его на странице абсолютно
произвольным образом
 Статический способ предполагает естественный
поток отображения элементов страницы в окне
браузера в соответствии с иерархией объектов
документа
Значения свойства 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 относительно родителя
Синтаксис
 в качестве значений принимаются любые
единицы длины
 auto – не изменяет положение элемента
 inherit – наследует значение родителя
Абсолютное позиционирование
 Абсолютно позиционированный элемент и все
его потомки изымаются из естественного потока
отображения элементов и позиционируются
независимо, причём сам элемент или его
потомки могут перекрывать ранее отображённые
элементы
Относительное позиционированние
 Относительно позиционированные и статически
позиционированные элементы после изъятия из
исходного текста документа всех абсолютно
позиционированных элементов, образуют
непрерывный поток отображения, в котором
каждый последующий элемент позиционируется
относительно конца предыдущего
Статическое позиционирование
 В стандартном потоке статически
позиционированные элементы ведут себя
аналогично относительно позиционированным:
они отображаются непосредственно сразу после
предыдущего элемента в потоке
 Единственное их отличие от относительно
позиционируемых элементов заключается в том,
что для них нельзя установить значения свойств
top, bottom, right и left
Визуальные эффекты
 Несколько свойств каскадных таблиц стилей
позволяют организовать, совместно со
встроенными сценариями, динамическое
отображение и скрытие элементов страницы
HTM:




Свойство visibility
 Свойство visibility управляет отображением
элемента
 Принимает значения:


visible (по умолчанию) - элемент отображается
hidden - элемент не отображается
 Когда для скрытия элемента используется его
свойство visibility, то элемент не изымается из
потока отображения
visible
hidden
Свойство display
 При свойстве display
равным none элемент
не только не
отображается, но и
изымается из потока
отображения
Свойство clip
 Свойство clip позволяет обрезать видимое
изображение абсолютно позиционированного
элемента. Каждый такой элемент отображается в
прямоугольном блоке определённой ширины и
высоты, которые определяются либо шириной и
высотой самого элемента, либо его свойствами
width и height
 Значения:


auto – никакого отсечения не производится
границы прямоугольника видимого изображения
элемента, которые задаются с помощью следующего
параметра rect (top, right, bottom, left)
Свойство overflow
 Свойство overflow определяет поведение элемента,
когда размеры его содержимого не соответствуют
размерам блока отображения
 Принимает значения:





visible – заставляет элемент сжаться или увеличиться, чтобы
полностью отобразиться в заданном блоке
hidden – обрезает элемент в соответствии с размерами блока
auto – добавляет полосы прокрутки к блоку отображения в
случае, если размеры содержимого элемента превосходят
размеры блока отображения
scroll – добавляет полосы прокрутки к блоку отображения в
любом случае
inherit - наследует значение родителя