2.5. Стили визуального отображения
Для визуального отображения содержимого тега браузер выделяет прямоугольную область, которая содержит несколько вложенных друг в друга прямоугольников. Поля (margin) определяют расстояние от краев внешней прямоугольной области до сторон рамки (border) Отступы (padding) определяют расстояние от сторон рамки до краев прямоугольника визуального отображения содержимого тега.
Внутри рамки используется фон, определенный для тега. А поля всегда прозрачны. Обратите внимание, что рамки присутствуют всегда, даже когда их не видно.
Величины полей задают параметры margin-top, margin-right, margin-bottom и margin-left, а также параметр margin
Параметры, которые устанавливают значение одного из полей margin-top, margin-right, margin-bottom и margin-left) никакой сложности не представляют.
Параметр margin имеет некоторые особенности, связанные с тем, что устанавливает значения всех полей. Эти особенности такие же, как и у параметра border-width.
Величины полей задают в единицах длины, процентах и ключевым словом auto Можно указывать и отрицательные значения.
Если величина указана в процентах, то ее значение вычисляется по отношению к ширине прямоугольника содержимого.
Величины отступов задают параметры padding-top, padding-right, padding-bottom и padding-left, а также параметр padding.
Параметры, которые устанавливают значение одного из отступов (padding-top, padding-right, padding-bottom и padding-left) никакую сложность не представляют.
Параметр padding имеет некоторые особенности, связанные с тем, что устанавливает значения всех отступов. Эти особенности такие же, как и у параметра border-width.
Величины полей задают в единицах длины и процентах. Нельзя указывать отрицательные значения. Если величина указана в процентах, то ее значение вычисляется по отношению к ширине прямоугольника содержимого.
Для позиционирования содержимого тегов применяют параметры position, height, left, top, width, overflow, visibility и z-index. Применение этих параметров никаких сложностей не представляет.
Рассмотрим следующий фрагмент
<HEAD>
<STYLE>
#div1 { position: absolute; overflow:auto;
left: 50px; top: 50px; width: 7cm; height: 6cm; }
#em1 { position: absolute; left: 100px; top: 100px }
</STYLE>
</HEAD>
<BODY>
<DIV id="divl">
<Р>Это текст первого абзаца...Это текст первого абзаца...
Это текст первого абзаца...Это текст первого абзаца...</Р>
<Р>Это текст <ЕМ id="eml"> во
<STRONG>втором</STRONG> абзаце</ЕМ></Р>
</DIV>
</BODY>
В окне просмотра будет выделен прямоугольник со следующими габаритами:
1. Левый край отступает от левого края рабочей области окна просмотра на 50 пикселей (left: 50px;).
Верхний край отступает от верхнего края рабочей области окна просмотра на 50 пикселей (top: 50px;)
Ширина 7 сантиметров (width: 7cm;).
Высота 6 сантиметров (height: 6cm;)
В
этом прямоугольнике отображено содержимое
блока с именем divl.
В
блоке
находятся два абзаца С первым абзацем
<Р>Это текст первого абзаца...Это текст первого абзаца... Это текст первого абзаца...Это текст первого абзаца...</Р>
никаких неясностей не возникает. Если он в прямоугольнике полностью не помещается, то создается вертикальная полоса просмотра. Со вторым абзацем
<Р>Это текст <ЕМ id="em1"> во <STRONG> втором </STRONG> абзаце </EM></P>
не так просто. Во-первых, его начальная позиция отсчитывается с места окончания предыдущего абзаца. Во-вторых, позиция тега с именем em1 от считывается от левого верхнего угла прямоугольника родителя - тега с именем divl.
Представим, что первый абзац не помещается в прямоугольнике блока divl. Тогда автоматически будет отображена полоса просмотра Прокручивая содержимое блока можно увидеть и начало второго абзаца, которое расположено в самом низу Но еще до прокрутки содержимого блока можно увидеть, что содержимое тега с именем em1
во <STRONG>btopom</STRONG> абзаце
накладывается на содержимое первого абзаца. Причем прокручиваются тексты обоих абзацев.
Обратите внимание, что нет горизонтальной полосы просмотра. Но она появится, если что-то позиционировать правее 7 сантиметров, например, в случае
#em1 {position- absolute, left: 300рх; top l00px }
Контрольные вопросы
Какие теги задают структуру содержимого документа?
Каким образом строят карты изображений?
3. Каким образом загружают большие изображения на компьютер пользователя?
Какую роль играют таблицы стилей в форматировании документов?
Как и какие стили применяют для форматирования документов?
Как скрыть информацию о стиле от браузера?
Для чего существует форматирование фраз?
Как обрабатывает браузер группы строк и группы столбцов?
Какие таблицы стилей обладают высшим приоритетом?
10 Какие параметры визуального отображения блоков существуют и как они взаимно расположены?
Упражнения
Заголовки документа отобразить с центрированием по горизонтали и вертикальными линиями синего и красного цвета по бокам. Таким же стилем отобразить все абзацы, но на вертикальной желтой фоновой полосе по центру рабочей области окна просмотра.
Загрузить три различных документа в три блока документа. Два блока занимают верхнюю половину рабочей области, а третий блок расположен под ними. Все документы отображаются на одинаковом фоне.
Нарисовать матрицу
В рабочей области окна просмотра отобразить текст «Анкета» на русском языке и строго под ним «Anketa» на английском языке, первую букву «А» увеличить в размере и сделать общей для обоих слов. Букву «А» вывести красным цветом, остаток слова на русском языке - синим, на английском - зеленым.
Отобразить формулу:
В рабочей области окна просмотра в три столбика вывести приветствие. В левом и правом столбцах размер шрифта должен возрастать сверху вниз, а в среднем - снизу вверх. Цвета вывода должны быть различны при каждом выводе текста. В случае перекрытия текстов различных столбцов текст не должен стираться, причем правый столбец может перекрывать левый, а средний - оба столбца.
В центре рабочей области окна просмотра отобразить мишень из 10 полей и в каждом поле вывести его значение (от 1 с краю до 10 в центре) Поля раскрасить различными цветами и нанести следы попаданий. При наведении курсора мыши на поле сообщить количество попаданий это поле.
Разрисовать рабочую область окна в разноцветные клеточки, очерченные черным цветом, плавно переходя от красного цвета в левом верхнем углу окна к синему в правом нижнем углу.
В центре рабочей области окна просмотра отобразить квадратное поле с текстом заголовка. Ниже заголовка нарисовать шахматную доску и обозначить поля. При наведении курсора мыши над полем доски сообщить имя поля.
Прямоугольник в рабочей области окна просмотра закрасить спектром цветов, начиная слева красным цветом и заканчивая, на правом краю, синим. Цвет изменять в четыре этапа: на первом этапе, при максимальном красном составляющем, увеличивать зеленую, на втором, при максимальном зеленом, уменьшать красную составляющую, затем, при максимальном зеленом, увеличивать синюю составляющую и, на последнем этапе, при максимальном синем уменьшать зеленую составляющую.
В рабочей области окна просмотра отобразить таблицу результатов всех ходов (частично заполненных клеток) завершенной игры в крестики-нолики. Таблица должна содержать дату встречи, данные игроков, а строки - номер, имя автора, изображение и результат хода.
В рабочей области окна просмотра отобразить несколько изображений с различными фоном, полями, рамками и отступом. Поверх каждого изображения отобразить текст. Взаимное положение изображений должно оставаться постоянным при изменении размеров окна просмотра.
Вывести текст в заданную позицию со специальными эффектами или символами. Под текстом отобразить разноцветные прямоугольники рейтинга участников некоторого события.