Каскадные таблицы стилей
Cascading Style Sheets (Таблицы Каскадных Стилей) – это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Правило в CSS состоит из двух частей: селектора и описания. В свою очередь, описание также имеет две части: свойство и значение.
Спецификация языка HTML 4.0 определяет правила описания таблиц стилей для HTML-документов: либо непосредственно внутри HTML документа, либо посредством внешней таблицы стилей. Для вставки таблицы стиля в документ используют элемент STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Эта надпись будет выведена синим цветом </H1>
</BODY>
</HTML>
Для максимальной гибкости мы рекомендуем авторам создавать внешние таблицы стилей, которые могут быть модифицированы без изменения исходного HTML- документа и могут совместно использоваться несколькими документами. Для соединения с внешней таблицей стиля можно использовать элемент LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1> Эта надпись будет выведена синим цветом </H1>
</BODY>
</HTML>
Элемент LINK определяет:
- тип соединения: "stylesheet".
- местонахождение таблицы стилей через атрибут "ref".
- тип присоединяемой таблицы стилей: "text/css".
Таблицы стилей CSS не учитывают регистр за исключением тех их частей, которые не являются объектами языка CSS.
В CSS2 идентификаторы (включая названия элементов, классы и атрибут ID в селекторах) могут содержать символы из диапазонов от A до Z, от a до z и от 1 до 9; символы, код которых по стандарту ISO-10646 превосходит 161, а также дефис "-". Идентификаторы не могут начинаться с дефиса или с цифры и могут содержать специальные комбинации символов (с использованием обратного слэша), а также числовые коды кодировки ISO-10646 (см. следующий пункт). Например, идентификатор "B&W?" можно написать как "B\&W\?" или "B\26 W\3F".
В CSS2 обратный слэш (\) используется для специального кодирования символов тремя различными способами.
Если обратный слэш и следующий за ним символ новой строки находятся внутри строки, то они игнорируются (т.е. считается, что строка не будет содержать ни обратного слэша, ни перехода на новую строку).
Наличие обратного слэша отменяет действие специальных символов языка CSS. Специальное значение любого символа (за исключением шестнадцатеричного числа) можно "нейтрализовать" с помощью обратного слэша. Например, "\"" представляет собой строку, содержащую только одну пару кавычек.
Препроцессоры таблиц стилей не должны удалять обратные слэши, т.к. это повлечет за собой изменение смысла таблицы стилей.
Если за шестнадцатеричным числом следует цифра или буква, то следует четко обозначить конец данного числа. Это можно сделать с помощью:
-
- обычного пробела (или любого другого пустого символа): "\26 B" ("&B");
- написания ровно шести шестнадцатеричных цифр: "\000026B" ("&B").
На практике можно комбинировать эти два способа. Следует только помнить, что следующий после шестнадцатеричного числа пробел игнорируется тоже. Поэтому "реальный" пробел после "нейтрализуемой" последовательности должен дублироваться, либо нейтрализоваться вместе с ней.
Таблица стилей, написанная с использованием CSS любого уровня, представляет собой список выражений. С обоих сторон вокруг выражений может находитьсяпустое пространство.
Блок начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". В промежутке между ними могут находиться любые символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки всегда должны присутствовать парами и при этом могут быть вложенными. Одинарные и двойные кавычки также должны присутствовать только парами, тогда расположенный между ними текст будет рассматриваться как строка.
Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений.
Блок объявлений (обозначаемый далее как {}-блок) начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой (";").
Селектор включает все, что находится до первой следующей за ним левой фигурной скобки "{", не включая ее. Он всегда находится рядом с {}-блоком. Если браузер не может выполнить синтаксический анализ селектора (т.е. селектор не является допустимым селектором CSS2), то он также долженпроигнорировать и {}-блок.
Согласно спецификации CSS2 запятая (",") в селекторах имеет определенное значение. Пока еще не известно, примет ли запятая в будущих версиях CSS другие значения. Тем не менее, если в селекторе имеется ошибка, то, несмотря на корректность остальной его части, все объявление должноигнорироваться целиком.
В приведенном ниже примере символ "&" в теле селектора CSS2 недопустим, поэтому браузер должен полностью игнорировать вторую строку и не устанавливать красный цвет для отображения элемента H3:
H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }
Ниже приведен более сложный пример. Первые две пары фигурных скобок находятся внутри строки, и не обозначают конца селектора. Это пример корректного объявления CSS2.
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
Объявление может быть пустым или включать свойство и следующие за ним двоеточие (":") и значение этого свойства. Вокруг каждого из этих трех элементов может находиться произвольное количествопробелов.
В соответствии с принципами работы селекторов несколько объявлений для одного селектора могут быть объединены в группы, в которых они отделяются друг от друга точкой с запятой (";").
Таким образом, приведенные ниже правила:
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
эквиваленты следующим правилам:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
Свойство является идентификатором. Поэтому в его значении могут присутствовать произвольные символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки, а также одинарные и двойные кавычки должны появляться парами, а точка с запятой, если она не принадлежит строке, должнакодироваться с помощью обратного слэша. Круглые, квадратные и фигурные скобки могут быть вложенными. Символы внутри кавычек интерпретируются как строка.
Синтаксис значений определяется для каждого свойства отдельно, но в любом случае значения формируются из идентификаторов, строк, чисел, длин, процентных соотношений, URI, цветов, углов, временных значений и частот.
Браузер должен игнорировать объявление с некорректным именем свойства или с некорректным его значением. У каждого свойства в CSS2 имеются собственные синтаксические и семантические ограничения на принимаемые им значения.
Например, предположим, что синтаксический анализатор CSS2 анализирует следующую таблицу стилей:
H1 { color: red; font-style: 12pt } /* Некорректное значение 12pt */
P { color: blue; font-vendor: any; /* Некорректное свойство font-vendor */
font-variant: small-caps }
EM EM { font-style: normal }
Второе объявление в первой строке имеет некорректное значение ’12pt’. Второе объявление во второй строке содержит неопределенное свойство ‘font-vendor’. Таким образом, синтаксический анализатор CSS2проигнорирует эти объявления, заметно уменьшив при этом таблицу стиля до следующего вида:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Комментарии начинаются с символов "/*" и заканчиваются символами "*/". Они могут находиться в любом месте между метками, и их содержимое не влияет на работу таблицы. Комментарии могут и не включаться в таблицу.
Некоторые типы значений могут быть выражены в целых (обозначаются как <целое>) или вещественных числах (обозначаются как <число>). Вещественные и целые числа представляются только в десятичной системе счисления. Значения типа <целое> состоят из одной или нескольких цифр от 0 до 9. Значения типа <число> могут совпадать с типом <целое> или состоять из группы цифр и следующих за нею точки и другой группы цифр. Вещественным и целым числам могут предшествовать символы "-" или "+" для обозначения знака. Следует помнить, что многие свойства, имеющие вещественные или целочисленные значения, как правило, ограничиваются диапазоном неотрицательных чисел.
Единицы измерения длины используются при определении горизонтальных и вертикальных размеров.
Значения поперечных размеров (в данной спецификации обозначенные как <длина>) задаются в соответствии со следующим форматом: знак (‘+’ или ‘-‘, по умолчанию используется знак ‘+’), непосредственно за которым следует<число> (с десятичной точкой или без нее), непосредственно за которым следует единица измерения длины (например, пикселы, градусы и т.д.). После нулевого значения длины единицу измерения можно опускать.
Некоторые свойства допускают использование отрицательных значений длины, но это может усложнить модель форматирования. Кроме того, на отрицательные значения длин могут накладываться ограничения в зависимости от конкретной реализации. Если отрицательные значения длин не поддерживаются, то его необходимо преобразовать в ближайшее поддерживаемое значение.
Существует два типа единиц измерения длины: относительные и абсолютные. Относительные единицы измерения указывают значение длины относительно других единиц измерения. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой (например, с экрана компьютера на лазерный принтер).
К относительным единицам измерения относятся:
- 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’ при указании размера шрифта родительского элемента. Она может использоваться для измерения вертикальных и горизонтальных размеров. (В типографической лексике данная единица измерения иногда называется учетверенной шириной.)
Единица измерения ‘ex’ определяется свойством шрифта ‘x-height’. Термин "x-высота" принят из-за того, что он определял размеры, равные высоте строчной буквы "x". Данная единица измерения может использоваться и для тех шрифтов, не включающих букву "x".
Правило
H1 { line-height: 1.2em }
говорит о том, что высота строки элементов H1 будет на 20% больше размера шрифта элементов H1. С другой стороны, правило
H1 { font-size: 1.2em }
говорит о том, что размер шрифта элементов H1 будет на 20% больше размера шрифта, наследуемого элементами H1.
Если единицы измерения ’em’ и ‘ex’ используются для корневого элемента дерева документа (например, для элемента "HTML" в HTML-документе), то их масштаб определяется относительно начального значения свойства.
Единица измерения ‘пиксел’ используется для определения разрешающей способности устройств вывода, чаще всего, компьютерных мониторов. Если плотность расположения пикселей некоторого устройства вывода заметно отличается от разрешения типичного дисплея, то браузердолжен изменить масштаб одного пиксела. Рекомендуется в качестве эталонного пиксела рассматривать угловой размер одного пиксела в устройстве, обладающем разрешением в 90 точек на дюйм и удаленном от наблюдателя на расстояние вытянутой руки. Для типичной длины руки, равной 28 дюймам, этот угловой размер составляет примерно 0.0227 градусов.
При чтении на расстоянии вытянутой руки 1px равен примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, т.е. при чтении на расстоянии меньшем, чем длина руки (примерно, 55 см, 21 дюйм), 1px равен примерно 0.21 мм. Для принтера с разрешением в 300 точек на дюйм значение пиксела может быть округлено до 3 точек (0.25 мм); для принтера с разрешением в 600 точек на дюйм – до 5 точек.
Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов, обычно они наследуют вычисляемые значения.
Согласно следующим правилам вычисляемое значение свойства ‘text-indent’ элементов H1 будет равно 36pt, а не 45pt, как это было бы, если бы H1 являлся дочерним элементом элемента BODY.
BODY {
font-size: 12pt;
text-indent: 3em; /* т.е. 36pt */
}
H1 { font-size: 15pt }
Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:
- in: дюйм – 1 дюйм равен 2.54 сантиметрам.
- cm: сантиметр
- mm: миллиметр
- pt: точка – 1 точка, используемая в CSS2, равна 1/72 дюйма.
- pc: пика – 1 пика равна 12 точкам.
H1 { margin: 0.5in } /* дюймы */
H2 { line-height: 3cm } /* сантиметры */
H3 { word-spacing: 4mm } /* миллиметры */
H4 { font-size: 12pt } /* точки */
H4 { font-size: 1pc } /* пики */
Если указанное значение длины не поддерживается, то агенты пользователей должны аппроксимировать его поддерживаемым значением.
Процентное соотношение (обозначаемое в данной спецификации как <проценты>) записывается в соответствии со следующим форматом: знак числа (‘+’ или ‘-‘, по умолчанию используется знак ‘+’), непосредственно за которым следует<число>, непосредственно за которым следует символ ‘%’.
Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. У каждого свойства, поддерживающего процентное задание значений, определено и то значение, относительно которого определяется процентное соотношение. В таком качестве может выступать значение другого свойства того же элемента, или свойства предка, или форматирующего контекста (например, значение шириныконтейнера). Если значение процентного соотношения присваивается свойству корневого элемента, и оно соотносится с наследуемым значением другого свойства, то конечным значением будет соответствующая процентная доля, взятая от начального значения этого свойства.
Т.к. дочерние элементы, как правило, наследуют вычисляемое значение от родительских элементов, то в следующем примере дочерний элемент элемента P унаследует значение свойства ‘line-height’, равное 12pt, а не процентное значение (120%):
P { font-size: 10pt }
P { line-height: 120% } /* 120% от ‘font-size’ */
4.3.4 URL + URN = URI
URL (универсальный адрес ресурса – Uniform Resource Locator, см. [RFC1738] и [RFC1808]) описывает адрес ресурса в Web. Идентификация ресурсов осуществляется с помощью URN (универсального имени ресурса – Uniform Resource Name). В совокупности они образуют URI (универсальный идентификатор ресурсов – Uniform Resource Identifier, см.[URI]). В данной спецификации используется понятие URI.
Значения URI обозначаются как <uri>. Для указания URI в значениях свойств используется структура "url()". Например:
BODY { background: url("http://www.bg.com/pinkish.gif") }
Значение URI задается в следующем формате: строка ‘url(‘, затем, возможно, пробел, затем, возможно, одинарная или двойная кавычка, затем сам URI, затем одинарная или двойная кавычка, затем пробел, затем скобка ‘)’. Кавычки в обоих случаях должны быть одинаковыми.
Пример без использования кавычек:
LI { list-style: url(https://www.redballs.com/redball.png) disc }
Скобки, запятые, пробелы, одинарные и двойные кавычки, находящиеся непосредственно в самом URI, должны кодироваться с использованием обратного слэша: ‘\(‘, ‘\)’, ‘\,’ и т.д.
В зависимости от типа используемого URI вышеупомянутые символы можно задавать с помощью процедур, предусмотренных в URI (где "(" = %28, ")" = %29, и т.д.)[URI].
Для создания модульных таблиц стилей, не зависящих от абсолютного адреса ресурса, разработчики могут использовать относительные URI. Они (в соответствии с[RFC1808] ) разрешаются в полные URI с использованием базового URI. Алгоритм этой процедуры описан в разделе 3 стандарта RFC 1808. Для таблиц стилей CSS базовым является URI таблиц стилей, а не исходного документа.
Например, предположим, что следующее правило:
BODY { background: url("yellow") }
помещено в таблицу стилей, ссылка на которую определяется следующим URI:
http://www.myorg.org/style/basic.css
В качестве фона элемента BODY исходного документа будет использоваться изображение, описанное в ресурсе, заданном следующим URI:
http://www.myorg.org/style/yellow
Агенты пользователей могут по-разному обрабатывать URI, ссылающиеся на несуществующие или неисполнимые ресурсы.
Цвет является либо ключевым словом, либо численным значением в RGB.
Список ключевых слов, используемых для названия цветов: aqua (цвет морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (желто-зеленый), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (темно-бирюзовый), white (белый) и 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) } /* целое в диапазоне 0 – 255 */
EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой 0.0% – 100.0% */