Часть II.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @charset | Задает кодировку символов. |
| @font-face | Задает описания шрифтов. |
| @import | Включает другую таблицу стилей в текущую. |
| @media | Задает имена устройств отображения. |
| @page | Задает свойства страницы для печати. |
Примеры директив:
@import "subs.css";
@media print {
BODY { font-size: 10pt }
}
Правило (rule) состоит из селектора и блока деклараций, заключенного в фигурные скобки, например:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
Здесь H1 это селектор, за которым следует блок деклараций. Каждая декларация, как видно из данного примера, состоит из названия свойства (например, font-weight), символа двоеточия (:) и значения свойства (например, bold). Декларации должны разделяться точкой с запятой (;).
Отметим, что согласно определению CSS все его элементы не зависят от регистра. Таким образом мы можем писать h1 вместо H1, Font-Weight вместо font-weight и т .д. Тем не менее в целях единообразия в данном справочнике мы пишем имена селекторов прописными буквами, а названия свойств строчными. Значения свойств, которые в документе могут зависеть от регистра, определяются языком документа. Так, названия тегов HTML не зависят от регистра, а названия тегов XML зависят.
Таблицы стилей могут содержать комментарии. Комментарий начинается с символов /* и заканчивается символами */. Вложенные комментарии не допускаются. Пример:
H1 {
font-weight: bold; /* жирность шрифта */
font-size: 12pt; /* размер шрифта */
font-family: Helvetica; /* название шрифта */
font-variant: normal; /* вариант шрифта */
font-style: normal /* стиль шрифта */
}
Значения свойств CSS могут быть следующих типов.
Некоторые свойства могут иметь целые (далее обозначаются как <целое>) или действительные (далее обозначаются как <число>) значения. Эти значения могут записываться только в десятичной нотации. Целое число состоит из одной или более десятичных цифр 0-9. Действительное число либо является целым, либо состоит из нуля или более десятичных цифр, за которыми следует точка (.) и одна или более десятичных цифр. И перед целыми, и перед действительными числами может стоять знак: плюс (+) или минус (-). Примеры:
| Целые числа | Действительные числа |
|---|---|
| 101 | 101 |
| -21 | 1.234567 |
| 1234567 | -.999 |
Размеры (далее обозначаются как <размер>) указывают на вертикальный или горизонтальный размеры чего-либо. Размер задается как <число>, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.
Единицы измерения подразделяются на абсолютные и относительные. Абсолютные единицы измерения задают точный физический размер, а относительные указывают размер относительно другого размера. Их описания сведены в следующие таблицы:
| in | дюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик) |
| cm | сантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки) |
| mm | миллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки) |
| pt | точки (1 точка = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм) |
| pc | пики (1 пика = 12 точек = 1/6 дюйма = 0.423 см = 4.23 мм) |
| em | размер (font-size) соответствующего шрифта |
| ex | высота строчных букв (x-height) соответствующего шрифта |
| px | пиксели (размер зависит от устройства отображения) |
Абсолютные единицы измерения применимы только тогда, когда нам известны точные физические размеры устройства отображения (например, экрана дисплея или страницы принтера). Поэтому в большинстве случаев используются относительные единицы, назначение которых стоит пояснить подробнее.
Единицы em и ex основываются на размере шрифта того элемента, к которому относится данная декларация. При этом em задает размер шрифта, т. е. размер его наибольшей буквы (обычно это буква 'M', отсюда аббревиатура em), а ex высоту строчных букв шрифта (обычно это высота буквы 'x', отсюда английское название x-height и аббревиатура ex). С другой стороны, единица px основана на размере пикселя устройства отображения (обычно это дисплей). Пиксель это точка дисплея и ее размер зависит как от физических размеров экрана, так и от его разрешения: пиксель на экране с разрешением 640x480 будет больше, чем на экране с разрешением 1280x1024. Примеры задания размеров:
H1 { margin: 0.5em }
H1 { text-indent: 1ex }
H3 { font-size: 12px }
H1 { margin: 0.5in }
H2 { line-height: 3cm }
H3 { word-spacing: 4mm }
H4 { font-size: 12pt }
H4 { font-size: 1pc }
Процентные значения (далее обозначаются как <процент>) указывают на величину чего-либо в процентах от другой величины. Они задаются как <число>, за которым следует символ процента (%), например:
H1 { font-size: 120% }
Всюду, где CSS допускает использование процентных значений, в описании соответствующего свойства четко указывается, какая именно величина является основой для вычисления значения свойства в процентах.
Этот тип значений (далее обозначаемый как <uri>) задает ссылку на унифицированные идентификаторы ресурсов. URI задается в форме url(URI), например:
BODY { background: url(http://mysite.com/bg.gif) }
Текст внутри url() можно заключить в апострофы или кавычки это ничего не изменит, например:
BODY { background: url("http://mysite.com/bg.gif") }
Цветовые значения (далее обозначаются как <цвет>) могут задаваться либо шестнадцатеричным числом с префиксом "#" вида "#rrggbb", задающим RGB-код цвета, либо одним из 16-ти символических имен, приведенных в Таблице П9.1. CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторением цифр, а не добавлением нулей. Иными словами, код #FA1 соответствует полному коду #FFAA11. Кроме того, RGB-код цвета может быть задан конструкцией rgb(r,g,b), например, следующие декларации задают один и тот же красный цвет:
EM { color: red } /* название цвета */
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% */
Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в Таблице П9.2, но мы рекомендуем использовать вместо них соответствующие шестнадцатеричные значения.
Помимо стандартных имен цветов CSS поддерживает названия системных цветов, предназначенных для использования в соответствии с графическим пользовательским интерфейсом операционных систем клиентов. Эти названия и их назначение приведены в следующей таблице (значения этих цветов, принятые по умолчанию в системе Windows, указаны в Таблице П9.3).
| activeborder | Цвет рамки активного окна | inactivecaptiontext | Цвет текста заголовка неактивного окна |
| activecaption | Цвет фона заголовка активного окна | infobackground | Цвет фона подсказок (tooltips) |
| appworkspace | Цвет фона многооконной программы | infotext | Цвет текста подсказок (tooltips) |
| background | Цвет фона системной подложки (desktop) | menu | Цвет фона меню |
| buttonface | Цвет трехмерных кнопок | menutext | Цвет текста меню |
| buttonhighlight | Цвет выделенных трехмерных кнопок | scrollbar | Цвет фона полос прокрутки |
| buttonshadow | Цвет тени трехмерных кнопок | threeddarkshadow | Темная тень трехмерных элементов |
| buttontext | Цвет текста трехмерных кнопок | threedface | Цвет трехмерных элементов |
| captiontext | Цвет текста заголовков | threedhighlight | Цвет выделенных трехмерных элементов |
| graytext | Серый цвет (для запрещенных элементов) | threedlightshadow | Светлая тень трехмерных элементов |
| highlight | Цвет фона выделенных элементов | threedshadow | Тень трехмерных элементов |
| highlighttext | Цвет текста выделенных элементов | window | Цвет фона окон |
| inactiveborder | Цвет рамки неактивного окна | windowframe | Цвет фрейма окон |
| inactivecaption | Цвет фона заголовка неактивного окна | windowtext | Цвет текста в окнах |
Текстовые строки (далее обозначаются как <строка>) могут быть заключены либо в кавычки, либо в апострофы. При этом если строка заключена в кавычки, для включения в нее символа кавычки нужно использовать форму \" или \22. Аналогично, если строка заключена в апострофы, для включения в нее символа апострофа нужно использовать форму \' или \27. Для включения в строку символа новой строки используется форма \A (код перевода строки в Unicode). Примеры текстовых строк:
"это 'строка'" 'это \'строка\'' 'это "строка"' "это \"строка\"" "это строка,\A состоящая из двух строк"
Счетчики (далее обозначаются как <счетчик>) обозначаются идентификаторами. Для извлечения значения счетчика используются обозначения counter(идентификатор) или counter(идентификатор, стиль). По умолчанию стиль равен decimal. Для доступа ко всем счетчикам с данным именем используются обозначения counters(идентификатор, строка) или counters(идентификатор,строка, стиль). Последняя функция возвращает значения всех счетчиков с данным именем, существующих в данный момент, разделенных текстом строка.
Доступ к значению счетчиков возможен только из свойства content. Подробности см. в п. 2.11.3.
Угловые величины (далее обозначаются как <угол>) используются в звуковых таблицах стилей для задания пространственных характеристик звука. Угол задается как <число>, за которым следует угловая единица измерения. Если угол равен 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения углов:
| deg | градусы |
| grad | грады |
| rad | радианы |
Эти единицы соотносятся следующим образом: 90 градусов = 100 градов = 1.570796326794897 радиан. Примеры угловых величин:
H1 { azimuth: 45deg }
P { azimuth: -10deg }
H1 { elevation: 100grad }
P { elevation: 3.14rad }
Времена (далее обозначаются как <время>) используются в звуковых таблицах стилей для задания временных характеристик звука. Время задается как <число>, за которым следует единица измерения времени. Если время равно 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения времени:
| ms | миллисекунды (1 мс = 0.001 с) |
| s | секунды (1с = 1000 мс) |
Времена не могут быть отрицательными. Примеры:
H1 { pause-before: 1s }
P { pause: 20ms }
Частоты (далее обозначаются как <частота>) используются в звуковых таблицах стилей для задания частотных характеристик звука. Частота задается как <число>, за которым следует единица измерения частоты. Если частота равна 0, то единицу измерения можно не указывать. CSS поддерживает следующие единицы измерения частот:
| hz | герцы (1 Гц = 0.001 кГц) |
| khz | килогерцы (1 кГц = 1000 Гц) |
Частоты не могут быть отрицательными. Примеры:
H1 { pitch: 200hz } /* басовый звук */
P { pitch: 6khz } /* дрожащий звук */
Для каждого свойства CSS определяет те устройства отображения, к которым это свойство применимо. С этой целью все устройства отображения классифицированы в CSS по следующим признакам:
Соответствующее разбиение устройств на группы выглядит так.
| Устройство | Группы устройств | |||
|---|---|---|---|---|
| визуальное/ звуковое/ тактильное | непрерывное/ страничное | символьное/ графическое | интерактивное/ статическое | |
| aural | звуковое | непрерывное | | и то, и другое |
| braille | тактильное | непрерывное | символьное | и то, и другое |
| emboss | тактильное | страничное | символьное | и то, и другое |
| handheld | визуальное | и то, и другое | и то, и другое | и то, и другое |
| визуальное | страничное | графическое | статическое | |
| projection | визуальное | страничное | графическое | статическое |
| screen | визуальное | непрерывное | графическое | и то, и другое |
| tty | визуальное | непрерывное | символьное | и то, и другое |
| tv | визуальное, звуковое | и то, и другое | графическое | и то, и другое |
Директива @media предназначена для создания таблиц стилей, зависящих от устройства отображения. Она задает список устройств отображения, разделенных запятыми, к которым применимы содержащиеся в ней правила, заключенные в фигурные скобки. Если текущего устройства отображения нет в списке, то содержимое данной директивы должно игнорироваться обозревателем. Примеры:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Поддержка:Только устройства screen, print и all (5.0+)
Не поддерживается