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

В этой статье рассмотрим дополнительные правила в 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;
}

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: