Введение в CSS медиа и типы медиа
Носители и типы носителей
Одна очень важная спецификация, сделанная таблицей стилей, заключается в том, на каком носителе будет представлен веб-документ; будь то экран, бумага, синтезатор речи, устройство Брайля и т. д.
Это очень важно, поскольку есть определенные свойства CSS, которые используются только в определенных медиа. И снова, есть свойства, которые являются общими для более чем одного носителя, но им нужно разное значение для отображения на разных носителях. Например, размер шрифта на экране должен быть больше, чем на бумаге. Таким образом, значение свойства font-size, отвечающего за размер шрифтов, различно на экране и бумаге.
В этом разделе мы обсудим следующие темы:
- Указание медиа-зависимых таблиц стилей.
- Правило @media.
- Распознанные типы медиа.
- Медиа группы.
Указание медиа-зависимых таблиц стилей
Есть несколько способов указать, на каком носителе будет работать конкретная таблица стилей.
@media или @import at-rules.
Первый и наиболее часто используемый способ указания медиа-зависимостей таблицы стилей заключается в
используйте @media или @import в правиле, для которого вы хотите указать медиа-зависимость.
Вот пример таблицы стилей для различных таблиц стилей для экрана и печати:
@import url("style_screen.css") screen;
@media print {
/* style sheet for print media goes here */
}В приведенном выше примере у нас есть таблица стилей с именем style_screen.css для экрана, и если это печатный носитель, у нас есть отдельная таблица стилей для этого (т. Е. Стили, упомянутые в @media print {}).
Укажите целевой носитель на языке документа.
Для понимания этого мы воспользуемся следующим примером:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Link to a target medium</title>
<link rel="stylesheet" type="text/css" media="print, handheld" href="first.css">
</head>
<body>
<p>We are learning CSS media types in this part of the tutorial</p>
</body>
</html>
Теперь в этом примере тип носителя упоминается с помощью 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 распознаваемые типы медиа
Вот диаграмма распознанных типов носителей и их краткая информация:
| все | Подходит для всех устройств |
| шрифт Брайля | Предназначен для устройств тактильной обратной связи Брайля. |
| тисненая | Предназначен для страничных принтеров Брайля. |
| портативный | Предназначен для портативных устройств (как правило, небольшой экран, ограниченная пропускная способность). |
| Распечатать | Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей. |
| проекция | Предназначен для проектируемых презентаций, например, проекторов. Пожалуйста, обратитесь к разделу о выгружаемых носителях для получения информации о проблемах форматирования, которые являются специфическими для выгружаемых носителей. |
| экран | Предназначен в основном для цветных компьютерных экранов. |
| речь | Предназначен для речевых синтезаторов. Примечание. Для этой цели в CSS2 был похожий тип мультимедиа, называемый «слуховой». Смотрите приложение на слуховых таблицах стилей для деталей. |
| TTY | Предназначен для мультимедиа, использующего сетку символов с фиксированным шагом (например, телетайпы, терминалы или портативные устройства с ограниченными возможностями отображения). Авторы не должны использовать пиксельные единицы с типом носителя "tty". |
| ТВ | Предназначен для телевизионных устройств (низкое разрешение, цветные экраны, экран с ограниченной прокруткой, звук доступен). |
CSS Media группы
Поскольку набор операторов для стиля может применяться к нескольким типам мультимедиа, вместо упоминания отдельных типов мультимедиа используется группа мультимедиа, которая обозначает коллекцию типов мультимедиа. Вот диаграмма, показывающая различные типы медиа по отношению к медиа группам, к которым они принадлежат.
| Типы СМИ | Медиа Группы | |||
|---|---|---|---|---|
| непрерывная / выгружаемого | визуальный / аудио / речи / тактильный | Сетка / битовая карта | интерактивный / статический | |
| шрифт Брайля | непрерывный | осязательный | сетка | и то и другое |
| тисненая | выгружаемый | осязательный | сетка | статический |
| портативный | и то и другое | визуальный, аудио, речевой | и то и другое | и то и другое |
| Распечатать | выгружаемый | визуальный | битовая карта | статический |
| проекция | выгружаемый | визуальный | битовая карта | интерактивный |
| экран | непрерывный | визуальный, аудио | битовая карта | и то и другое |
| речь | непрерывный | речь | N / A | и то и другое |
| TTY | непрерывный | визуальный | сетка | и то и другое |
| ТВ | и то и другое | визуальный, аудио | битовая карта | и то и другое |
Предыдущая: Семейства шрифтов CSS
Далее: CSS (передний план) цвет
Новый контент: Composer: менеджер зависимостей для PHP , R программирования