116. Единицы измерения длины в CSS
Очень многое в 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 пикселей (точек на экране).
Подведем итог: пиксели самые удобные единицы измерения длины в CSS.
Похожие уроки и записи блога
- Допишите в CSS код для первого абзаца свойство
font-size
со значением 20 пикселей. Не забывайте ставить точку с запятой после свойства, например,color: #FFF;
. - Допишите в CSS код для второго абзаца свойство
font-size
со значением 25 пунктов. - Допишите в CSS код для третьего абзаца свойство
font-size
со значением 2.5em. - Допишите в CSS код для четвертого абзаца свойство
font-size
со значением половина дюйма.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.