Механизмы CSS

Специальные правила (at-rules)

Специальные правила дополнительно расширяют возможности CSS. Каждое правило начинается с символа "at" (@) и идентификатора и заканчивается, включительно, точкой с запятой (;) или блоком деклараций ({…}), что раньше.

Импорт (@import)

Правило позволяет импортировать (подключить) таблицу стилей из внешнего файла.

<style type="text/css">
    @import "basestyle.css";
    p {
      font-family: Verdana;
    }
  </style>

эквивалентно

<link rel="stylesheet" type="text/css" href="basestyle.css">
  <style type="text/css">
    p {
      font-family: Verdana;
    }
  </style>

Браузер игнорирует @import, если это правило находится внутри блока ({…}) или следует после любого другого правила кроме @import и @charset. Таким образом, следующие записи ошибочны:

<style type="text/css">
    h1 {
      color: red;
    }
    @import "mystyle.css";
  </style>

  <style type="text/css">
    @import "mystyle.css";
    @media print {
     @import "print-style.css"; 
      Body {
        background: white;
      }
  </style>

Правильными конструкциями будут:

<style type="text/css">
    @import "mystyle.css";
    h1 {
      color: red;
    }
  </style>

  <style type="text/css">
    @import "mystyle.css";
    @import "print-style.css" print;
    @media print {
      body {
        background: white;
      }
  </style>

Носитель (@media)

Это правило позволяет задавать набор правил для различных типов носителей в пределах одной таблицы стилей.

<style type="text/css">
    @media screen {
      body {
        background: blue;
        color: white;
      }
    /* body */}
    /* @media */
    @media print {
      body {
        background: transparent;
        color: black;
      }
    /* body */}
    /* @media */
    </style>

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

<style type="text/css" media="screen">
    body {
      background: blue;
      color: white;
    }
  </style>
  <style type="text/css" media="print">
    body {
      background: transparent;
      color: black;
    }
  </style>

Спецификация CSS 2.1 определяет следующие типы носителей:

• screen – цветной экран монитора
• print – принтер или экран монитора в режиме предварительного просмотра печати
• speech (в спецификации CSS 2 aural) – голосовой синтезатор
• projection – проектор. В отличие от монитора, предполагает постраничное представление
• handheld – небольшие устройства с низким разрешением экрана и ограниченной шириной полосы пропускания, например, сотовые телефоны
• tv – телевизор (низкое разрешение, цвет, ограниченная прокрутка, звук)
• brail – экран для людей с пониженным зрением, работающий по системе Брайля
• embossed – принтер Брайля
• tty – телетайп или устройство с ограниченными возможностями экрана
• all – любое устройство

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

Печатная страница (@page)

Это правило определяет размеры, ориентацию и поля печатной страницы.

@page {margin: 3cm;} задает поля шириной 3 см.

Псевдо-классы :left, :right и :first позволяют задать специальные правила для левой, правой (при двухсторонней печати) и первой страницы.

@page :left {
    margin-left: 4cm;
    margin-right: 3cm;
  }
  @page :right {
    margin-left: 3cm;
    margin-right: 4cm;
  }
  @page :first {
    margin-top: 10cm /* Верхнее поле для первой страницы 10 см */;
  }

Кодировка (@charset)

Это правило задает кодировку внешней таблицы стилей, должно присутствовать не более одного раза и располагаться в самом начале файла. @charset "Windows-1251"; /* Кириллица Windows */

Внедренный шрифт (@font-face)

Это правило позволяет разработчику загрузить специфический шрифт, отсутствующий на клиентской машине.

@font-face {
    font-family: "MyFont";
    src: url(FontSourceFile.eot);
  }
  h1 {
    font-family: "Verdana" , "MyFont";
  }

Специфичность и порядок применения правил

Конфликт правил неотделим от каскадных таблиц стилей. Когда два или более объявления подходят к одному элементу, браузер должен решить, какое именно применить. Internet Explorer применяет следующий алгоритм:

• Отбираются все подходящие объявления, включая наследованные, которые подходят к данному типу носителя ( @media )
• Объявления отсортировываются по весу и происхождению. Стили разработчика перевешивают стили пользователя (которые перевешивают встроенные стили браузера), если только пользовательское объявление не содержит пометки !important (важно), которая увеличивает вес объявления.
• Селекторы правил отсортировываются по специфичности, рассчитываемой как число, полученное строковым слиянием (a) наличия атрибута style у элемента, (b) числа атрибутов id, (c) числа атрибутов class и псевдо-классов и (d) числа типов элементов и псевдо-элементов в селекторе. Если элемент содержит атрибуты, влияющие на представление (например, атрибут width элемента table ) то эти атрибуты преобразуются в соответствующие CSS атрибуты с нулевой специфичностью.

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

  Селектор	Атрибут style (a)	Число атрибутов id (b)	Число классов (c)	Число типов (d)	Специфичность
  *	0	0	0	0	0
  li	0	0	0	1	1
  ul li	0	0	0	2	2
  li:first-line	0	0	0	2	2
  ul ol+li	0	0	0	3	3
  .class1	0	0	1	0	10
  li.class2	0	0	1	1	11
  li[class="class1"]	0	0	1	1	11
  li[id="myId"]	0	0	1	1	11
  .class1.class2	0	0	2	0	20
  li.class1.class2	0	0	2	1	21
  li#myId	0	1	0	1	101
  style=""	1	0	0	0	1000
• Если два правила имеют равный вес и специфичность, применяется прочитанное последним. (Импортированные при помощи @import таблицы стилей всегда проигрывают записанным позже.)

Вопросы

• Какими способами можно связать HTML-документ с таблицей стилей?
• Из чего состоит правило CSS?
• Что такое простой селектор?
• Что выбирает селектор типа?
• Что выбирает селектор класса?
• Что выбирает селектор ID?
• Какой смысл придают правилу CSS комбинаторы потомков и соседей?
• Перечислите и охарактеризуйте определяемые CSS псевдоклассы и псевдоэлементы.
• Какие типы носителей определяет спецификация CSS? Как связать таблицу стилей с носителем?
• Как разрешаются конфликты определения стилей?