Единицы измерения значений. Спецификация CSS1
Дата публикации: 12/06/2003
Категория: CSS - каскадные таблицы стилей
Версия для печати
6.1 Установка единиц длины
Формат значения длины состоит из
необязательного знака ("+" или "-",
по умолчанию "+"), обязательного числа (с
десятичной частью, отделяемой десятичной
точкой, или без), и обязательного
идентификатора размерности в виде
двухбуквенной аббревиатуры, указываемых в
последовательности перечисления в
настоящем абзаце. После числа "0"
идентификатор размерности не обязателен.
Некоторые свойства используют
отрицательные единицы длины, однако это
может усложнить способ форматирования и
могут возникнуть ограничения, диктуемые
особенностями отработки. Если
отрицательная длина не поддерживается, то
она должна быть замещена ближайшим
поддерживаемым значением.
Существуют два типа единиц длины:
относительные и абсолютные. Относительные
единицы определяют длину относительно
другой длины свойства. Если таблица стилей
использует относительные единицы, то это
более удобно для масштабирования страницы
на разных периферийных устройствах (напр.
при выводе с экрана на печать). Такого
эффекта позволяют достичь и процентные
выражения (как показано ниже), а также
зарезервированные слова (напр. 'x-large').
Поддерживаются следующие относительные
единицы:
H1 { margin: 0.5em }
/* ems, высота шрифта элемента */
H1 { margin: 1ex }
/* x-height, ~ по высоте буквы 'x' */
P { font-size: 12px }
/* pixels, в пикселах относительно холста */
Относительные единицы 'em' и 'ex'
определяются относительно размера шрифта
самого элемента. Единственное исключение
из этого правила делается для свойства "размер
шрифта" ('font-size'), для которого 'em' и 'ex'
определяются по размеру шрифта
родительского элемента.
Пиксели, указанные в последнем примере,
определяются относительно разрешения
холста, чаще всего - экранного разрешения.
Если разрешающая способность устройства
вывода отличается от характерной для
экрана, UA должен масштабировать значение в
пикселях. Замещающий пиксель соответствует
углу зрения, под которым виден один пиксель
на устройстве с разрешающей способностью 90
точек на дюйм на расстоянии, оптимальном
для зрения. При величине последнего 28
дюймов угол зрения приблизительно равен
0,0227 градуса.
Дочерние элементы наследуют вычисленное
значение, а не относительное:
BODY {
font-size: 12pt;
text-indent: 3em; /* i.e. 36pt */
}
H1 { font-size: 15pt }
В приведенном примере значение абзацного
отступа ('text-indent') элемента H1 будет равно 36
пунктов, а не 45.
Абсолютные единицы длины используются
лишь в тех случаях, когда заведомо известны
физические характеристики устройства
вывода. Поддерживаются следующие
абсолютные единицы:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */
H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points, 1pt = 1/72 in */
H5 { font-size: 1pc } /* picas, 1pc = 12pt */
В случаях, когда заданная длина не может
быть отработана, UA должны аппроксимировать
ее. Дальнейший пересчет и наследование для
всех свойств CSS1 должен уже основываться на
результатах аппроксимации.
6.2 Процентное выражение
Формат процентного выражения состоит из
необязательного знака ("+" или "-",
по умолчанию "+"), обязательного числа (с
десятичной частью, отделяемой десятичной
точкой, или без), и обязательного знака "%",
указываемых в последовательности
перечисления в настоящем абзаце.
Процентное значение всегда является
относительным к другому, например, к
значению длины. При назначении процентного
выражения для каждого случая
предполагается наличие базы отсчета - чаще
всего это размер шрифта данного элемента:
P { line-height: 120% }
/* 120% размера шрифта элемента */
Для всех наследованных свойств CSS1
считается, что если значение было указано в
виде процентного выражение, то дочерние
элементы наследуют результирующее
значение, а не величину процентовки.
6.3 Обозначение цвета
Цвет обозначатся либо зарезервированным
словом, либо численно по спецификации RGB.
Допустимы следующие зарезервированные
слова для указания цвета: aqua (светло-голубой),
black (черный), blue (синий), fuchsia (светло-фиолетовый),
gray (серый), green (зеленый), lime (светло-зеленый),
maroon (коричневый), navy (темно-синий), olive (оливковый),
purple (фиолетовый), red (красный), silver (светло-серый),
teal (сине-зеленый), white (белый), и yellow (желтый).
Эти 16 цветов взяты из палитры VGA для Windows, и
их значения RGB не определены в данной
спецификации.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Для цветовой модели RGB используются
численные выражения. В нижеприведенных
примерах определяется один и тот же цвет:
EM { color: #f00 }
/* #rgb */
EM { color: #ff0000 }
/* #rrggbb */
EM { color: rgb(255,0,0) }
/* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) }
/* float range 0.0% - 100.0% */
Значения в формате RGB указываются в
шестнадцатеричной системе счисления в виде
знака #, за которым без пробелов указываются
три или шесть шестнадцатеричных символа.
Трехсимвольная запись RGB (#rgb)
преобразовывается в шестисимвольную путем
дублирования цифр, а не добавлением нулей.
Например, #fb0 расширяется до #ffbb00. Поэтому
понятно, что белый цвет (#ffffff) может быть
кратко записан как (#fff), и это устранит любые
зависимости от специфики отображения цвета
на экране.
Формат значения RGB в функциональной
записи следующий: 'rgb(' далее разделенный
точками список из трех численных значений (либо
три целочисленных значения в интервале 0-255б
либо три процентных значения в диапазоне от
0.0% до 100.0%), далее ')'.
Значения за пределами числовых
интервалов должны отсекаться. Ниже
приводятся три эквивалентных примера:
EM { color: rgb(255,0,0) }
/* значения в диапазоне 0 - 255 */
EM { color: rgb(300,0,0) }
/* замена на 255 */
EM { color: rgb(110%, 0%, 0%) }
/* замена на 100% */
Цвета RGB определяются для цветового поля
sRGB [9]. UA может варьировать результаты
обработки в пределах точности, с которой
они могут отображать цвета, однако
применение sRGB обеспечивает однозначное и
объективно измеримое определение цвета в
соответствии с международными стандартами[10].
UA может накладывать ограничения на
указанные условия для отображаемых цветов,
производя коррекцию их гаммы. В
определенных условиях просмотра sRGB
определяет гамму 2.2. UA регулирует заданные
CSS цвета таким образом, чтобы применительно
к устройству вывода получить "естественную"
гамму цветов, гамму 2.2. В приложении D это
рассматривается более подробно. Обратите
внимание, что речь идет только о цветах,
определенных через CSS, а, к примеру, для
графических изображений будет
использоваться их собственная цветовая
информация.
6.4 URL
Универсальный локатор ресурса (URL)
определяется в функциональной записи:
BODY { background: url(www.bg.com/pinkish.gif) }
Формат значения URL представляет собой 'url(',
далее необязательный пробел, далее
необязательная одинарная (') или двойная
кавычка ("), далее сам URL (как определено в
[11]), далее необязательная одинарная (') или
двойная кавычка ("), далее необязательный
пробел, далее ')'. Знаки кавычек, если они не
являются частью URL, должны быть парными.
Круглые скобки, запятые, пробелы,
одинарные и двойные кавычки,
присутствующие в URL, должны отделяться
обратным слешем: '\(', '\)', '\,'.
Неполные URL отрабатываются относительно
исходника таблицы стилей, а не относительно
самого документа:
BODY { background: url(yellow) }
Виталий Авдеев
aka RAVEN
www.ard.h1.ru
Статьи по теме:
