Сейчас на сайте:
Пользователей: 0
Отсутствуют.
Роботов: 2
Googlebot, Yandex
Гостей: 73
Всех: 75
ВНИМАНИЕ! Конкурс по программированию!
Проект Programmers.kz и школа hotPen3D2D предлагает Вам курсы по веб-дизайну, веб-программированию и компьютерной графике. Подробности здесь.
Информация к новости
- Просмотров: 925
- Автор: КазКиберГетик
Единицы измерений
Категория: WEB-Design » CSS » Уроки CSS
Помните мультфильм, где удава меряли в попугаях? Исходя философски, можно все и вся мерить в чем угодно и как угодно. Но только не в HTML! Собственно говоря, там вообще нет никаких измерений. Разве что проценты. А вот, не хвастаясь, могу сказать, что в CSS есть разные мерки! Пусть их не так много, пусть там нет пернатых, но зато там есть короли! Прикиньте, мерить все в королях! Не верите? А зря! Я вам докажу это на прямо-таки на пальцах вышеуказанных персон! Хотя это может и враки! Может не в пальцах королей дело, а в трех ячменных зернышках? Если вы решили, что я свихнулась окончательно со своими уроками, то зря. Это я про дюйм говорю! Про дюйм как единицу длины. И вот что любопытно, в одном книжном издании говорится, что "дюйм - это мера длины большого пальца руки короля Генриха VIII", в другом же издании, утверждается, что все это брехня на постном масле, и что дюйм - не что иное, "как длина трех ячменных зерен, вытянутых из средней части коло-а и приставленных одно к другому своими концами". И утвердил это совсем не Генрих, а Эдвард II в 1324 году. А в третьем месте черным по белому заявлено, что меры длины были узаконены еще в 1101 году, и не Эдвардом, а Генрихом I! И что главная мера длины - ярд. А дюйм - это одна двенадцатая ярда. А ярд - это ваще "расстояние от носа короля Генриха I до среднего пальца вытянутой руки". Я так запуталась, что решила вообще ничего не писать про дюймы, но потом открыла добрую, старую энциклопедию и прочитала, что "дюйм = 2,54 см". Коротко и ясно. По ходу дела я тут же схватилась за линейку и промерила свой большой палец... И поняла, что если бы я встала рядом с Генрихами-Эдвардами, то все короли мне в пупок бы дышали, ей-богу! Ну ладно, кто про что, а мы - про стили. Мы вот возьмем и напишем несколько строк в дюймах. Не зря же пол-урока им посвящено! Итак, открыли быстренько Notepad и написали также быстренько: Листинг 5.
Пример с дюймами
P {font-size:1in}
H2 {font-size:2in; text-align:center}
Заголовок размером в два дюйма
А вот этот текст размером в один дюйм, и как утверждают одни - это и есть размер большого пальца короля Генриха VIII, другие - длина трех зерен из средней части колоска, а третьи - что это одна двенадцатая от расстояния от носа до среднего пальца вытянутой руки короля Генриха I.
И вот такая у нас петрушка из королей получилась:
Королевская распальцовка
Пример с пикселами
P {font-size:15px}
H2 {font-size:20px; text-align:center}
Чтобы дальше вас не мучать столь подробным рассказом, я просто скажу, какие единицы измерений могут применяться в CSS. Думаю, сам процесс вам стал ясен. Итак, к абсолютным единицам можно отнести не только эти буржуйские дюймы in, но и миллиметры mm и сантиметры cm. А что касается буржуйских штучек, то если хотите, можно и в пунктах pt, которые равны 1/72 дюйма, и в пиках pc, которые равны 12 пунктам. Вот такая, блин, арифметика. Что же касается относительных величин, то тут, кроме пикселов px, можно использовать и проценты, например в стилях написать следующее: font-size:200%. И есть еще две интересные величины - em и ex. Первая величина - это ширина буквы m текущего шрифта, а вторая - высота буквы x шрифта. Все эти величины касаются не только размеров шрифта, но и других величин, о которых мы будем говорить в следующих уроках. Это может быть и расстояние от границы браузера, и шириной блока, и толщиной линии. Но пока потренируйтесь на кошках. То есть с размерами шрифта. Тоже очень полезное занятие. Развивает глазомер и другие важные функции организма. А я пошла дальше. Догоняйте!
Автор:
Валентина Ахметзянова, почта - dikarrka@yandex.ru
Пример с дюймами
P {font-size:1in}
H2 {font-size:2in; text-align:center}
Заголовок размером в два дюйма
А вот этот текст размером в один дюйм, и как утверждают одни - это и есть размер большого пальца короля Генриха VIII, другие - длина трех зерен из средней части колоска, а третьи - что это одна двенадцатая от расстояния от носа до среднего пальца вытянутой руки короля Генриха I.
Королевская распальцовка
На рисунке не очень можно понять эти размеры, поэтому лучше посмотрите что получилось у вас. Пример в дюймах. Великоваты буквы? Но ничего, зато вы, можно сказать, приобщились к истории, а заодно можете сравнить со своими пальчиками и прикинуть куда вам дышат короли. Надеюсь не в затылок!
Как видите, дюймы обозначаются im. А теперь попробуйте изменить размер шрифта в настройках браузера! Обратите внимание, текст, указанный в дюймах не изменяется! Каким вы его заложили - таким он и остается! Что значит палец короля... С одной стороны, это конечно хорошо. Нефик всяким юзерам дизайн менять! А с другой стороны... У одних зрение получше и им подавай текст с букашку, у других и с тремя очками дюймы не разглядеть. На всех ведь не угодишь! Поэтому для удобства пользователей существуют и относительные единицы измерений, например, пикселы. Вот мы сейчас в пикселах всю правду и выложим: Листинг 6.Пример с пикселами
P {font-size:15px}
H2 {font-size:20px; text-align:center}
Заголовок размером в 20 пикселов
А вот этот текст размером в 15 пикселов, и если попро-бовать изменить разрешение экрана, то можно будет читать этот текст и без бинокля. Кому как нравится
Автор:
Валентина Ахметзянова, почта - dikarrka@yandex.ru
Вернуться
Комментариев: 0
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.




