Дополнительные правила

В этой статье рассмотрим дополнительные правила в CSS. Дополнительные правила инкапсулируют набор правил CSS и применяют их к чему-нибудь конкретному.

1. Типы средств визуального отображения

Дополнительное правило @media позволяет применять заданный набор стилей с определенным типом средств визуального отображения. Например:

@media projection {
   body {
      font-size: 10pt;
   }

   #navigation {
      display: none;
   }
}

Существуют разные типы средств визуального отображения:

all – любые средства отображения.
aural – речевые синтезаторы.
handheld – портативные устройства.
print – принтеры.
projection – проекторы.
screen – компьютерные экраны.

2. Набор символов

Дополнительное правило @charset устанавливает кодировку символов внешней каскадной таблицы стилей. Ее определяют в начале файла стилей, например:

@charset "ISO-8859-1";

3. Гарнитура шрифта

Дополнительное правило @font-face используется для подробного описания шрифта и может внедрять внешний шрифт в каскадную таблицу стилей.

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

Дополнительное правило @font-face можно использовать следующим образом:

@font-face {
   font-family: somerandomfontname;
   src: url(somefont.eot);
   font-weight: bold;
}

p {
   font-family: somerandomfontname;
   font-weight: bold;
}

В данном примере шрифт somefont.eot будет использоваться в параграфах (этого не произошло бы, если бы в селекторе p не было бы свойства font-weight: bold).

4. Страницы

Дополнительное правило @page предназначено для постраничных средств вывода информации и является расширенным способом назначить стили, например, для печатающих устройств. Оно определяет страничный блок, который расширяет блоковую модель, что позволяет устанавливать размер и представление для целой страницы.

Существует ряд условий, относящихся к правилу @page:

В связи с тем, что здесь нет полей и рамок и это не экран компьютера, не допускается использование в качестве единиц измерения пикселей (px) и «эмов» (em).

Есть ряд специфических свойств, используемых в данном дополнительном правиле. Это свойство size, которое принимает одно из следующих значений — portrait, landscape, auto или число; свойство marks, также использующееся для определения ограничительных меток.

Cуществует три псевдокласса, используемых особым образом с дополнительным правилом @page:

:first – определяет стиль для первой страницы.

:left и :right – определяют стиль для левосторонней и правосторонней страницы соответственно. Они могут быть использованы, например, для того чтобы установить большее левое поле на левосторонних страницах и большее правое поле на правосторонних страницах.

Пример использования дополнительного правила:

@page {
   size: 17cm 25cm;
   margin: 2cm;
   marks: cross;
}