jivo banner 468x60jivo banner 728x90jivo banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180beget banner 468x60beget banner 728x90beget banner 930x180

Руководство по единицам измерения в CSS

Единицы измерения длины могут быть абсолютными, такими как px, pt, cm и т. д., или относительными, например, проценты (%) или единицы em или rem.

Указание единиц CSS обязательно для ненулевых значений. Однако, если значение равно 0, единица измерения может быть опущена (в конце концов, нулевые пиксели — это то же самое измерение, что и нулевые дюймы).

Длина (length) — это измерение, содержащее числовое значение и единицу измерения, например 10px, 2em, 50% и т. д. Пробел не должен появляться между числом и единицей.

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

Относительные единицы измерения указывают значение относительно другого значения. Относительными единицами являются:

Единица Описание
em текущий размер шрифта
ex x-height текущего шрифта

Единицы em и ex зависят от размера шрифта, применяемого к элементу.

Использование Em единиц измерения

Измерение 1em равно вычисленному значению свойства font-size элемента, на котором оно используется. Может использоваться для вертикального или горизонтального измерения.

Например, если font-size элемента установлен в 16px и line-height установлен в 2.5em, то вычисленное значение line-height в пикселях будет 2.5 x 16px = 40px.

p {
    font-size: 16px;
    line-height: 2.5em;
}

Исключение возникает, когда em указывается в значении самого свойства font-size, в этом случае оно вычисляется относительно размера шрифта родительского элемента.

Когда мы указываем размер шрифта в em, 1em равен унаследованному font-size. Если же, размер шрифта: 1.2em; он делает текст в 1,2 раза больше текста родительского элемента.

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:firt-letter {
    font-size: 3em;
    font-weight: bold;
}

Давайте разберемся, о чем этот код. Размер шрифта по умолчанию для всех современных браузеров составляет 16px. Наш первый шаг — уменьшить этот размер для всего документа, установив размер шрифта основного font-size на 62,5%, что приведет к сбросу размера шрифта на 10px (62,5% от 16px).

Теперь вы можете установить размер шрифта для любых элементов, используя единицы em, с помощью простого для запоминания преобразования, умножив значение em на 10. Таким образом, 1em = 10px, 1.2em = 12px, 1.4em = 14px, 1.6em = 16px и т.д.

Использование Ex единиц измерения

Единица ex равна высоте x (x-height) текущего шрифта.

Высота x называется так, потому что она часто равна высоте строчной буквы «x», как показано ниже. Однако ex определяется даже для шрифтов, которые не содержат «x».

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

Абсолютные единицы длины фиксированы относительно друг друга. Они сильно зависят от носителя, на котором идет просмотр текста. Примеры абсолютных единиц: in, cm, mm, pt, pc и px.

Единица Описание
in Дюймы — 1 дюйм равен 2,54 см.
cm Сантиметры.
mm Миллиметры.
pt Points – В CSS одна точка определяется как 1/72 дюйма (0,353 мм).
pc Picas – 1pc равно 12pt.
px Пиксели – 1px равен 0.75pt.

Абсолютные единицы, такие как in, cm, mm и т. д., должны использоваться для печатных носителей и аналогичных устройств с высоким разрешением. Принимая во внимание, что для экранного отображения, такого как настольные устройства и устройства с низким разрешением, рекомендуется использовать пиксельные или em-единицы.

h1 { margin: 0.5in; }       /* inches  */
h2 { line-height: 3cm; }    /* centimeters */
h3 { word-spacing: 4mm; }   /* millimeters */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* picas */

Таблицы стилей, которые используют относительные единицы измерения, такие как em или процент (%), могут легче масштабироваться из одной среды в другую.

beget banner 480x320beget banner 728x90beget banner 120x600etxt banner 480x320etxt banner 728x90etxt banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…
Подробнее

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…
Подробнее

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…
Подробнее