Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Каскадные таблицы стилей, уровень 1. /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Единицы измерения значений - Программирование от RIN.RU
Единицы измерения значений


Установка единиц длины           Вверх


Формат значения длины состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного идентификатора размерности в виде двухбуквенной аббревиатуры, указываемых в последовательности перечисления в настоящем абзаце. После числа "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 должен уже основываться на результатах аппроксимации.


Процентное выражение           Вверх


Формат процентного выражения состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного знака "%", указываемых в последовательности перечисления в настоящем абзаце.


Процентное значение всегда является относительным к другому, например, к значению длины. При назначении процентного выражения для каждого случая предполагается наличие базы отсчета - чаще всего это размер шрифта данного элемента:


P { line-height: 120% } /* 120% размера шрифта элемента */


Для всех наследованных свойств CSS1 считается, что если значение было указано в виде процентного выражение, то дочерние элементы наследуют результирующее значение, а не величину процентовки.


Обозначение цвета           Вверх


Цвет обозначатся либо зарезервированным словом, либо численно по спецификации 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, а, к примеру, для графических изображений будет использоваться их собственная цветовая информация.


URL           Вверх


Универсальный локатор ресурса (URL) определяется в функциональной записи:


BODY { background: url(http://www.bg.com/pinkish.gif) }


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


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


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


BODY { background: url(yellow) }



 8  Комментарии к статье  8 8  Обсудить в чате

8  В тему

Дополнения

Терминология

Базовые понятия

Псевдо-классы и псевдо-элементы

Каскадирование

Модель форматирования

Свойства CSS1

Совместимость с CSS1

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь