Единицы измерения в CSS. Самоучитель CSS

Единицы измерения в 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 пикселей
 текст 12px и отступ 6px
...
Мы задали тегу body размер шрифта 10пикселей, а текст в теге b будет не только жирным, но и увеличен на 2пикселя потому что 10*1.2=12 и в добавок у этого текса будет отступ(margin) размером не 5, а 6 пикселей, потому что мы шрифт увеличили на 12.
ex - x-heigh этот размер вычисляется относительно нижнего регистра(маленьких букв) шрифта.
текст

Процентные единицы измерения.
Все процентные значения вычисляются от какого-то другого значения длины, например:
...
<body STYLE="font-size:10px;">
текст размером 10 пикселей
 текст 12px 
...

В этом случае размер шрифта берется у другого тега и пересчитывается для тега b
Второй пример:
 текст 10px 
в этом примере тег b берет размер сам у себя и пересчитывает его для расстояния между строками.

Я понимаю что вы пока ничего не понимаете и потому сделал вот такой пример:
Пример правил font-size и line-height

Между верхней и средней линией это font-size, т.е. размер букв, а между средней и нижней это расстояние между строк(line-height). Но пока это не важно, т.к. цель этой страницы всего лишь предоставить вам информацию об единицах измерений.

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

Добавить в закладки

Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!