Единицы измерения в 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 и т.д. Наследственность не всегда происходит, но об этом на следующих страницах.
