Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 4:

Механизмы CSS

< Лекция 3 || Лекция 4: 12345 || Лекция 5 >

Специальные правила (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? Как связать таблицу стилей с носителем?
  • Как разрешаются конфликты определения стилей?
< Лекция 3 || Лекция 4: 12345 || Лекция 5 >
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?