Техника Web-дизайна для студента

Единицы измерения в каскадных таблицах стилей

По сравнению с HTML в CSS можно использовать существенно больше единиц измерения и применять их не только к размерам объектов, но и к размеру шрифта. В приведенных выше приме­рах мы задавали размеры шрифта в пунктах (pt) и пикселях (рх).

Единицы измерения принято подразделять на абсолютные и от­носительные. Абсолютные единицы приведены в табл. 7.1.

Большинство приведенных в таблице единиц нам хорошо из­вестно и, казалось бы, нет ничего удобнее при создании veb - страниц использовать единицы, к которым давно привык, на­пример сантиметры. Однако следует иметь в виду, что сантиметр на экране монитора будет отличаться от сантиметра на обычной линейке. То же самое можно сказать и про миллиметр, дюйм, пункт и пику, которые жестко связаны с сантиметром извест­ными соотношениями.

Объясняется это тем, что перед выводом на экран все величины преобразуются в пиксели, для чего используется масштаб изо­бражения. В операционной системе Ymdows ХР, чтобы посмот­реть масштаб изображения, требуется открыть диалоговое окно

Свойства: Экран (открывается двукратным щелчком по значку Экран в папке Панель управления). Перейдя на вкладку Пара­метры, нужно щелкнуть по кнопке Дополнительно. Откроется диалоговое окно Свойства: Модуль подключения монитора, в ко­тором на вкладке Общие и можно увидеть масштаб изображе­ния. Обычно масштаб изображения составляет 96 пиксе­лей/дюйм. Например, если задан размер 5 сантиметров (ст), то на экране монитора это будет составлять 5/2,54*96 = 189 пиксе­лей. Так как размер пикселя зависит от размера экрана монито­ра и установленного разрешения экрана (800 х 600, 1024 х 768 и т. д.), то становится понятно, что все абсолютные величины являются таковыми лишь для монитора с конкретными характе­ристиками и практически всегда будут отличаться от реальных сантиметров, дюймов и т. д. В связи с этим наиболее удобной единицей для жесткой компоновки страницы, т. е. задания аб­солютных размеров объектов и их координат, является пиксель. Задавая размеры в пикселях, придется ориентироваться только на разрешение экрана, а остальные параметры, такие как размер экрана и масштаб изображения, на внешний вид страницы вли­ять не будут.

Относительные единицы приведены в табл. 7.2.

Для гибкой компоновки страниц, когда размеры объекта зависят от размера окна браузера, можно использовать проценты. На­пример, если для компоновки страницы использована таблица, размеры которой заданы в процентах, относительно размеров окна браузера, то, задав размеры рисунков, находящихся в ячей­ках таблицы, также в процентах, но относительно размеров яче­ек, можно получить страницу с гибкой компоновкой, которая будет практически одинаково выглядеть на мониторах с разны­ми параметрами.

Весьма полезной может быть и относительная единица ет, с по­мощью которой можно задавать размеры объектов и их координа­ты относительно размера шрифта. Примеры использования относи­тельных единиц будут рассмотрены в листинге 7.6 и в разделе 8.19.