Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3910 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 4:

Синтаксис CSS2 и базовые типы данных

Значения

Целые и вещественные числа

Значения некоторых типов могут принимать целые (обозначенные <integer> ) или реальные числа (обозначенные <number>). Реальные и целые числа специфицируются только в десятеричной нотации. <integer> состоит из одной или более цифр от "0" до "9". <number> может быть <integer> или ноль или более цифр с точкой (.), после которой идут одна или более цифр. И целые, и реальные числа могут иметь впереди "-" или "+" для указания знака числа.

Заметьте, что многие cвойства, допускающие целые и реальные числа в качестве значения, на практике ограничивают значение некоторым диапазоном, часто неотрицательным значением.

Размеры

Размеры имеют отношение к горизонтальным и вертикальным измерениям.

Формат значения размера (обозначаемого в этой спецификации <length> ) - это необязательный символ знака ('+' или '-', с '+' по умолчанию), после которого сразу идёт <number> (с или без десятичной точки), после которого сразу идёт идентификатор единиц измерения (например, px, deg и т.п.). После размера '0' единицы измерения не обязательны.

Некоторые cвойства допускают негативные значения размеров, но это может усложнять модель форматирования и могут иметься ограничения, обусловленные конкретной реализацией. Если негативное значение размера не поддерживается, оно должно быть конвертировано до ближайшего поддерживаемого значения.

Есть два типа единиц измерения: относительные и абсолютные. Относительные размеры специфицируют значение размера относительно какого-либо исходного cвойства размера. Таблицы стилей, использующие относительные единицы измерения, легче масштабируются при переносе на различные носители (например, с дисплея компьютера на лазерный принтер).

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

  • em: 'font-size' соответствующего шрифта;
  • ex: 'x-height' соответствующего шрифта;
  • px: пикселы, относительно устройства просмотра.
H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

Единицы измерения 'em' эквивалентны вычисленному значению cвойства 'font-size' того элемента, в котором оно используется. Исключением является тот случай, когда 'em' появляется в самом значении cвойства 'font-size', тогда оно относится к размеру шрифта родительского элемента. Может использоваться для вертикального или горизонтального измерения. (Эта единица измерения иногда называется quad-width/квад-ширина в типографском тексте.)

Единицы 'ex' определяются 'x-height' шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако 'ex' определены даже для тех шрифтов, которые не содержат "x".

Правило: H1 { line-height: 1.2em } означает, что высота строки элементов H1 будет на 20% больше, чем размер шрифта элементов H1. С другой стороны: H1 { font-size: 1.2em } означает, что размер шрифта элементов H1 будет на 20% больше, чем размер шрифта, наследуемый из элементов H1.

Если они специфицированы для корня "Соответствие: Требования и Рекомендации" (например, "HTML" в HTML), 'em' и 'ex' относятся к "Установка значений свойств. Каскадирование и Наследование" .

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего - дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.

При чтении с расстояния вытянутой руки 1px соответствует примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, рассчитанном на чтение с несколько меньшего расстояния, чем вытянутая рука, (55 см, 21 дюймов), 1px составляет около 0.21 мм. На принтере с разрешением 300 точек на дюйм (dpi) это можно округлить до 3 точек (0.25 мм); на принтере с 600 dpi это можно округлить до 5 точек.

Два нижеследующих изображения иллюстрируют эффект при просмотре размера пиксела с расстояния и эффект разрешения устройства. На первом рисунке расстояние чтения 71 см (28 дюймов) даёт пиксел 0.28 мм, а с расстояния 3.5 м (12 футов) требуется пиксел 1.4 мм.


[D]На втором рисунке область 1px на 1px закрывается одной точкой устройства с низким разрешением (экран компьютера), и та же самая область покрывается 16-ю точками на устройстве с высоким разрешением (как лазерный принтер 400 dpi).


[D]Дочерние элементы не наследуют относительные значения, специфицированные для их родителя; они (обычно) наследуют "Установка значений свойств. Каскадирование и Наследование" .

В следующих правилах вычисленное значение 'text-indent' элементов H1 будет 36pt, а не 45pt, если H1 является дочерним относительно элемента BODY:

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

Абсолютные единицы измерения используются только тогда, когда известны физические свойства выводного устройства.

Абсолютными значениями являются:

  • in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.
  • cm: сантиметры
  • mm: миллиметры
  • pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.
  • pc: picas/пики -- 1 пика равна 12 пунктам.
H1 { margin: 0.5in }      /* дюймы  */
H2 { line-height: 3cm }   /* сантиметры */
H3 { word-spacing: 4mm }  /* миллиметры */
H4 { font-size: 12pt }    /* пункты */
H4 { font-size: 1pc }     /* пики */

В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.