 ПОЗНАВАТЕЛЬНОЕ Сила воли ведет к действию, а позитивные действия формируют позитивное отношение Как определить диапазон голоса - ваш вокал Игровые автоматы с быстрым выводом Как самому избавиться от обидчивости Противоречивые взгляды на качества, присущие мужчинам Вкуснейший "Салат из свеклы с чесноком" Натюрморт и его изобразительные возможности Применение, как принимать мумие? Мумие для волос, лица, при переломах, при кровотечении и т.д. Как научиться брать на себя ответственность Зачем нужны границы в отношениях с детьми? Световозвращающие элементы на детской одежде Как победить свой возраст? Восемь уникальных способов, которые помогут достичь долголетия Классификация ожирения по ИМТ (ВОЗ) Глава 3. Завет мужчины с женщиной
Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.
| Стили визуального отображения
Для визуального отображения содержимого тега браузер выделяет прямоугольную область, которая содержит несколько вложенных друг в друга прямоугольников. Поля (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;). 2 Верхний край отступает от верхнего края рабочей области окна просмотра на 50 пикселей (top: 50px;) 3 Ширина 7 сантиметров (width: 7cm;). 4 Высота 6 сантиметров (height: 6cm;)
<Р>Этотекст первого абзаца...Это текст первого абзаца... Это текст первого абзаца...Это текст первого абзаца...</Р> никаких неясностей не возникает. Если он в прямоугольнике полностью не помещается, то создается вертикальная полоса просмотра. Со вторым абзацем <Р>Это текст <ЕМ id="em1"> во <STRONG> втором </STRONG> абзаце </EM></P> не так просто. Во-первых, его начальная позиция отсчитывается с места окончания предыдущего абзаца. Во-вторых, позиция тега с именем em1от считывается от левого верхнего угла прямоугольника родителя - тега с именем divl. Представим, что первый абзац не помещается в прямоугольнике блока divl.Тогда автоматически будет отображена полоса просмотра Прокручивая содержимое блока можно увидеть и начало второго абзаца, которое расположено в самом низу Но еще до прокрутки содержимого блока можно увидеть, что содержимое тега с именем em1 во <STRONG>btopom</STRONG> абзаце накладывается на содержимое первого абзаца. Причем прокручиваются тексты обоих абзацев. Обратите внимание, что нет горизонтальной полосы просмотра. Но она появится, если что-то позиционировать правее 7 сантиметров, например, в случае #em1 {position- absolute, left: 300рх; top l00px }
Контрольные вопросы 1 Какие теги задают структуру содержимого документа? 2 Каким образом строят карты изображений? 3. Каким образом загружают большие изображения на компьютер пользователя? 4 Какую роль играют таблицы стилей в форматировании документов? 5 Как и какие стили применяют для форматирования документов? 6 Как скрыть информацию о стиле от браузера? 7 Для чего существует форматирование фраз? 8 Как обрабатывает браузер группы строк и группы столбцов? 9 Какие таблицы стилей обладают высшим приоритетом? 10 Какие параметры визуального отображения блоков существуют и как они взаимно расположены? Упражнения 1 Заголовки документа отобразить с центрированием по горизонтали и вертикальными линиями синего и красного цвета по бокам. Таким же стилем отобразить все абзацы, но на вертикальной желтой фоновой полосе по центру рабочей области окна просмотра. 2 Загрузить три различных документа в три блока документа. Два блока занимают верхнюю половину рабочей области, а третий блок расположен под ними. Все документы отображаются на одинаковом фоне. 3 Нарисовать матрицу
4. В рабочей области окна просмотра отобразить текст «Анкета» на русском языке и строго под ним «Anketa» на английском языке, первую букву «А» увеличить в размере и сделать общей для обоих слов. Букву «А» вывести красным цветом, остаток слова на русском языке - синим, на английском - зеленым. 5. Отобразить формулу:
6. В рабочей области окна просмотра в три столбика вывести приветствие. В левом и правом столбцах размер шрифта должен возрастать сверху вниз, а в среднем - снизу вверх. Цвета вывода должны быть различны при каждом выводе текста. В случае перекрытия текстов различных столбцов текст не должен стираться, причем правый столбец может перекрывать левый, а средний - оба столбца. 7. В центре рабочей области окна просмотра отобразить мишень из 10 полей и в каждом поле вывести его значение (от 1 с краю до 10 в центре) Поля раскрасить различными цветами и нанести следы попаданий. При наведении курсора мыши на поле сообщить количество попаданий это поле. 8. Разрисовать рабочую область окна в разноцветные клеточки, очерченные черным цветом, плавно переходя от красного цвета в левом верхнем углу окна к синему в правом нижнем углу. 9. В центре рабочей области окна просмотра отобразить квадратное поле с текстом заголовка. Ниже заголовка нарисовать шахматную доску и обозначить поля. При наведении курсора мыши над полем доски сообщить имя поля. 10. Прямоугольник в рабочей области окна просмотра закрасить спектром цветов, начиная слева красным цветом и заканчивая, на правом краю, синим. Цвет изменять в четыре этапа: на первом этапе, при максимальном красном составляющем, увеличивать зеленую, на втором, при максимальном зеленом, уменьшать красную составляющую, затем, при максимальном зеленом, увеличивать синюю составляющую и, на последнем этапе, при максимальном синем уменьшать зеленую составляющую. 11. В рабочей области окна просмотра отобразить таблицу результатов всех ходов (частично заполненных клеток) завершенной игры в крестики-нолики. Таблица должна содержать дату встречи, данные игроков, а строки - номер, имя автора, изображение и результат хода. 12. В рабочей области окна просмотра отобразить несколько изображений с различными фоном, полями, рамками и отступом. Поверх каждого изображения отобразить текст. Взаимное положение изображений должно оставаться постоянным при изменении размеров окна просмотра. 13. Вывести текст в заданную позицию со специальными эффектами или символами. Под текстом отобразить разноцветные прямоугольники рейтинга участников некоторого события. |
В этом прямоугольнике отображено содержимое блока с именем divl.Вблоке находятся два абзаца С первым абзацем
