Atmedia CSS (Atmedia)

Типы носителей CSS позволяют форматировать документ так, чтобы он корректно отображался на различных типах носителей (например, экран, печать, аудиобраузеры и т.д.).

Введение в типы носителей

CSS @media (медиа) - одна из最重要的 функций таблиц стилей, и вы можете определить отдельные таблицы стилей для различных типов носителей. Это один из лучших способов создания веб-страниц, удобных для печати - просто назначьте разные таблицы стилей для типа носителя "печать".

Некоторые свойства CSS применимы только к определенным носителям. Например, этоpage-break-afterАтрибут применим только к многостраничным носителям. Однако, несколько атрибутов могут быть共享имы между различными типами носителей, но может потребоваться использование различных значений для этого атрибута.font-sizeНапример, этот атрибут можно использовать для экрана и печатных носителей, но он может иметь разные значения.

В сравнении с лучшей читаемостью, документ обычно требует больших шрифтов на экране компьютера, и безшрифтовые шрифты считаются более удобочитаемыми на экране, в то время как шрифты с засечками популярны для печати. Поэтому необходимо указать, какие стили таблицы или набор правил стилей применяются к определённым типам медиа.

Создание таблицы стилей, зависимой от медиа

Обычно используются три метода для указания зависимости таблицы стилей от медиа:

Метод 1: Использование правила @media

Правило @media используется для определения различных правил стиля для различных типов медиа в одной таблице стилей. Обычно за ним следует список типов медиа, разделённый запятыми, и блок CSS-утверждений, содержащий правила стиля для целевых медиа.

В примере стиля, приведённом ниже, указано, что браузеру нужно отображать текст正文 на экране с использованием шрифта Arial 14 пт, но при печати — с использованием Times 12 точек. Однакоline-heightУказанные значения обоих свойств установлены в 1.2:

@media screen {
　　　　body {
　　　　　　　　color: #32cd32;
　　　　　　　　font-family: Arial, sans-serif;
　　　　　　　　font-size: 14px;
　　　　}
}
@media print {
　　　　body {
　　　　　　　　color: #ff6347;
　　　　　　　　font-family: Times, serif;
　　　　　　　　font-size: 12pt;
　　　　}
}
@media screen, print {
　　　　body {
　　　　　　　　line-height: 1.2;
　　　　}
}

Метод 2: Использование правила @import

Правило @import — это другой способ установки стилей для специфичных целевых медиа, просто указав разделённый запятыми список типов медиа после URL импортируемой таблицы стилей.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
　　　　background: #f5f5f5;
　　　　line-height: 1.2;
}

Указание media типа print в выражении @import указывает браузеру загрузить внешнюю таблицу стилей (print.css) и применить её стили только для печатных медиа.

Метод 3: Использование <link> элемент

Элементы, установленные на свойстве media, используются для указания целевого介质 в внешних таблицах стилей документа HTML.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

在此示例中，该media属性指示浏览器加载外部样式表“screen.css”，并且仅将其样式用于屏幕，而将“print.css”用于打印。

不同的媒体类型

下表列出了可用于定位不同类型的设备（例如打印机，手持设备，计算机屏幕等）的各种媒体类型。

媒体类型