Опубликован: 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?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

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

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

Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
Галина Матрук
Галина Матрук
Молдова, Республика, Кишинев, UTM, 2010