web-разработка

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

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

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

Дополнительное правило @media позволяет применять заданный набор стилей с определенным типом средств визуального отображения. Например:
@media projection {
   body {
      font-size: 10pt;
   }

   #navigation {
      display: none;
   }
}
Существуют разные типы средств визуального отображения:
  1. all – любые средства отображения.
  2. aural – речевые синтезаторы.
  3. handheld – портативные устройства.
  4. print – принтеры.
  5. projection – проекторы.
  6. 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;
}
2023-11-19 20:53 Самоучитель по CSS