Меры длины в CSS
Для многих свойства CSS требуется указание длины. В нескольких примерах мы работаем со свойством width, которое используется для определения ширины элемента, и со свойством font-size, которое используется для указания размера шрифта, используемого для отображения содержимого элемента. В листинге 4-19 показан стиль, который использует оба этих свойства.
Листинг 4-19: Указание единиц измерения для свойств
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color: white;
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Когда вы указываете длину, вы объединяете число единиц и идентификатор единиц без пробелов и других символов между ними. В листинге я указал значение свойства width равное 5cm, что обозначает 5 единиц, представленных идентификатором cm (сантиметров). Таким же образом я указал значение свойства font-size в 20pt, что обозначает 20 единиц, представленных идентификатором pt (пунктов, о которых мы поговорим в следующих разделах). CSS определяет два вида единиц длины: абсолютные и относительные (по отношению к другому свойству). Я объясню их в следующих разделах.
Работа с абсолютными единицами измерения длины
В предыдущем листинге я использовал величины cm и pt, которые являются примером абсолютных единиц измерения (абсолютных величин). Эти величины являются реальными средствами измерения. CSS поддерживает пять типов абсолютных величин, которые описаны в таблице 4-6.
Таблица 4-6: Абсолютные единицы измерения в CSS
| Идентификатор единицы измерения | Описание |
in |
дюймы |
cm |
сантиметры |
mm |
миллиметры |
pt |
пункты (1 пункт равен 1/72 дюйма) |
pc |
пики (1 пика равна 12 пунктам) |
Вы можете смешивать и сочетать в стиле разные единицы измерения, а также смешивать абсолютные и относительные единицы. Абсолютные единицы могут быть полезны, если у вас есть некоторое четкое представление о том, как будет представлено содержание, например, при проектировании для печати. Я не часто использую абсолютные единицы в своих CSS стилях. Я считаю, что относительные единицы более гибкие и их легче поддерживать, и я редко создаю содержимое, которое должно соответствовать реальным средствам измерения.
Совет
Вы можете быть удивлены, что пиксели не находятся в таблице абсолютных единиц измерения. На самом деле CSS пытается сделать пиксели относительными единицами измерения, хотя, как я объясню позже в этой главе, не все тут получается гладко. Больше вы можете узнать в разделе "Работа с пикселями".
Работа с относительными единицами измерения длины
Относительные единицы измерения длины более сложно определить и реализовать, нежели абсолютные, и они требуют жесткого и краткого языка, чтобы их смысл был определен однозначно. Относительные единицы измеряются в рамках других единиц (в соотношении к другим единицам). К сожалению, язык спецификации CSS не является достаточно точным (проблема, которая преследует CSS многие годы). Это обозначает, что CSS определяет широкий спектр интересных и полезных относительных единиц измерения, но вы не можете использовать некоторые из них, потому что они не имеют широкой и последовательной поддержки браузеров. В таблице 4-7 показаны относительные единицы измерения, определенные в CSS, которые работают в основных браузерах.
Таблица 4-7: Относительные единицы измерения в CSS
| Идентификатор единицы измерения | Описание |
em |
Относительно размера шрифта элемента |
ex |
Относительно x-высоты шрифта элемента |
rem |
Относительно размера шрифта корневого элемента |
px |
Число CSS пикселей (предположительно на дисплее с 96dpi) |
% |
Процент от значения другого свойства |
В следующих разделах я покажу вам, как использовать эти единицы измерения, чтобы выразить длину.
Работа с относительными единицами измерения размера шрифта
При использовании относительных единицах вы фактически указываете величину другой единицы измерения. Первые относительные единицы измерения, на которые мы посмотрим, касаются размера шрифта. В листинге 4-20 показан пример.
Листинг 4-20: Использование относительных единиц измерения
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color: white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<p style="font-size: 12pt">I also like mangos and cherries.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>В этом примере я указал значение для свойства height равное 2em, что обозначает, что р элементы должны обрабатываться таким образом, что высота элемента на экране в два раза больше размера шрифта. Эта величина рассчитывается для каждого отображаемого элемента. Я определил размер шрифта (font-size) по умолчанию в 15pt в элементе style и указал внутреннее значение в 12pt для второго элемента р в документе. Вы можете увидеть, как браузер отображает эти элементы, на рисунке 4-15.
Рисунок 4-15: Результат использования относительных единиц измерения
Вы можете использовать относительную единицу, чтобы выразить величину другой относительной единицы. В листинге 4-21 показан пример, где свойство height выражается в единицах em. Эти единицы em являются производными от значения свойства font-size, которое я выразил, используя единицы rem.
Листинг 4-21: Использование единиц измерения, которые являются производными от других относительных единиц измерения
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
html {
font-size: 0.2in;
}
p {
background: grey;
color: white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size: 14pt">
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Единица измерения rem относительна к размеру шрифта элемента html, также известного как корневой элемент. В этом примере я назначил абсолютный размер шрифта 0,2 дюйма, используя стиль (хотя я также мог бы создать внутренний стиль, определив атрибут style для элемента html напрямую). Значение для font-size в другом стиле выражается в 2rem, что обозначает, что размер шрифта в каждом элементе, для которого применяется это значение, будет в два раза больше, чем размер шрифта корневого элемента, то есть 0,4 дюйма. Свойство height в том же стиле определяется как 2em, то есть снова в два раза больше. Это обозначает, что браузер будет отображать p элемент, используя шрифт высотой в 0,4 дюйма, а в целом весь элемент будет 0,8 дюйма высотой. Вы можете увидеть, как браузер обрабатывает эти стили, на рисунке 4-16.
Рисунок 4-16: Определение относительных единиц измерения в рамках других относительных единиц
Третья связанная со шрифтами относительная единица – это ex, которая является текущей х-высотой шрифта. Это расстояние от базовой линии (основания) шрифта до средней линии, но часто за эталон берут высоту символа х (отсюда и название). Как правило, 1ex это приблизительно 0.5em.
Работа с пикселями
Пиксели в CSS – это, возможно, не то, чего вы ожидали. Обычное значение термина пиксель относится к самой маленькой видимой величине на дисплее: одному элементу (или точке) изображения. CSS же определяет пиксель следующим образом:
Эталонный пиксель – это визуальное отображение одного пикселя на устройстве с плотностью пикселей 96dpi на дистанции вытянутой руки от читателя.
Это пример еще одного смутного объяснения, "бича" CSS. Я не хочу быть пафосным, но спецификации, которые зависят от длины руки пользователя, для меня сомнительны. К счастью, основные браузеры игнорируют разницу между пикселями, как определено в CSS, и пикселями на дисплее и рассматривают 1 пиксель как 1/96 дюйма. (Это стандартная плотность пикселей для Windows; браузеры для других платформ с отличной от этой плотностью пикселей, используют пересчет из одних единиц в другие, поэтому там пиксель тоже приблизительно равен 1/96 дюйма).
Совет
Хотя от этого и не будет слишком много пользы, но вы можете прочесть о CSS пикселях на www.w3.org/TR/CSS21/syndata.html#length-units.
Результат этого таков, что, хоть и предполагается, что CSS пиксели будут обрабатываться как относительные единицы измерения, браузеры работают с ними как с абсолютными величинами. В листинге 4-22 показано использование пикселей в стиле CSS.
Листинг 4-22: Использование пикселей в стиле
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color: white;
font-size: 20px;
width: 200px;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>В этом примере я выразил оба свойства, font-size и width, в пикселях (свойство width является дополнением к свойству height и устанавливает ширину элемента). На рисунке 4-17 можно увидеть, как браузер применил эти стили.
Рисунок 4-17: Определение величин в пикселях
Совет
Хотя я часто использую пиксели как единицы измерения в CSS, все же я остаюсь человеком привычки. Я считаю, что единицы измерения
emболее гибкие. Это потому, что мне приходится менять размер шрифта только тогда, когда я вношу изменение, а остальная часть стиля работает без проблем. Важно запомнить, что хотя пиксели CSS были задуманы как относительные величины, на практике они абсолютные величины, и как следствие, они могут быт негибкими.
Работа с процентами
Можно выразить единицу измерения в процентном соотношении к другой величине (к значению другого свойства). Это можно сделать, используя величину, выраженную в % (процентах), как показано в листинге 4-23.
Листинг 4-23: Использование процентного соотношения при выражении значения свойства
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color: white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Есть две сложности в работе с процентными величинами. Первое заключается в том, что не все свойства могут быть выражены таким образом. А второе заключается в том, что для каждого свойства, которое может быть выражено в процентном соотношении, определяется по-своему, от какого другого свойства будет исчисляться это процентное соотношение. Например, свойство font-size использует унаследованное значение font-size родительского элемента, а свойство width использует значение width содержащего блока.
Это не так запутано, как может показаться. Я объясню, что такое содержащий блок в главе 16. (Это важная и повторяющаяся концепция). Я также расскажу вам, какие свойства CSS поддерживают процентные единицы измерения и как рассчитывается процент каждого из свойства CSS, о которых пойдет речь, начиная с главы 19.
Единицы измерения CSS без широкой браузерной поддержки
В дополнение к относительным единицам, которые я перечислил, CSS определяет некоторые единицы, которым еще предстоит получить широкую браузерную поддержку. В таблице 4-8 перечислены эти новые единицы измерения. Они будут полезны, когда их реализация станет широкой и последовательной, но до тех пор следует избегать их использования.
Таблица 4-8: Относительные единицы измерения в CSS без браузерной поддержки
| Идентификатор единицы измерения | Описание |
gd |
Относительна к сетке; не имеет широкой поддержки, поскольку зависит от ряда свойства, которые не определены в спецификации CSS. |
vw |
Относительна к ширине окна; для документов каждый vw является 1/100й ширины области дисплея (как правило, окно браузера). |
vh |
Относительна к высоте окна; для документов каждый vw является 1/100й высоты области дисплея |
vm |
Каждая единица измерения vm является 1/100й кратчайшей оси просмотра (высоты или ширины, в зависимости от того, какая меньше). |
ch |
Относительна к средней ширине символов, отображенных с помощью текущего шрифта. Она плохо определена в спецификациях CSS и реализуется не последовательно. |
Единицы vw, vh и wm имеют потенциал быть полезными в самых разных ситуациях, но в настоящее время они реализуются только в Internet Explorer. И даже тут мое неоднократное тестирование показало, что их реализация не совсем соответствует спецификации CSS.
Вычисление CSS единиц
CSS3 определяет интересную возможность, которая позволяет рассчитать единицы измерения. Это очень интересный и гибкий подход, который дает вам возможность управлять стилями и быть точными при их создании. В листинге 4-24 приведен пример.
Листинг 4-24: Расчет единиц измерения
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
color: white;
font-size: 20pt;
width: calc(80% - 20px);
}
</style>
</head>
<body>
<a href="http://apress.com">Visit the Apress website</a>
<p>I like <span>apples</span> and oranges.</p>
<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>Вы можете использовать ключевое слово calc и скобки, в которых содержится вычисление. Вы можете смешивать разные единицы измерения и выполнять основные арифметические операции. Чтобы вы не слишком радовались, я вам скажу, что во время написания этой книги только Internet Explorer реализовал поддержку функции calc(). Я вообще избегаю описания в этой книге таких функциональных возможностей, которые широко не поддерживается, но я надеюсь, это функционал будет успешно развиваться и получит широкое применение.
