ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация CSS2 | 4.3.Значения.

4.3.Значения.

4.3.1. Целые и действительные числа.
4.3.2. Длины.
4.3.3. Проценты.
4.3.4. URL + URN = URI
4.3.5. Счетчики.
4.3.6. Цвета.
4.3.7. Углы.
4.3.8. Время.
4.3.9. Частоты.
4.3.10. Строка.

4.3.1 Целые и действительные числа.

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

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

4.3.2 Длины.

Длины относятся к горизонтальным или вертикальным измерениям.

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

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

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

Относительные единицы:

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

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

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

    Правило:

    H1 { line-height: 1.2em }
    

    означает, что высота строки элементов Н1 будет больше на 20%, чем размер шрифта для элементов Н1. С другой стороны:

    H1 { font-size: 1.2em }
    

    означает, что размер шрифта (font-size) элементов Н1 будет больше на 20%, чем размер шрифта, наследуемого элементами Н1.

    Когда значения определяются для корневого элемента из дерева документа (например, "HTML" в HTML), 'em' и 'ex' относятся к начальным величинам свойства.

    Пиксели являются относительными единицами по отношению к разрешению устройства просмотра, т.е. чаще всего к компьютерному дисплею. Если плотность пикселей на устройстве вывода сильно отличается от плотности типичного компьютерного дисплея, то устройство должно изменять масштаб значений в пикселях. Рекомендуется, чтобы контрольный пиксель был бы визуальным углом между одним пикселем устройства с плотностью 90dpi (точек на дюйм) и расстоянием до читателя на длину руки. Для номинальной длины руки 28 дюймов (около 70 см), визуальный угол равен примерно 0,0227 градуса.

    Для чтения на расстоянии длины руки, 1px соответствует примерно 0,28 мм (1/90 дюйма). Когда печатают на лазерном принтере, то это значение немного меньше, чем длина руки (55 см, 21 дюйм), и 1 px равен примерно 0,21 мм. На принтерах с разрешением 300 точек на дюйм (dpi), это значение можно округлить до 3 точек (0,25 мм); для принтера с 600 dpi, это – составляет 5 точек.

    Два изображения внизу иллюстрируют эффект расстояния просмотра на размер пикселя и эффект разрешения устройства. На первом изображении расстояние для чтения 71 см (28 дюймов) в результате дают для 1px 0,28 мм, в то же время расстояние для чтения в 3,5 м (12 футов) требуют для 1px 1,4 мм.

    [D]

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

    [D]

    Дочерние элементы не наследуют относительные значения, определенные для их родителей; они (в общем) наследуют рассчитанные значения.

    В следующих правилах, рассчитанное значение 'text-indent' элементов Н1 составит 36pt, а не 45pt, если Н1 является дочерним элементом для элемента BODY.

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

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

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

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

    4.3.3 Проценты.

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

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

    Поскольку дочерние элементы (в общем) наследуют расчетные значения их родителей, то в следующем примере дочерний элемент тега Р будет наследовать значение 12 pt для 'line-height', а не процентное значение (120%):

    P { font-size: 10pt }
    P { line-height: 120% }  /* 120% of 'font-size' */
    

    4.3.4 URL + URN = URI

    URL (Uniform Resource Locator, смотрите документы RFC1738 и RFC1808 предоставляет адрес ресурса во Всемирной паутине. Ожидаемый новый путь идентификации ресурсов называется URN (Uniform Resource Name). Вместе они называются URI (Uniform Resource Identifier). Эти спецификации используют термин URI.

    Значения URI в этих спецификациях упоминается как . Функциональная запись, используемая для определения URI в значениях свойства, обозначается, как "url()":

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

    Формат значения URI: 'url(' с последующими пробельными символами, после которых идут необязательные одинарные (') или двойные кавычки ("), и далее сам URI, который сопровождается необязательными одинарные (') двойные кавычки (") с заключительными необязательными пробельными символами, завершающимися символом ')'. Оба символа кавычек должны быть одинаковыми.

    Пример без кавычек:

    LI { list-style: url(http://www.redballs.com/redball.png) disc }
    

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

    В зависимости от типа URI, можно записать вышеуказанные символы, как URI-переходы (где "("=%28, ")"=%29 и т.д.), как описано в URI.

    Чтобы создать модульные стилевые таблицы, которые не зависят от абсолютного размещения ресурсов, авторы могут использовать относительные адреса URI. Относительные адреса URI (как определено в FRC1808 дополняются до полного адреса URI, используя базовый URI. RFC 1808, раздел 3, определяет нормативный алгоритм для этого процесса. Для CSS базовый URI является базовым для стилевых таблиц, а не источника документа.

    Например, предположим следующее правило:

    BODY { background: url("yellow") }
    

    локализовано в стилевой таблице, определенной по адресу URI:

    http://www.myorg.org/style/basic.css
    

    Фон элемента BODY документа источника будет связан с изображением, описанным в источнике по адресу URI

    http://www.myorg.org/style/yellow
    

    Устройства вывода могут варьировать в том, как они оперируют с URI, которые определяют недоступные и неприменимые ресурсы.

    4.3.5 Счетчики.

    Счетчики обозначаются идентификаторами (смотрите свойства 'counter-increment' и 'counter-reset'). Для ссылки на значение счетчика, используется запись 'counter (<identifier>)' или 'counter(<identifier>, <list-style-type>)'. Стиль по умолчанию – 'decimal'.

    Для ссылки на последовательность вложенных счетчиков одного названия, нотацией является 'counters(<identifier>, <string>)' или 'counters(<identifier>, <string>, <list-style-type>)'. Смотрите раздел "Вложенные счетчики и область использования" в главе по сгенерированному содержанию.

    В CSS2 к значениям счетчиков можно обращаться из свойства 'content'. Обратите внимание, что значение 'none' является возможным для <list-style-type>: 'counter(x, none)' возвращает пустую строку.

    Ниже приводим стилевую таблицу, которая нумерует параграфы (Р) для каждой главы (Н1). Параграфы нумеруются римскими цифрами с последующими точками и пробелами:

    P {counter-increment: par-num}
    H1 {counter-reset: par-num}
    P:before {content: counter(par-num, upper-roman) ". "}
    

    Счетчики, которые не входят в область применения любого параметра 'counter-reset', как принято, устанавливаются на 0 с помощью 'counter-reset' в корневом элементе.

    4.3.6 Цвета.

    Значение <color> является либо ключевым слово, либо цифровой RGB спецификацией.

    Список ключевых названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Эти 16 цветов определены в HTML 4.0. Дополнительно к этим ключевым словам цвета, пользователи могут определить ключевые слова, которые соответствуют цветам, используемых определенными объектами в окружении пользователя. Пожалуйста, проконсультируйтесь с разделом по системным цветам для получения более подробной информации.

    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) конвертируется в шестицифровую (#rrggbb) посредством репликации цифр, а не добавлением нулей. Например, #fb0 расширяется до #ffbb00. Это обеспечивает запись белого цвета (#ffffff) короткой формой (#fff) и убирает любую зависимость от цветовой насыщенности дисплея.

    Формат RGB значения в функциональной записи состоит из 'rgb(' с последующим списком из трех цифровых значений, разделенных запятыми (либо три целых значения или три процентных величины), и заканчивающихся символом ')'. Целая величина 255 соответствует 100%, F или FF в шестнадцатиричной нотации: rgb(255,255,255)=rgb(100%,100%,100%)=#FFF. Пробельные символы позволяют округлять числовые значения.

    Все RGB цвета определяются в цветовом пространстве RGB (смотрите SRGB). Устройства вывода могут варьировать в точности, с которой они представляют эти цвета, но использование RGB позволяет недвусмысленное и объективное, измеряемое определение того, каким должен быть цвет, который может быть связан с международным стандартом (смотрите COLORIMETRY).

    Согласование устройств вывода может ограничивать их действие на вывод цвета для выполнения гамма-коррекции. sRGB определяет контрастность дисплея 2,2 при определенных условиях просмотра. Устройства вывода должны настраивать цвета, данные в CSS в комбинации с "естественной" контрастностью дисплея выводного устройства, чтобы получалась эффективная гамма дисплея 2,2. Смотрите раздел по гамма-коррекции для более подробной информации. Обратите внимание на то, что только цвета, определенные в CSS подвергаются воздействию; например, изображения, как это ожидается, несут свою собственную цветовую информацию.

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

    EM { color: rgb(255,0,0) }       /* integer range 0 - 255 */
    EM { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
    EM { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
    EM { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
    

    Другие устройства, например принтеры, имеют отличающиеся диапазоны для sRGB; некоторые цвета вне диапазона 0..255 sRGB будут репрезентабельны (внутри диапазона устройства), в то же время другие цвета внутри 0..255 sRGB будут лежать вне диапазона устройства, и потому будут отсекаться.

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

    4.3.7 Углы.

    Значения углов (в тексте обозначаются, как <angle>) используются со звуковыми стилевыми таблицами.

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

    Идентификаторы единиц углов следующие:

    • deg: градусы
    • grad: грады
    • rad: радианы

    Значения углов могут быть отрицательными. Они должны быть нормализованными к диапазону 0-360 градусов устройством вывода. Например, значения -10deg и 350deg – эквивалентны.

    Например, прямой угол составляет '90deg' или '100grad' или '1.570796326794897rad'.

    4.3.8 Время.

    Значение времени (в тексте обозначается, как <time>) используется в звуковых стилевых таблицах.

    Формат записи – это число <number> с последующим идентификатором единицы времени.

    Идентификаторы единиц времени следующие:

    • ms: миллисекунды
    • s: секунды

    Значения времени могут быть отрицательными.

    4.3.9 Частоты.

    Значения частот (в тексте указываются, как <frequency>) используются в звуковых каскадных стилевых таблицах.

    Формат записи – число <number> с последующим идентификатором единицы частоты.

    Идентификаторы единиц частоты следующие:

    • Hz: герц
    • kHz: килогерц

    Значения частот могут быть отрицательными.

    Например, 200Hz (или 200hz) – это звук с низким тоном, а 6kHz (или 6khz) – это звук с высокой частотой.

    4.3.10 Строка.

    Строки пишут внутри двойных или одинарных кавычек. Двойные кавычки не могут встречаться внутри двойных кавычек, только с переходом (как '\"' или, как '\22'). Аналогично для одинарных кавычек ("\'" или "\27").

    "this is a 'string'"
    "this is a \"string\""
    'this is a "string"'
    'this is a \'string\''
    

    Строка не может непосредственно содержать разделитель строки. Для включения разделителя строки в строку, используйте переход "\A" (шестнадцатиричный код A – символ перевод строки (line feed) в Unicode, но ее общее представление в CSS - "newline"). Смотрите свойства 'content', как пример.

    Можно разбить строку на несколько строк для эстетических или других целей, но в таком случае разделитель строки сам должен обходиться с обратной косой чертой (\). Для примера внизу указаны два одинаковых селектора:

    A[TITLE="a not s\
    o very long title"] {/*...*/}
    A[TITLE="a not so very long title"] {/*...*/}
    
    ← Назад | Вперед →
Copyright © 2006 -  aranea.ru