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

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

Импортирование

Дополнительное правило @import подключает одну каскадную таблицу стилей к другой. Например, если вы хотите добавить стили другой каскадной таблицы стилей к своей, то вам нужно написать


@import url(addonstyles.css);

Очень часто его используют вместо элемента <link>, чтобы подключить файл CSS к странице HTML, по сути, используя внутренние стили. Это выглядит следующим образом:


<style type="text/css" media="all">@import url(monkey.css);</style>

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

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

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


@media print {
   body {
      font-size: 10pt;
      font-family: times new roman, times, serif;
   }

   #navigation {
      display: none;
   }
}

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

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

Также можно использовать braille, embossed, tty и tv.

Внимание: Несмотря на все вышеперечисленное, в настоящее время IE поддерживает только типы all, screen и print.

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

Дополнительное правило @charset устанавливает кодировку символов внешней каскадной таблицы стилей. Ее определяют в начале файла стилей, и выглядит она как @charset "ISO-8859-1";

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

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

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

Дополнительное правило @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).

Поддержка внедряемых шрифтов браузерами очень фрагментарна. У браузеров Mozilla такой поддержки нет, и никто не знает, будет ли она в будущем. Похоже более менее внятная поддержка внедряемых шрифтов есть только у IE. Чтобы внедрить шрифт в IE, необходимо при помощи Microsoft WEFT преобразовать символы шрифта TrueType в сжатую форму шрифта OpenType (который только и можно использовать в определяемой строке URI). Из-за этой ограниченной (и поэтому сложно осуществимой) поддержки, лучше вообще не использовать шрифты, у которых нет адекватной альтернативы среди системных шрифтов.

Страницы

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

Существует ряд условий, относящихся к правилу @page. Так, в связи с тем, что здесь нет полей и рамок и это не экран компьютера, не допускается использование в качестве единиц измерения пикселей (px) и "эмов" (em).

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


@page {
   size: 15cm 20cm;
   margin: 3cm;
   marks: cross;
}

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

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

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

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