ТРИДЦАТЬ ЧЕТВЕРТЫЙ УРОК
Единицы измерений
Помните мультфильм, где удава меряли в попугаях? Исходя философски, можно все и вся мерить в чем угодно и как угодно. Но только не в HTML! Собственно говоря, там вообще нет никаких измерений. Разве что проценты. А вот, не хвастаясь, могу сказать, что в CSS есть разные мерки! Пусть их не так много, пусть там нет пернатых, но зато там есть короли! Прикиньте, мерить все в королях! Не верите? А зря! Я вам докажу это на прямо-таки на пальцах вышеуказанных персон! Хотя это может и враки! Может не в пальцах королей дело, а в трех ячменных зернышках?
Если вы решили, что я свихнулась окончательно со своими уроками, то зря. Это я про дюйм говорю! Про дюйм как единицу длины. И вот что любопытно, в одном книжном издании говорится, что "дюйм - это мера длины большого пальца руки короля Генриха VIII", в другом же издании, утверждается, что все это брехня на постном масле, и что дюйм - не что иное, "как длина трех ячменных зерен, вытянутых из средней части колоса и приставленных одно к другому своими концами". И утвердил это совсем не Генрих, а Эдвард II в 1324 году. А в третьем месте черным по белому заявлено, что меры длины были узаконены еще в 1101 году, и не Эдвардом, а Генрихом I! И что главная мера длины - ярд. А дюйм - это одна двенадцатая ярда. А ярд - это ваще "расстояние от носа короля Генриха I до среднего пальца вытянутой руки".
Я так запуталась, что решила вообще ничего не писать про дюймы, но потом открыла добрую, старую энциклопедию и прочитала, что "дюйм = 2,54 см". Коротко и ясно. По ходу дела я тут же схватилась за линейку и промерила свой большой палец... И поняла, что если бы я встала рядом с Генрихами-Эдвардами, то все короли мне в пупок бы дышали, ей-богу!
Ну ладно, кто про что, а мы - про стили. Мы вот возьмем и напишем несколько строк в дюймах. Не зря же пол-урока им посвящено! Итак, открыли быстренько Notepad и написали также быстренько:
И вот такая у нас петрушка из королей получилась:
Пальцы королей.
На рисунке не очень можно понять эти размеры, поэтому лучше посмотрите что получилось у вас, а если вы такие лодыри, то можете посмотреть мою работу по этой ссылке: Пример в дюймах. Великоваты буквы? Но ничего, зато вы, можно сказать, приобщились к истории, а заодно можете сравнить со своими пальчиками и прикинуть куда вам дышат короли. Надеюсь не в затылок! :))
Как видите, дюймы обозначаются "im". А теперь попробуйте изменить разрешение экрана! Обратите внимание, текст, указаный в дюймах не изменяется! Каким вы его заложили - таким он и остается! Что значит палец короля...
С одной стороны, это конечно хорошо. Нефик всяким юзерам дизайн менять! А с другой стороны... У одних зрение получше и им подавай текст с букашку, у других и с тремя очками дюймы не разглядеть. На всех ведь не угодишь! Поэтому для удобства пользователей существуют и относительные единицы измерений, например, пикселы. Вот мы сейчас в пикселах всю правду и напишем:
А вот и этот пример, который вы можете просмотреть - Пример в пикселах
Чтобы дальше вас не мучать столь подробным рассказом, я просто скажу, какие единицы измерений могут применяться в CSS. Думаю, сам процесс вам стал ясен.
Итак, к абсолютным единицам можно отнести не только эти буржуйские дюймы (in), но и миллиметры (mm) и сантиметры (cm). А что касается буржуйских штучек, то если хотите, можно и в пунктах (pt), которые равны 1/72 дюйма, и в пиках (pc), которые равны 12 пунктам. Вот такая вот арифметика.
Что же касается относительных величин, то тут, кроме пикселов (px), можно использовать и проценты, например в стилях написать следующее: font-size:200%. И есть еще две интересные величины - em и ex. Первая величина - это ширина буквы m текущего шрифта, а вторая - высота буквы x шрифта.
Все эти величины касаются не только размеров шрифта, но и других величин, о которых мы будем говорить в следующих уроках. Это может быть и расстояние от границы браузера, и шириной блока, и толщиной линии. Но пока потренируйтесь на кошках. То есть с размерами шрифта. Тоже очень полезное занятие. Развивает глазомер и другие важные функции организма. А я пошла дальше. Догоняйте!
(В. Ахметзянова, 2005 г)