Главная страница
qrcode

Н., хаи, 2013 11. Введение в веб-программирование. Html-разметка


Скачать 11.83 Mb.
НазваниеН., хаи, 2013 11. Введение в веб-программирование. Html-разметка
Дата10.09.2019
Размер11.83 Mb.
Формат файлаpdf
Имя файлаВведение в веб-программирование.pdf
оригинальный pdf просмотр
ТипРеферат
#64805
страница4 из 12
Каталог
1   2   3   4   5   6   7   8   9   ...   12




9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
13



Здравствуй, цифровой мир!







Здравствуй, цифровой мир!

Здесь вложенный текст

9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
14
Эту важную особенность CSS иллюстрирует пример на рисунке 2.11 (файл ex2_11.html).
Тег с классом “mama” в данном примере является вложенным в тег с классом “papa” и наследует свойства стилей родителя, в частности, размер и тип шрифта (которые явно в стиле “.mama” не прописаны).
Наследование в CSS является выборочным - наследуются далеко не все свойства. Например, разработчики CSS посчитали нецелесообразным наследовать свойства рамки
(border). Именно поэтому рамочка, которая задана вокруг блока с классом “papa” отсутствует вокруг блока с классом
“mama”. Самостоятельно изучите по справочникам, какие свойства стилей наследуются, а какие - нет.
Для многих свойств стилей предусмотрено значение
inherit”, которое прямо указывает стилю, что он должен наследовать это свойство у родителя (по умолчанию он может не наследовать это свойство).
2.4. Примеры использования некоторых свойств
стилей
Рассмотрим несколько важных свойств стилей. Вопервых, это свойство position. Это свойство позволяет, например, добиться перекрытия нескольких блоков на вебстранице. Пример такого перекрытия приведен на рисунке
2.12 (файл ex2_12.html).
Значение absolute для свойства position приводит к тому, что блок “забывает” о своем стандартном местоположении на веб-странице и перемещается в то место, которое задают свойства left, right, top или bottom (смещения от края).
При этом позиция блока на экране вычисляется относительно краев веб-страницы. Если же у блока есть родители (он является вложенным в другой блок) и у блокародителя свойство position также установлено в absolute или fixed или relative (рассмотрите значения fixed и relative самостоятельно)), то позиция вычисляется относительно краев родительского блока.
В данном примере и у зеленого и у синего блоков заданы абсолютные позиции, а у белого блока, вложенного в синий, позиция задана относительно границ синего блока.
Обратите также внимание на свойство z-index. Это полезное свойство позволяет указать браузеру, какой из двух пересекающихся блоков будет выведен поверх другого (тот, у которого установлено более высокое значение z-index).
Еще одной важной особенностью CSS является вычисление размеров блоков. Казалось бы, у синего блока задан размер в ширину 400 пикселей (width: 400). У маленького белого блока задан размер в ширину 90 пикселей и отступ от левого края в 370 пикселей. Несложная арифметика говорит нам, что 370 + 90 = 460. Таким образом, белый блок должен выступать за правый край синего родительского блока, однако, он не выступает! В чем же дело?
Дело в свойстве padding (задает отступ от краев блока до текстовой области внутри блока) и в том, как CSS интерпретирует свойство width (это ширина текстовой области внутри блока, не считая отступы). Реальная ширина блока складывается из суммы width и двух padding (отступ слева и отступ справа). В данном случае 40 + 400 + 40 = 480 пикселей. Теперь становится понятно, почему при отступе от левого края в 370 пикселей и длине в 100 пикселей (width
90 и два отступа по 5) белый блок не выступает за край синего.




Этот блок расположен выше
13-022013


9 лекций по веб-программированию (c) Пономаренко Н.Н., ХАИ, 2013
15
и padding, проверяйте, как выглядит страница на разных браузерах. Дело в том, что браузер Internet Explorer вопреки спецификации CSS считает, что ширина блока - это не сумма
width и отступов, а просто width. Отступы он обеспечивает за счет уменьшения внутренней области вывода текста.
Приведенная на рисунке 2.12 веб-страница при просмотре в
Internet Explorer будет выглядеть так, как это показано на рисунке 2.13.
Рисунок 2.13 - Эта же веб-страница в Internet Explorer
Как видим, белый блок выехал за пределы синего, а надпись на нем из-за уменьшившейся ширины области текста частично переехала на вторую строку.
Чтобы обойти данную проблему, можно попытаться обойтись в нашей странице без свойства padding, или же задать отступ для белого блока не от левой границы, а от правой, или найти еще какое-то другое решение, которое покажется лично Вам наиболее приемлемым из множества возможных вариантов. Можно и вообще проигнорировать браузер Internet Explorer.
Рассмотрим еще одно важное свойство стилей -
background и связанное с ним свойство background-
position. На рисунке 2.14 приведено изображение ui.png, содержащее альфа-канал (прозрачность, обозначенная на рисунке шахматными клеточками).
Рисунок 2.14 - Изображение ui.png
На рисунке 2.15 приведен пример веб-страницы, созданной с использованием изображения ui.png в качестве фонового
(файл ex2_13.html), а также свойства позиционирования (сдвига) фона - background-position.
1   2   3   4   5   6   7   8   9   ...   12

перейти в каталог файлов


связь с админом