Учебники

CSS — медиа типы

Сентябрь 21, 2018

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

В настоящее время у нас есть два способа указать медиа зависимости для таблиц стилей —

  • Укажите целевой носитель из таблицы стилей с правилами @media или @import.

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

Укажите целевой носитель из таблицы стилей с правилами @media или @import.

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

Правило @media

Правило @media определяет целевые типы мультимедиа (разделенные запятыми) набора правил.

Ниже приведен пример — 

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

Язык документа

В HTML 4.0 атрибут media в элементе LINK указывает целевой носитель внешней таблицы стилей —

Ниже приведен пример — 

<style tyle = "text/css">
   <!--
      <!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>the body...
         </body>
      </html>
   -->
</style>

Распознанные медиа типы

Имена, выбранные для типов мультимедиа CSS, отражают целевые устройства, для которых соответствующие свойства имеют смысл. Они дают представление о том, к какому устройству относится медиа-тип. Ниже приведен список различных типов медиа —

Sr.No. Значение и описание
1

все

Подходит для всех устройств.

2

ушной

Предназначен для речевых синтезаторов.

3

шрифт Брайля

Предназначен для устройств тактильной обратной связи Брайля.

4

тисненая

Предназначен для страничных принтеров Брайля.

5

портативный

Предназначен для портативных устройств (как правило, небольшой экран, монохромный, ограниченная пропускная способность).

6

Распечатать

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

7

проекция

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

8

экран

Предназначен в основном для цветных компьютерных экранов.

9

TTY

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

10

ТВ

Предназначен для телевизионных устройств.

все

Подходит для всех устройств.

ушной

Предназначен для речевых синтезаторов.

шрифт Брайля

Предназначен для устройств тактильной обратной связи Брайля.

тисненая

Предназначен для страничных принтеров Брайля.

портативный

Предназначен для портативных устройств (как правило, небольшой экран, монохромный, ограниченная пропускная способность).

Распечатать

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

проекция

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

экран

Предназначен в основном для цветных компьютерных экранов.

TTY

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

ТВ

Предназначен для телевизионных устройств.

ПРИМЕЧАНИЕ. — Имена типов носителей не чувствительны к регистру.

47
Share: