Урок 24. Единицы измерения длины в CSS

📝

Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.

📋 Задание

Допишите в CSS код для первого абзаца свойство font-size со значением 20 пикселей. Не забывайте ставить точку с запятой после свойства, например, color: #FFF;.
Допишите в CSS код для второго абзаца свойство font-size со значением 25 пунктов.
Допишите в CSS код для третьего абзаца свойство font-size со значением 2.5em.
Допишите в CSS код для четвертого абзаца свойство font-size со значением половина дюйма.

Очень многое в CSS зависит от единиц измерения длины. Было бы нельзя задать отступы, указывать ширину элемента, если бы не было единиц измерения длины. Единицы измерения длины могут быть как положительные, так и отрицательные (не все могут быть отрицательными), а так же могут быть целыми и вещественными. Любая длина указывается не только цифрами, но и двумя буквами после них. Эти буквы означают аббревиатуру единицы измерения, которую используем. Например, есть in (дюймы), px (пиксели) и другие. Если вы указываете длину 0, то единицы измерения писать не нужно.

В CSS существует два вида единиц измерения длины: абсолютные значения и относительные значения. Далее подробно.

Абсолютные единицы измерения длины

Целых пять абсолютных единиц измерения длины, но их практически не используют в веб-разработке – они не такие удобные, как относительные единицы.

Дюймы (in) – американская мера измерения длины. Совсем не понятно, зачем эти единицы измерения в веб-разработке.
Сантиметры (cm)
Миллиметры (mm)
Пункты (pt) - эта типографическая единица измерения, чаще всего применяется для текста. 72 пункта равны одному дюйму.
Пики (pc) – тоже типографическая единица измерения, которая равна одной шестой дюйма.

А далее примеры применения абсолютных единиц измерения. Смотрим первый пример.

div { width: 3in; } /* ширина блока 3 дюйма */
div { width: 1.5cm; } /* ширина блока 1.5 сантиметра */
div { width: 13mm; } /* ширина блока 13 миллиметров */
div { font-size: 12pt; } /* шрифт 12 пунктов */
div { font-size: 12pc; } /* шрифт 12 пик */

💡 Примечание

Между значением (цифрой) и единицами измерения нет пробела! Например, 21px - после 21 нет пробела.

Относительные единицы измерения длины

Существует три относительных единицы измерения длины: em, ex, px. Далее подробно обо всех.

Подробно о единицах измерения em и ex

Допустим, font-size для одного из шрифтов равен 10px, то получается 1em для этого шрифта равен 10px. Давайте рассмотрим пример второй. Даны три абзаца с размером шрифта 14px. Сделаем отступ слева у первого абзац 1em, а у второго 2em и посмотрим что получилось.

p { font-size: 14px; }
p.second { margin-left: 1em; }
p.third { margin-left: 2em; }

<p class = "first">Абзац</p>
<p class = "second">Абзац с отступом 1em</p>
<p class = "third">Абзац с отступом 2em</p>

Подробно о единицах измерения px (пиксель)

Пиксель – это точка на экране. Пиксели практически идеальны. Если напишем font-size: 20px; то высота шрифта будет 20 пикселей (точек на экране).

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.

Урок 25. URL в CSS