ROBOWEB : Документация : CSS1 cpecification : html, perl, cgi, php, css, 3dmax - 3D Studio русская документация с примерами программ, RTFM и описание протоколов, описание dreamweaver, все для вебдизайнера
Разработка сайтов, web дизайн - Центр Русского Дизайна HOD.RU
FLASH
3D Studio MAX
DreamWeawer FAQ
Изучение HTML
META тэги
CSS
Руководство по стилям
Спецификация WML (WAP)
Язык DHTML
Спецификация XML
Руководство по Java
Документация по JavaScript
Язык HOD Text Processor
Интерфейс CGI
Документация по Perl 5
Perl FAQ
Документация по PHP
PHP/FI 2.0
Документация по SQL
Базы данных
Доступ к БД

Рейтинг@Mail.ru Rambler's Top100

Веб дизайнеру
Каталог сайтов Axes.ru


6 Единицы измерения значений.


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(http://www.bg.com/pinkish.gif) }

Формат значения URL представляет собой 'url(', далее необязательный пробел, далее необязательная одинарная (') или двойная кавычка ("), далее сам URL (как определено в [11]), далее необязательная одинарная (') или двойная кавычка ("), далее необязательный пробел, далее ')'. Знаки кавычек, если они не являются частью URL, должны быть парными.

Круглые скобки, запятые, пробелы, одинарные и двойные кавычки, присутствующие в URL, должны отделяться обратным слешем: '\(', '\)', '\,'.

Неполные URL отрабатываются относительно исходника таблицы стилей, а не относительно самого документа:


  BODY { background: url(yellow) }



Содержание