Введение в медиа и медиа-типы CSS

Мультимедиа и типы носителей

Одна очень важная спецификация, сделанная таблицей стилей, — это то, на каком медиа-документе будет представлен веб-документ; будь то экран, бумага, синтезатор речи, устройство Брайля и т. д.

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

В этом разделе мы обсудим следующие темы:

  • Указание таблиц стилей, зависящих от носителя.
  • Правило @media.
  • Распознаваемые типы мультимедиа.
  • Группы мультимедиа.

Указание зависимых от носителя таблиц стилей

Есть несколько способов указать, на каком носителе конкретная таблица стилей willworks.

@media или @import at-rules.

Первый и наиболее часто используемый способ указания медиа-зависимостей astylesheet должен
использовать @media или @import в правиле, для которого вы хотите указать медиа-зависимость.

Вот пример таблицы стилей для различных таблиц стилей для экрана и печати:

  @import url ("style_screen.css") screen; @media print {/* здесь находится таблица стилей для печатных СМИ */}  

В приведенном выше примере у нас есть таблица стилей с именем style_screen.css forscreen, а если это печатный носитель, у нас есть отдельная таблица стилей для этого (т.е. стили, упомянутые в @media print {}).

Укажите целевой носитель на языке документа.

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

      Ссылка на целевой носитель      

В этой части учебник

Теперь в этом примере тип мультимедиа упоминается с помощью MEDIA = "print, handheld" в теге ссылки соответствующего html документ.

Правило @media

@ media-rule используется для указания целевых типов мультимедиа для набора оператор заключен в пару фигурных скобок (т. е. {}). Можно указать несколько типов мультимедиа, разделенных запятыми, для одного набора операторов, указывающих стили..

Пример правила @media

Вот пример таблицы стилей для использования правила @media:

  @media print {body {font-size: 10pt} 
}
@media screen {
body {font-size: 12px}
}
@media screen, print {
body {color: navy}
}

CSS распознанные типы мультимедиа

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

все Подходит для всех устройств
Брайль Предназначен для Брайля устройства тактильной обратной связи.
с тиснением Предназначен для постраничных принтеров Брайля.
портативный Предназначен для портативных устройств (обычно небольшой экран, ограниченная пропускная способность).
print Предназначен для постраничного материала и для документов, просматриваемых на экране в режиме предварительного просмотра. Пожалуйста, обратитесь к разделу о страничных носителях для получения информации о проблемах форматирования, характерных для страничных носителей.
projection Предназначен для проецируемых презентаций, например, проекторов. Пожалуйста, обратитесь к разделу о страничных носителях для получения информации о проблемах форматирования, которые характерны для страничных носителей.
screen Предназначен в основном для цвета компьютерные экраны.
Speech Предназначен для синтезаторов речи. Примечание. В CSS2 для этой цели был подобный тип мультимедиа, называемый «слуховой». Подробности см. В приложении к таблицам стилей.
tty Предназначен для мультимедиа, использующего сетку символов с фиксированным шагом (например, телетайпы) , терминалы или портативные устройства с ограниченными возможностями отображения). Авторам не следует использовать пиксельные блоки с типом мультимедиа "tty".
tv Предназначен для устройств телевизионного типа (низкое разрешение, цвет, экраны с ограниченной прокруткой, доступен звук).

CSS Media groups

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

Типы мультимедиа Группы мультимедиа
непрерывный/постраничный визуальный/аудио/речевой/тактильный сетка/растровое изображение интерактивный/статический
шрифт Брайля непрерывный тактильная сетка оба
тисненая постраничная tactile grid static
портативный оба визуальный, аудио, речевой оба оба
print paged visual bitmap статический
projection paged visual растровое изображение интерактивный
экран непрерывный визуальный , аудио растровое изображение оба
речь непрерывный речь N/A both
tty непрерывный visual grid d> оба
tv оба visual, audio растровое изображение оба

Оцените статью
nanomode.ru
Добавить комментарий