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

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

Длинна

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

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

Единицы измерения длинны могут быть двух типов: относительные и абсолютные.

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

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

1. em: для свойства "font-size".
2. ex: для свойства "x-height".
3. px: для многих свойств.

  1.
H1 { margin: 0.5em } /* em */
  2.
H1 { margin: 1ex } /* ex */
  3.
P { font-size: 12px } /* px */

Единицы "em" равны вычисленному значению свойства "font-size" для элемента в отношении, которого используется указное свойство. Исключение - единицы "em" могут устанавливаться относительно свойства "font-size" родительского элемента.

Единицы "ex" определяют свойство "x-height" для шрифтов. Свойство "x-height" называется так, поскольку оно соответствует высоте буквы "x" в нижнем регистре. Свойство редко применяется для установки размера шрифта, поскольку наиболее распространенными единицами являются em и px.

Пример:

  1.
H1 { line-height: 1.2em }

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

  1.
H1 { font-size: 1.2em }

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

При определении величин измерения следует помнить, что дочерние элементы не наследуют значения родительских элементов, они, как правило, наследуют вычисленное значение (вычисленное значение – это относительное значение, которое является зависимым от величин других значений, вычисленными значениями могут быть, например, единицы em, %. Для того чтобы его получить CSS2 производит соответствующие вычисления с использованием значений других элементов). В следующем примере вычисляемое значение "text-indent" элемента H1 будет 36pt, а не 45pt, если элемент H1 является дочерним элементом для его родительского элемента BODY.

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

Абсолютные единицы

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

1. in – дюймы, 1 дюйм равняется 2,54 см;
2. cm – сантиметры;
3. mm – миллиметры;
4. pt – точка, точка соответствует 1/72 дюйма;
5. pc – пики, 1 пика равна 12 точкам;

Пример

  1.
H1 { margin: 0.5in } /* дюймы */
  2.
H2 { line-height: 3cm } /* сантиметры */
  3.
H3 { word-spacing: 4mm } /* миллиметры */
  4.
H4 { font-size: 12pt } /* точки */
  5.
H4 { font-size: 1pc } /* пики */
  6.
  7.

Проценты

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

Когда проценты используются в качестве значения свойства корневого элемента и относятся к наследуемому значению некоторого свойства, получаемое в результате этого значение процентов основывается на изначальном значения свойства. Так как дочерние элементы наследуют вычисленное значение их родительского элемента, поэтому в следующем примере дочерний элемент, для элемента P будет иметь значение равное 12pt для свойства "line-height", а не значение, выраженное в процентах.

  1.
P { font-size: 10pt }
  2.
P { line-height: 120% } /* 120% of ’font-size’ */

URL

URL (унифицированный указатель) определяет адрес ресурса в интернете. Новое средство определяющее ресурс названо URN (унифицированное имя ресурса). Вместе они составляют понятие URiS (унифицированный идентификатор ресурса). В CSS спецификации используется именно термин URiS.

Значение Uri в CSS спецификации обозначается через <uri>. Однако для его установки необходимо использовать "url()", например:

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

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

Пример:

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

Круглые скобки, запятые, символ пробела, дойные и одинарные кавычки, используемые в нутрии Url должны быть экранированы, то есть сопровождаться обратным слешем "\".

В зависимости от типа Url, указанные знаки могут быть заменены специальными символами (например "("=%28, ")"=%29 и т.д.).

Спецификация CSS2 позволяет использовать вместо абсолютного значения Url относительное значение. Относительное значение зависит от базового значения для всего стиля.

Например, при использовании следующего правила:

  1.
BODY { background: url("yellow") }

и при условии, что базовый Url для всего стиля будет:

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

фон элемента BODY будет определен изображением, расположенным по адресу:

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

Цвета в CSS

Изменять цвет текста в CSS возможно с помощью свойства "color". Значение данного свойства может быть установлено либо с помощью ключевых слов, либо с помощью формата RGB. При этом ключевые слова, согласно спецификации CSS, должны быть помещены в парные кавычки.

Список ключевых слов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, и yellow. Указанные 16 ключевых слов соответствуют спецификации HTML 4.0.

Пример:

  1.
BODY {color: black; background: white }
  2.
H1 { color: maroon }
  3.
H2 { color: olive }

На страницах интернета распространена следующая таблица цветов в формате rgb:

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

Пример устанавливает такой же цвет параграфа и цвет текста как фоновый цвет окна пользователя и цвет текста этого окна

  1.
P { color: WindowText; background-color: Window }

Цветовая модель в формате RGB использует числа для указания значения свойства. Во всех следующих примерах устанавливается один и тот же цвет:

  1.
EM { color: #f00 } /* #rgb */
  2.
EM { color: #ff0000 } /* #rrggbb */
  3.
EM { color: rgb(255,0,0) } /* целое число от 0 - 255 */
  4.
EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой от  0.0% - 100.0% */

Формат значение RGB в шестнадцатеричной системе исчисления записывается с помощью знака "#" и немедленно следующих за ним трёх или шести символов. Если Вы укажете три знака в формате RGB, то они автоматически конвертируются в шесть знаков путём дублирования каждого из трёх знаков (например #rgb конвертируется в #rrggbb или #fb0 увеличится до #ffbb00).

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

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

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

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

  1.
EM { color: rgb(255,0,0) } 
  2.
EM { color: rgb(300,0,0) } /* сокращается до rgb(255,0,0) */
  3.
EM { color: rgb(255,-10,0) } /* сокращается до rgb(255,0,0) */
  4.
EM { color: rgb(110%, 0%, 0%) } /* сокращается до rgb(100%,0%,0%) */ 

Другие внешние устройства, например принтер, имеют другие характеристики цветовой расцветки. Одни цвета находящихся за пределами границ от 0…255, согласно стандарту sRGB могут поддерживаться внешними устройствами, другие же, хотя и находятся в пределах границ от 0 до 255, не могут поддерживаться внешними устройствами.

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

Единицы измерения углов

Значение углов (в CSS спецификации обозначается как <angels>) применяется совместно с использованием правил CSS для слепых и слабовидящих, о чём подробно описывается в разделе "Таблицы стилей для прослушивания".

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

1. deg: градусы
2. grad: grads
3. rad: радианы

Единицы измерения углов могут быть отрицательными. Однако они должны соответствовать диапазону от 0 до 360. Поэтому, значения -10deg и 350deg одинаковы. К примеру, правый угол соответствует значениям 90deg или 100 grad или 1.570796326794897rad.

Единицы времени

Значение времени (в спецификации обозначатся как <time>) используется в таблицах стилей для слепых и слабовидящих. Значение времени состоит из числа и сопровождается значением времени. Значением времени являются:

1. ms: миллисекунды
2. s: секунды

Значение времени любого типа не может быть отрицательным.

Частоты

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

Значение состоит из числа и идентификатора, обозначающего частоту. К значениям частот относят:

1. Hz: герц
2. kHz: килогерц

Строки

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

Примеры:

  1.
"this is a "'string'"
  2.
"this is a \"string\""
  3.
'this is a "string"'
  4.
'this is a \'string\'' 
  5.

Строки не могут напрямую содержать переходы на новую строку. Для включения новых строк используйте символы "\А" (шестнадцатеричное А означает переход на новую строку согласно кодовой таблице Unicode, согласно спецификации CSS2 означает конец строки).

Переход строк может использоваться, к примеру, в свойстве "content". Указанные правила позволят Вам безошибочно разделять одну строку на несколько строк, например по эстетическим или другим причинам, однако в таком случае строка должна содержать внутри себя обратный слеш. К примеру, две нижеуказанных строки CSS кода одинаковы:

  1.
A[TITLE="a not s\
  2.
o very long title"] {/*...*/}
  3.
A[TITLE="a not so very long title"] {/*...*/}