|
Единицы измерения в CSS.
Еще одна причина по которой мы не можем приступить к обучению это единицы измерения.
В HTML с этим проще, там используются только относительные единицы измерения(в пикселях и/или процентах).
Вот на пример в HTML width="276" и браузер поймет что это пиксели, потому что
в HTML, либо пиксели либо проценты и если отсутствует этот знак "%" значит это пиксели, а если
в css задать width:276 то браузер такую ширину просто проигнорирует,
а правильно: width:276px.
Теперь поговорим о числах, в CSS применяются только десятичные числа, т.е. десятеричные.
Они могут быть как целыми(1, 10, 125 и т.п.) так и с плавающей запятой(0.1, 1.2, 2.25 и т.п.), но разделителем
является точка. Так-же размеры могут быть положительными(+) или в некоторых случаях отрицательными(-)(-1, -1.2 и т.п),
в положительных плюс не ставится, т.к. этот тип чисел по умолчанию.
Абсолютные единицы измерения:
mm - миллиметры
cm - сантиметры
in - inches/дюймы, 1 дюйм = 25.4милиметра
pt - points/пункты, 1 пункт = 1/72 дюйма
pc - picas/пики, 1 пика = 12 пунктам
Эти типы единиц измерения используются только когда известны разрешения экрана. Если
пользовательский агент(браузер) не поддерживает данный тип, то он обязан определить
относительный размер содержимого(объекта, текста и т.п.).
Относительные единицы измерения:
px - пиксель, это единица измерения чаще всего определяющаяся относительно разрешения монитора.
em - эта единица измерения относительно размера шрифта(font-size).
Пример:
...
<body STYLE="font-size:10px;">
текст размером 10 пикселей
<b STYLE="font-size:1.2em; margin: 0.5em;"> текст 12px и отступ 6px</b >
...
Мы задали тегу body размер шрифта 10пикселей, а текст в теге b будет не только
жирным, но и увеличен на 2пикселя потому что 10*1.2=12 и в добавок у этого текса будет
отступ(margin) размером не 5, а 6 пикселей, потому что мы шрифт увеличили на 12.
ex - x-heigh этот размер вычисляется относительно нижнего регистра(маленьких букв) шрифта.
<b STYLE=" margin: 0.5ex;">текст</b >
Процентные единицы измерения.
Все процентные значения вычисляются от какого-то другого значения длины, например:
...
<body STYLE="font-size:10px;">
текст размером 10 пикселей
<b STYLE="font-size:120%;"> текст 12px </b >
...
В этом случае размер шрифта берется у другого тега и пересчитывается для тега b
Второй пример:
<b STYLE="font-size:10px; line-height: 120%"> текст 10px </b >
в этом примере тег b берет размер сам у себя и пересчитывает его для расстояния между строками.
Я понимаю что вы пока ничего не понимаете и потому сделал вот такой пример:

Между верхней и средней линией это font-size, т.е. размер букв, а между средней и нижней это расстояние между строк(line-height).
Но пока это не важно, т.к. цель этой страницы всего лишь предоставить вам информацию об единицах измерений.
Дальше буду часто употреблять вот такие слова: родитель(ский), дочерний и наследование,
Первых два слова будут относиться к тегам, например тег HTML для HEAD и BODY является родительским,
потому что эти 2 тега у него внутри, в свою очередь HEAD и BODY для тега HTML являются дочерними по той-же
причине. Тоже самое можно сказать об моих примерах выше, тег BODY является родителем для тега b,
а тег b для BODY дочерним и т.д. и т.п. Теперь об наследовании дочерние теги наследуют размеры у своих родителей,
например если размер шрифта не задан вообще, то у любого браузера есть свои настройки, в том числе и размеры шрифтов,
эти размеры передаются тегу HTML, а он как родитель передает их BODY, а BODY уже тегу B и т.д.
Наследственность не всегда происходит, но об этом на следующих страницах.
| |