Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3910 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 7:

Типы носителя

< Лекция 6 || Лекция 7: 12 || Лекция 8 >
Аннотация: Даются спецификации таблиц стилей, зависимых от типа носителя и описания этих типов.

Введение

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

Некоторые свойства CSS созданы для конкретных носителей (например, свойство "'cue-before'" - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство "'font-size'" используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.

Спецификация таблиц стилей, зависимых от типа носителя

В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:

  • Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.

    @import url("loudvoice.css") aural;
    @media print {
      /* здесь идёт таблица стилей для печати */
    }
  • Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ( " [HTML40] " ) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
      <HEAD>
        <TITLE>Link to a target medium</TITLE>
          <LINK rel="stylesheet" type="text/css" 
     	 media="print, handheld" href="foo.css">
       </HEAD>
       <BODY>
           <P>Тело документа...
       </BODY>
    </HTML>

Правило "@import" определено в главе о "каскадах" .

Правило @media

Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:

@media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }
< Лекция 6 || Лекция 7: 12 || Лекция 8 >