em, px, pt, cm, in…
См. также оглавление со всеми советами.
На этой странице:
em, px, pt, cm, in…Указывать длину в CSS можно в разных единицах. Некоторые из них
пришли из типографской традиции, как пункт (pt)
и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном
обиходе. Есть и «волшебная» единица, придуманная специально для
CSS: px. Значит ли это, что для разных свойств нужны
разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство
со значением в пикселях (margin: 5px) также
допускает и значения в дюймах или сантиметрах (margin:
1.2in; margin: 0.5cm), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
| Рекомендуются | Можно иногда | Не рекомендуются | |
|---|---|---|---|
| Экран | em, px, % | ex | pt, cm, mm, in, pc |
| Печать | em, cm, mm, in, pt, pc, % | px, ex |
Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc
Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
↑
72pt
↓
Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если
у устройства вывода достаточно высокое разрешение. На лазерном
принтере 1cm должен быть точно равен 1 сантиметру.
Но на устройствах низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, разные устройства и разные
реализации CSS норовят отобразить их по-разному. Лучше оставить эти
единицы для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.
В прошлом CSS требовал, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах. Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные единицы обязаны работать правильно только при выводе на печать и на устройствах высокого разрешения.
CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.
Еще одна причина не использовать абсолютные единицы где-либо,
кроме печати: на разные экраны мы смотрим с разного расстояния.
1 сантиметр на экране настольного компьютера выглядит маленьким.
Но на мобильном экране прямо перед глазами — это много. Лучше
вместо них использовать относительные единицы, напр. em.
Единицы em и ex зависят от размера
шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому
задан шрифт в 2in, 1em и означает эти 2in. Указание размеров
(напр., для отступов) в em означает, что они
задаются относительно шрифта, и какой бы ни был шрифт
у пользователя — крупный (напр. на большом экране) или мелкий
(напр. на мобильном устройстве), эти размеры останутся
пропорциональными. Объявления наподобие text-indent:
1.5em и margin: 1em в CSS крайне популярны.
Единица ex используется нечасто. В ней выражаются
размеры, которые должны отсчитываться от x-высоты шрифта.
X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов
с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв,
и если важно, чтобы какая-то картинка, например, соответствовала
x-высоте, единица ex к вашим услугам.
Единица px в CSS волшебная. Она не связана
с текущим шрифтом, но и с физическими сантиметрами или дюймами
обычно тоже не связана. Единица px определена как
что-то маленькое, но видимое, т.е. горизонтальную линию толщиной
1px можно было отобразить с четкими краями (без сглаживания). Что
считается четким, маленьким и видимым, зависит от устройства
и способа пользования им: держите ли вы его прямо перед глазами,
как мобильный телефон, на расстоянии вытянутой руки, как монитор,
или где-то на промежуточном расстоянии, как электронную книгу?
Поэтому
Чтобы понять, почему единица px именно такая,
представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог
отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть
больше. Свое название единица px получила от тех
экранных пикселей.
Нынешние устройства в принципе могут отображать и более мелкие
четкие точки (хотя их может быть трудно разглядеть без лупы).
Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры,
в особенности, могут отображать четко отображать линии гораздо
тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же,
как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.
На самом деле CSS требует, чтобы 1px был точно
равен 1/96 дюйма при любом выводе на печать. В CSS считается, что
принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати
px не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единицы cm, pt, mm, in и pc, как
объяснялось выше).
CSS также определяет, что растровые изображения (напр.
фотографии) по умолчанию отображаются в масштабе 1 пиксель
изображения на 1px. Фотография разрешением 600 на 400 будет 600px
шириной и 400px высотой. Тем самым пиксели фотографии привязываются
не к пикселям устройства вывода (которые могут быть очень мелкими),
а к единицам px, а не pt, cm и т.д.
Используйте
em или px для шрифтовЕдиницы pt (пункт) and pc (пика)
CSS получил в наследство от печатного дела. Там традиционно
применялись эти и подобные единицы, а не сантиметры или дюймы.
В CSS незачем использовать pt, пользуйтесь любой
единицей на свой выбор. Но есть хорошая причина
не использовать ни pt, ни других абсолютных
единиц, а использовать только em и px.
Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:
0.5pt, 1px, 1pt, 1.5px, 2px
Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).
Волшебная единица CSS, px, часто бывает удачным
выбором, особенно если нужно выровнять текст с картинками, либо
просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо
будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em. Идея
в том, чтобы 1) не задавать размер шрифта для элемента BODY
(в HTML), а использовать размер шрифта по умолчанию для устройства,
поскольку это наиболее удобный для читателя размер; и 2) указывать
размеры шрифта других элементов в h2
{font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее
основного шрифта страницы.
Едиственное место, где можно использовать pt (либо cm или in) для размера
шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт
был строго определенного размера. Но даже там чаще всего лучше
использовать размер шрифта по умолчанию.
Таким образом, единица px избавляет
от необходимости знать разрешение устройства. Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:
div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
/* Media with 2 or more dots per px */
div.mybox { border: 1.5px solid }
}
Новые единицы измерения в CSS
Чтобы было еще проще писать стилевые правила, зависящие только
от размера шрифта по умолчанию, с 2013 года в CSS есть новая
единица: rem. Один rem (от «root em»,
т.е. «корневой em» или «em корневого элемента») — это размер шрифта
корневого элемента в документе. В отличие от em,
который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать
элементам P и h2 одинаковый внешний отступ слева, вот для сравнения
CSS-код до 2013 года:
p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }и новая версия:
p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }Благодаря другим новым единицам стало можно указывать размеры
относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin,
соответствующая меньшему из vw и vh.
И vmax (можете догадаться, что она делает).
Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
Единицы измерения в CSS | Techrocks
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться ×Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».
В CSS есть разные единицы измерения. Больше всего известны пиксели, но есть и другие – не такие популярные, но весьма удобные в некоторых случаях.
В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).
Относительные единицы измерения
Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.
В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).
Давайте рассмотрим, какие же относительные единицы измерения у нас есть.
- % – измерение в процентах.
- em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
- rem – размер шрифта относительно корневого элемента документа.
- ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
- ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.
See the Pen CSS Relative Units by Matthias (@fullstack-to) on CodePen.
Чем отличаются em и rem?
Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.
А в единицах em вычисления основаны на размере шрифта родительского элемента.
rem очень упрощает вычисления размеров шрифтов. Если размер шрифта в элементе не зависит от размера шрифта родителя, это очень удобно, например, для вложенных элементов или даже нескольких вложенных элементов, таких как списки. Единицы rem всегда вычисляются относительно размера шрифта в теге html.
Различные семейства шрифтов
Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.
На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).
Абсолютные единицы измерения
Абсолютные единицы измерения имеют фиксированный размер (нельзя же принять какой-то свой размер сантиметра). Если в вашем случае требуется указать точную длину, вам нужны абсолютные единицы измерения. Например, это подходит для элементов, размер которых не должен меняться. Также абсолютные единицы могут быть полезны, если вы хотите определить ограничения для каких-то областей, чтобы они не могли стать слишком широкими или слишком узкими. Те элементы, размеры которых вы задаете в абсолютных величинах, не меняются в зависимости от размеров экрана, ориентации в пространстве и прочих вещей.
- cm – сантиметры. 1 cm = 1 cm
- mm – миллиметры. 10 mm = 1 cm
- in – дюймы (inches). 1 in = 96px = 2.54 cm
- px – пиксели. 1 px = 1/96 от 1 in
- pt – поинты (points). 1 pt = 1/72 от 1 in
- pc – пайки (пики, англ. pica). 1pc = 12 pt
See the Pen CSS Absolute Units by Matthias (@fullstack-to) on CodePen.
Единицы измерения области просмотра (viewport-единицы)
Viewport-единицы представляют собой процентное отношение к текущей величине области просмотра браузера. От простого выражения в процентах viewport-единицы отличаются тем, что они всегда высчитываются на основе текущего размера области просмотра. А размер, выраженный просто в процентах, вычисляется по отношению к родительскому элементу.
- vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
- vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
- vmin – 1% от меньшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
- vmax – 1% от большего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).
See the Pen Viewport Units by Matthias (@fullstack-to) on CodePen.
vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.
| Единица измерения | Описание | Пример |
| % | Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента. | div {width: 50%;} |
| cm | Определяет измерение в сантиметрах. | p {padding-top: 1cm;} |
| em | Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt. | h2 {letter-spacing: 3em;} |
| ex | Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта. | p {letter-spacing: 7ex;} |
| in | Определяет измерение в дюймах. | h3 {word-spacing: .10in;} |
| mm | Устанавливает измерение в миллиметрах. | div {margin: .15mm;} |
| pc | Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt). | h4 {font-size: 10pc;} |
| pt | Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм. | table {font-size: 20pt;} |
| px | Устанавливает измерение в пикселях экрана. | p {margin: 30px;} |
| vh | Равен 1% высоты окна просмотра. | h2 {font-size: 2.0vh;} |
| vw | Равен 1% ширины окна просмотра. | h3 {font-size: 2.0vw;} |
| vmin | Равен 1vw или 1vh, в зависимости от того, что меньше. | div {font-size: 5vmin;} |
Значения свойств CSS — Изучение веб-разработки
Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.
В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
Note: You’ll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.
Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the color (en-US) property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.
В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию rgb():
h2 {
color: black;
background-color: rgb(197,93,161);
}
Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <color> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция rgb() и т.д. Вы можете воспользоваться любым доступным значением <color> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <color> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.
Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.
Существуют различные типы числовых данных, которые вы можете использовать в CSS. Следующие типы классифицируются как числовые:
| Тип данных | Описание |
|---|---|
<integer> | <integer> (целое число) — целое число такое как 1024 или -55. |
<number> |
|
<dimension> |
|
<percentage> |
|
Длины
Числовой тип, с которым вы будете сталкиваться чаще всего это <length> (длина), например 10px (пиксели) или 30em. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.
Абсолютные единицы длины
Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
| Единицы | Название | Эквивалент |
|---|---|---|
cm | Centimeters/Сантиметры | 1cm = 96px/2.54 |
mm | Millimeters/Миллиметры | 1mm = 1/10th of 1cm |
Q | Quarter-millimeters/Четверть-мм | 1Q = 1/40th of 1cm |
in | Inches/Дюймы | 1in = 2.54cm = 96px |
pc | Picas/Пики | 1pc = 1/16th of 1in |
pt | Points/Точки | 1pt = 1/72th of 1in |
px | Pixels/Пиксели | 1px = 1/96th of 1in |
Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем cm (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это px (пиксели).
Единицы относительной длины
Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
| Единица | Относительна к |
|---|---|
em | Размер шрифта родительского элемента. |
ex | x-высота шрифта элемента. |
ch | Предварительная мера (ширина) глифа «0» шрифта элемента. |
rem | Размер шрифта корневого элемента. |
lh | Высота строки элемента. |
vw | 1% от ширины окна просмотра. |
vh | 1% от высоты окна просмотра. |
vmin | 1% от меньшего измерения ширины окна просмотра. |
vmax | 1% от большего измерения ширины окна просмотра. |
Изучение на примере
В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет width (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.
Второй блок имеет ширину, установленную в единицах vw (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <iframe>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны открыть этот пример в отдельной вкладке браузера.
Третий блок использует единицы em. Они относительны к размеру шрифта. Я установил размер шрифта 1em для содержимого <div>, который имеет класс .wrapper. Измените это значение на 1.5em и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.
После выполнения инструкция выше, попробуйте поиграть со значениями и посмотрите, что у вас получится.
em и rem
em и rem — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как стилизация текста или разметка CSS. Приведённый ниже пример показывает это.
HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс ems, а второй класс rems.
Чтобы начать, мы установили 16px для размера шрифта элемента <html>.
Повторим, единица em означает «размер шрифта родительского элемента». Элементы <li> внутри <ul> с классом ems получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на 1.3em — 1.3 раза от размера шрифта родителя.
Повторим, единица rem означает «размер шрифта корневого элемента» (rem значит «root em». (root — корень)). Элементы <li> внутри <ul> с классом rems получают свои размеры от корневого элемента (<html>). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.
Однако, если вы измените font-size (размер шрифта) <html> в CSS, вы увидите что все остальное изменится относительно ему — и rem— и em-размеры текста
Проценты
Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите font-size элемента как проценты, то это будет процент от font-size родительского элемента. Если вы используете процент для значения width (ширина), то это будет процент от width родителя.
В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.
Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.
Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.
В следующем примере размер шрифта установлен в процентах. Каждый <li> имеет font-size 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.
Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают <length-percentage>, тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только <length>, то использование процентов невозможно.
Числа
Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство opacity, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между 0 (полностью прозрачное) и 1 (полностью мутное).
В примере ниже, попробуйте изменить значение opacity на различные десятичные значения между 0 и 1 и посмотрите, как блок и его содержимое становится более и/или менее мутными.
Внимание: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.
Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо ещё.
Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.
Внимание: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.
Ключевые слова цвета
Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <color> .
Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.
Шестнадцатеричные RGB значения
Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).
Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.
И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.
RGB и RGBA значения
Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.
Давайте перепишем наш последний пример используя RGB цвета:
А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на 0, то это сделает цвет полностью прозрачным, тогда как 1 сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.
Внимание: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства opacity которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.
In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.
In this example, try changing the alpha channel values to see how it affects the color output.
Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example’s rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.
HSL and HSLA values
Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:
- Hue: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.
- Saturation: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
- Lightness: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)
We can update the RGB example to use HSL colors like this:
Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I’ve demonstrated this below by changing my RGBA example to use HSLA colors.
You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!
The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.
In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.
Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.
The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.
A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.
In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.
Play around with these values to see how you can push the image around.
Throughout the examples above, we’ve seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.
There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.
The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We’ve already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.
A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It’s particularly useful if you want to work out values that you can’t define when writing the CSS for your project, and need the browser to work out for you at runtime.
For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can’t do this calculation beforehand because we don’t know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.
This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.
The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.
For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!
Что такое px, em, rem в CSS?
Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
- Px (пиксель) – это единица измерения величины объектов относительно размера экрана.
- Em – это единица, основанная на размере шрифта родительского элемента (в пикселях).
- Rem – это единица,основанная на размере шрифта корневого элемента html (в пикселях).
Мы можем использовать эти единицы в различных свойствах CSS, таких как font-size, padding, margin, position.
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Пример:
div { font-size: 10px; padding: 10px; }Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, поскольку они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em.
Пример:
div { font-size: 10px; padding: 10em; }Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, поскольку размер берётся из свойства font-size. В нем каждое значение принимается за 1em, то есть (10px = 1em, поэтому 10em = 10px * 10 = 100px).
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Пример:
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
div { font-size: 10px; padding: 10rem; }Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Вопрос, который возникает при использовании этих единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem. Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?
- Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на сайте, там, где не нужно менять размеры. В этом случае “rem” предпочтительнее.
- Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля, применяйте “em”.
Для вложенных элементов используется только одна единица измерения – em. Если размеры шрифта или отступов дочернего элемента должны быть наполовину меньше, чем у родительского, тогда используйте em.
Пример:
div.parent { font-size: 10px; }
div.parent div.child { font-size: 0.5em; }
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
Пример:
div.parent { font-size: 10px; padding: 10em; margin: 10rem;}
div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}
Для (div.parent)
- Размер шрифта = 10px.
- Внутренние поля с каждой стороны (10px = 1em, поэтому 10em * 10px) = 100px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
Для (div.child)
- Размер шрифта (0.5em = 10px / 2) = 5px.
- Внутренние поля с каждой стороны (5px = 1em, поэтому 10em * 5px) = 50px.
- Отступы с каждой стороны (14px = 1rem, поэтому 10rem * 14px) = 140px.
Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).
Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).
Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Данная публикация является переводом статьи «Use of px, em, rem units in css, which one I have to use and when?» , подготовленная редакцией проекта.
О единице измерения em в CSS
При работе с CSS всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство. Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS, по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai. В этой статье я собираюсь использовать его опыт.
В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em. Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.
Посмотрите на следующий код CSS:
.example {
font-size: 20px;
}В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size) будет равен 20px. Так что, если мы добавим строку:
.example {
font-size: 20px;
border-radius: .5em;
}Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5). Аналогично:
.example {
font-size: 20px;
border-radius: .5em;
padding: 2em;
}Значение отступа 2em будет равно 40px (20 * 2). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.
Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px. Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.
Понятие «компоненты» довольно популярно сейчас. Оно хорошо подходит для модульных методов CSS, а также для идеи инкапсулированных разделов кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда веб-компоненты получат широкую поддержку.
Метод работает следующим образом: используется свойство font-size, которое создает основную единицу для различных элементов внутри модуля. Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.
Давайте посмотрим на это в действии:
Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме. Слайдер содержит одно значение корневого элемента компонента: значение font-size.
Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, пользователь может менять размеры в настройках. Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая различные значения во всех частях компонента.
Когда размер шрифта изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементах, делая все части компонента пропорционально гибкими.
Обратите внимание, что:
- Внутри компонента все размеры задаются с помощью em. Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
- Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
- CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого метода, потому что не нужно менять все размеры в медиа-запросах, а только размер шрифта.
Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.
Возможно, вам придется подправить некоторые значения единицы измерения em в CSS. И как в случае с границей родительского элемента в примере, вы вряд ли захотите изменить размер. Так как свойство применяется ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотите сохранить.
Не нужно использовать пиксели, чтобы установить корневой font-size. Вы можете использовать для этого em, но помните, что эти единицы измерения будут передаваться по наследству от родителей.
Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент <html>. Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.
Что касается использования препроцессора Sass, то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.
Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов. Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS.
Пожалуйста, оставляйте свои отзывы по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, подписки, отклики, дизлайки!
Данная публикация является переводом статьи «The Power of em Units in CSS» , подготовленная редакцией проекта.
em | CSS | WebReference
Единица em соответствует значению свойства font-size элемента. Если это значение не задано, тогда берётся значение font-size родителя.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>em</title> <style> div { font-size: 20px; /* Размер шрифта в пикселях */ padding: 1em; /* Поля вокруг текста */ border: 2px solid #ccc; /* Параметры рамки */ border-radius: .5em; /* Радиус скругления */ } </style> </head> <body> <div>Роджерс первым ввел в научный обиход понятие «клиент», так как перцепция начинает потребительский код.</div> </body> </html>В данном примере параметры блока устанавливаются через единицу em, при этом размер, относительно которого считается em, задан через свойство font-size.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.09.2019
Редакторы: Влад Мержевич
единиц CSS
Единицы CSS
CSS имеет несколько различных единиц для выражения длины.
Многие свойства CSS принимают значения длины, такие как ширина , поле , отступ , размер шрифта и т. Д.
Длина — это число, за которым следует единица длины, например 10px , 2em и т. Д.
Пример
Установите разные значения длины, используя px (пиксели):
h2 {размер шрифта: 60 пикселей;
}
p {
font-size: 25px;
высота строки: 50 пикселей;
}
Попробуйте сами »
Примечание: Пробел не может быть между числом и единицей измерения.Однако, если значение 0 , блок можно не устанавливать.
Для некоторых свойств CSS разрешена отрицательная длина.
Существует два типа единиц длины: абсолютных и относительных .
Абсолютные длины
Абсолютные единицы длины фиксированы, и длина, выраженная в любой из них, будет отображаться как точно такой размер.
Единицы абсолютной длины не рекомендуется использовать на экране, потому что размеры экрана сильно различаются.Однако их можно использовать, если известно средство вывода, например что касается макета печати.
| Установка | Описание |
|---|---|
| см | см Попробуй |
| мм | миллиметров Попробуй |
| дюйм | дюймов (1 дюйм = 96 пикселей = 2,54 см) Попробуй |
| пикселей * | пикселей (1 пиксель = 1/96 часть 1 дюйма) Попробуй |
| пт | точек (1pt = 1/72 от 1in) Попробуй |
| шт | пик (1 шт. = 12 пт) Попробуй |
* Пикселей (пикселей) относительно устройства просмотра.Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) дисплея устройства. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.
Относительная длина
Единицы относительной длины определяют длину относительно другого свойства длины. Относительные единицы длины лучше масштабируются между различными средами визуализации.
| Установка | Описание | |
|---|---|---|
| выс. | Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) | Попробовать |
| бывш. | Относительно высоты текущего шрифта по оси x (используется редко) | Попробовать |
| шасси | Относительно ширины «0» (нуля) | Попробовать |
| rem | Относительно размера шрифта корневого элемента | Попробовать |
| VW | Относительно 1% ширины области просмотра * | Попробовать |
| vh | Относительно 1% высоты области просмотра * | Попробовать |
| vmin | Относительно 1% меньшего размера области просмотра * | Попробовать |
| vmax | Относительно 1% большего размера области просмотра * | Попробовать |
| % | Относительно родительского элемента | Попробовать |
Совет: Единицы em и rem идеально подходят для создания идеальных
масштабируемый макет!
* Viewport = размер окна браузера.Если область просмотра 50 см
широкий, 1vw = 0,5 см.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую единица длины.
| Блок длины | |||||
|---|---|---|---|---|---|
| em, ex,%, px, cm, mm, in, pt, pc | 1,0 | 3,0 | 1,0 | 1,0 | 3,5 |
| шасси | 27.0 | 9,0 | 1,0 | 7,0 | 20,0 |
| rem | 4,0 | 9,0 | 3,6 | 4,1 | 11,6 |
| vh, vw | 20,0 | 9,0 | 19,0 | 6,0 | 20,0 |
| vmin | 20,0 | 12,0 | 19,0 | 6.0 | 20,0 |
| vmax | 26,0 | 16,0 | 19,0 | 7,0 | 20,0 |
Значения и единицы CSS — Изучение веб-разработки
Каждое свойство, используемое в CSS, имеет тип значения, определяющий набор значений, разрешенных для этого свойства. Просмотр любой страницы свойств в MDN поможет вам понять значения, связанные с типом значения, которые действительны для любого конкретного свойства.В этом уроке мы рассмотрим некоторые из наиболее часто используемых типов значений, а также их наиболее распространенные значения и единицы измерения.
В спецификациях CSS и на страницах свойств здесь, в MDN, вы сможете определять типы значений, поскольку они будут заключены в угловые скобки, например или . Когда вы видите тип значения как допустимый для определенного свойства, это означает, что вы можете использовать любой допустимый цвет в качестве значения для этого свойства, как указано на справочной странице .
Примечание : вы также увидите типы значений CSS, называемые типами данных . Термины в основном взаимозаменяемы — когда вы видите что-то в CSS, называемое типом данных, на самом деле это просто причудливый способ обозначить тип значения. Термин значение относится к любому конкретному выражению, поддерживаемому выбранным вами типом значения.
Примечание : Да, типы значений CSS обычно обозначаются с помощью угловых скобок, чтобы отличать их от свойств CSS (например,g., свойство color по сравнению с типом данных
В следующем примере мы установили цвет нашего заголовка с помощью ключевого слова, а фон — с помощью функции rgb () :
h2 {
черный цвет;
цвет фона: rgb (197,93,161);
}
Тип значения в CSS — это способ определения набора допустимых значений.Это означает, что если вы видите как действительный, вам не нужно задумываться, какой из различных типов значений цвета можно использовать — ключевые слова, шестнадцатеричные значения, rgb () функций и т. Д. Вы можете использовать любые доступных <цвет> значений, если они поддерживаются вашим браузером. Страница в MDN для каждого значения предоставит вам информацию о поддержке браузером. Например, если вы посмотрите на страницу , вы увидите, что в разделе совместимости браузера перечислены различные типы значений цвета и их поддержка.
Давайте рассмотрим некоторые типы значений и единиц, с которыми вы часто можете столкнуться, с примерами, чтобы вы могли опробовать различные возможные значения.
Существуют различные типы числовых значений, которые вы можете использовать в CSS. Все следующие числа классифицируются как числовые:
| Тип данных | Описание |
|---|---|
<целое число> | <целое число> — это целое число, например 1024 или -55 . |
<номер> | <число> представляет собой десятичное число — оно может иметь или не иметь десятичную точку с дробной составляющей. Например, 0,255 , 128 или -1,2 . |
<размер> | <размер> — это <номер> с прикрепленным к нему блоком. Например, 45deg , 5s или 10px . — это зонтичная категория, которая включает типы , , и . |
<процент> | <процент> представляет собой долю некоторого другого значения. Например, 50% . Значения в процентах всегда относятся к другому количеству. Например, длина элемента зависит от длины его родительского элемента. |
Длина
Чаще всего вы встретите числовой тип <длина> . Например, 10px (пикселей) или 30em . В CSS используются два типа длины — относительная и абсолютная. Важно знать разницу, чтобы понять, насколько масштабными станут вещи.
Единицы абсолютной длины
Ниже приведены все абсолютных единиц длины — они не связаны ни с чем другим и обычно считаются всегда одного размера.
| Шт. | Имя | Эквивалент |
|---|---|---|
см | Сантиметров | 1 см = 38 пикселей = 25/64 дюйма |
мм | Миллиметров | 1 мм = 1/10 1 см |
Q | Четверть миллиметра | 1Q = 1/40 1 см |
дюйм | дюймов | 1 дюйм = 2.54 см = 96 пикселей |
шт | Пика | 1 шт. = 1/6 от 1 дюйма |
пт | Очки | 1pt = 1/72 от 1 в |
пикселей | пикселей | 1 пиксель = 1/96 от 1 дюйма |
Большинство из этих единиц более удобны при использовании для печати, чем для вывода на экран. Например, мы обычно не используем на экране см (сантиметров).Единственное значение, которое вы обычно будете использовать, — пикселей (пикселей).
Единицы относительной длины
Единицы относительной длины относятся к чему-то еще, например, к размеру шрифта родительского элемента или размеру области просмотра. Преимущество использования относительных единиц заключается в том, что при некотором тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые из наиболее полезных модулей для веб-разработки перечислены в таблице ниже.
| Шт. | относительно |
|---|---|
до | Размер шрифта родительского элемента в случае типографских свойств, таких как font-size , и размер шрифта самого элемента в случае других свойств, таких как ширина . |
пр. | x-высота шрифта элемента. |
шасси | Предварительный размер (ширина) глифа «0» шрифта элемента. |
рем | Размер шрифта корневого элемента. |
слева | Высота строки элемента. |
VW | 1% ширины области просмотра. |
vh | 1% высоты области просмотра. |
vmin | 1% меньшего размера области просмотра. |
vmax | 1% от большего размера области просмотра. |
Изучение примера
В приведенном ниже примере вы можете увидеть, как ведут себя некоторые единицы относительной и абсолютной длины. Первый блок имеет ширину и пикселей. Как абсолютная единица измерения, эта ширина останется неизменной вне зависимости от того, что еще изменится.
Ширина второго окна установлена в единицах vw (ширина области просмотра). Это значение относится к ширине области просмотра, поэтому 10vw составляет 10 процентов ширины области просмотра. Если вы измените ширину окна браузера, размер поля должен измениться.Однако этот пример встроен в страницу с использованием