diff options
Diffstat (limited to 'files/ru/web/css/length/index.html')
| -rw-r--r-- | files/ru/web/css/length/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/ru/web/css/length/index.html b/files/ru/web/css/length/index.html new file mode 100644 index 0000000000..4fd88f8cc2 --- /dev/null +++ b/files/ru/web/css/length/index.html @@ -0,0 +1,153 @@ +--- +title: <length> +slug: Web/CSS/размер +tags: + - CSS + - CSS Тип Данных + - Величина + - Разметка + - длина +translation_of: Web/CSS/length +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <code><length></code> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.</p> + +<div class="note"> +<p><strong>Обратите внимание:</strong> Хоть значения {{cssxref("<percentage>")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <code><length></code>, они не являются <code><length> </code>значениями.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Тип данных <code><length></code> состоит из {{cssxref("<number>")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа <code>0</code> единица измерения необязательна.</p> + +<div class="note"> +<p><strong>Обратите внимание:</strong> Некоторые свойства допускают использование отрицательных значений <code><length></code>, а некоторые нет.</p> +</div> + +<h3 id="Единицы_измерения">Единицы измерения</h3> + +<h4 id="Относительные_единицы_измерения">Относительные единицы измерения</h4> + +<p>Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, <a href="/ru/docs/Web/CSS/line-height">высота строки</a> или размер {{glossary("viewport")}}.</p> + +<h5 id="Единицы_зависящие_от_шрифта">Единицы, зависящие от шрифта</h5> + +<p>Единицы, зависящие от шрифта, определяют значение <code><length></code>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.</p> + +<div class="note"> +<p><strong>Обратите внимание:</strong> Эти единицы, особенно <code>em</code> и <code>rem</code>, часто используются для создания адаптивных разметок, которые сохраняют <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">вертикальную структуру страницы</a> даже если пользователь изменяет размер шрифта.</p> +</div> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cap</span></font> {{experimental_inline}}</dt> + <dd>Представляет высоту заглавных букв в <a href="/ru/docs/Web/CSS/font">шрифте</a>, применённом к элементу.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ch</span></font></dt> + <dd>Представляет ширину символа "<code>0</code>" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">em</span></font></dt> + <dd>Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет <em>унаследованный</em> размер шрифта.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ex</span></font></dt> + <dd>Представляет <a href="https://en.wikipedia.org/wiki/X-height">x-height</a> (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах <code>1ex ≈ 0.5em</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt> + <dd>Равна используемой в шрифте ширине символа "<code>水</code>" (ККЯ, символ "вода", U+6C34).</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lh</span></font> {{experimental_inline}}</dt> + <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt> + <dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt> + <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd> +</dl> + +<h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5> + +<p>Эти единицы определяют значение <code><length></code> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.</p> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vh</span></font></dt> + <dd>Равна 1% высоты блока содержимого.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vw</span></font></dt> + <dd>Равна 1% ширины блока содержимого.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vi</span></font> {{experimental_inline}}</dt> + <dd>Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vb</span></font> {{experimental_inline}}</dt> + <dd>Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmin</span></font></dt> + <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них меньше.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmax</span></font></dt> + <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них больше.</dd> +</dl> + +<h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4> + +<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойтсва устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p> + +<p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p> + +<p>Для устройств с высоким dpi дюймы (<code>in</code>),сантиметры (<code>cm</code>) и миллиметры (<code>mm</code>) такие же, как и соответствующие физические единицы. Таким образов, единица <code>px</code> определяется относительно их (1/96 одного дюйма).</p> + +<div class="note"> +<p><strong>Обратите внимание:</strong> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как <code>em</code> или <code>rem</code>) в свойстве <code>font-size</code>.</p> +</div> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">px</span></font></dt> + <dd>Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на <em>принтерах</em> и <em>экранах с высоким разрешением</em> один пиксель CSS равен нескольким пикселям дисплея. <code>1px</code> = 1/96 от <code>1in</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cm</span></font></dt> + <dd>Один сантиметр. <code>1cm</code> = <code>96px/2.54</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font></dt> + <dd>Один миллиметр. <code>1mm</code> = 1/10 от <code>1cm</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Q</span></font> {{experimental_inline}}</dt> + <dd>Четверть миллиметра. <code>1Q</code> = 1/40 от <code>1cm</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">in</span></font></dt> + <dd>Один дюйм. <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pc</span></font></dt> + <dd>Одна <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%B9%D0%BA%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)">пайка</a>. <code>1pc</code> = <code>12pt</code> = 1/6 от <code>1in</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt> + <dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt> + <dd>Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd> +</dl> + +<h2 id="Интерполяция">Интерполяция</h2> + +<p>При анимации значения <code><length></code> интерполируются как реальные <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9">числа с плавающей запятой</a>. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется <a href="/ru/docs/Web/CSS/single-transition-timing-function">временной функцией</a> анимации.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td>Добавлены единицы <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, и <code>rlh</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Добавлены единицы <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, и <code>Q</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Явно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первое определение. Неявно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("css.types.length")}}</p> |