Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Типы устройств

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

В следующей таблице указаны ключевые слова обозначающие в CSS разные типы устройств и их описание.

Типы устройств и их обозначения
allТаблица стилей используется для всех устройств.
auralДля речевых синтезаторов.
brailleУстройства для слепых людей.
embossedСтраничные принтеры для слепых людей.
handheldДля устройств с небольшими экранами (мобильные телефоны, карманные компьютеры и т.д.).
printИспользуется при выводе документа на печать.
projectionДля проектора.
screenЭкран компьютерного монитора.
ttyУстройства, использующие символьную сетку экрана фиксированного шага, например телетайп.
tvДля экранов подобно телевизионным (низкое разрешение, ограниченная цветопередача, отсутствует прокрутка и т.д.).

Отдельные таблицы стилей могут быть удобны по многим причинам. Ну, например, зачем при выводе на принтер печатать меню сайта или какие-то рекламные блоки, их можно просто убрать. Также можно изменить шрифт, так как давно известно, что из-за особенностей зрения человека, текст написанный шрифтами без засечек (Arial, Verdana и т.д.) гораздо удобней читать с монитора компьютера, а вот с засечками (Times, Times New Roman и т.д.) наоборот, с бумаги.

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

Выбор устройств с помощью правила @import

Как вы знаете, правило @import позволяет встраивать файлы с CSS во внутренние или внешние таблицы стилей. При этом можно указать одно или несколько (через запятую) устройств к которым они будут применены, если же этого не сделать — стили применятся ко всем устройствам.

Пример выбора устройств в CSS через правило @import

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выбор йстройств через @import</title>
  <style type="text/css">
   @import "style/all.css" all; /* стили для всех устройств */
   @import "style/scr_hand.css" screen, handheld; /* стили для мониторов и телефонов */
   @import "style/print.css" print; /* стили для печати */
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>

Пример подключения во внешних таблицах стилей

@import "style/all.css" all; /* стили для всех устройств */
@import "style/scr_hand.css" screen, handheld; /* стили для мониторов и телефонов */
@import "style/print.css" print; /* стили для печати */

В этих примерах стили в файле all.css будут использоваться в любом случае, но если сайт будет просматриваться на мониторе или телефоне, то к ним добавятся стили из scr_hand.css, а при выводе на печать — из print.css.

Выбор устройств с помощью правила @media

В отличие от предыдущего способа, правило @media подключает не файлы со стилями, а непосредственно сами стили, которые берутся в скобки, {  }. Оно также может указываться во внутренних или внешних таблицах стилей.

Пример выбора устройств в CSS с помощью правила @media

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выбор устройств через @media</title>
  <style type="text/css">
   @media all {
    p {
     font-size: 110%; /* размер шрифта */
    }
   }
   @media screen, handheld {
    p {
     font-family: Arial, sans-serif; /* гарнитура шрифта */
     color: #660066; /* цвет текста */
     background: #ccffff; /* цвет фона */
    }
   }
   @media print {
    p {
     font-family: Times, serif; /* гарнитура шрифта */
     color: black; /* цвет текста */
     font-weight: bold; /* жирный шрифт */
    }
   }
  </style>
 </head>
 <body>
  <p>
   В данном примере имеется три стиля: первый — для всех устройств,
   второй — дополняет первый и используется для монитора компьютера
   или мобильного телефона, третий — дополняет первый и используется
   для вывода на печать.
  </p>
 </body>
</html>

Результат в обычном браузере

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

Результат при выводе на принтер (имитация)

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

Выбор устройств с помощью тегов <STYLE>

В теге <STYLE> также можно указывать типы устройств, для которых предназначены его внутренние стили. Делается это при помощи атрибута media.

Пример подключения стилей для разных устройств с помощью STYLE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег STYLE</title>
  <style type="text/css" media="screen">
    p {
     color: #660066; /* цвет текста */
     background: #ccffff; /* цвет фона */
    }
  </style>
  <style type="text/css" media="print">
    p {
     color: black; /* цвет текста */
     font-weight: bold; /* жирный шрифт */
    }
  </style>
 </head>
 <body>
  <p>
   В этом примере первый стиль предназначен для мониторов,
   а второй — для принтеров.
  </p>
 </body>
</html>

Результат на мониторе

В этом примере первый стиль предназначен для мониторов, а второй — для принтеров.

Результат при выводе на принтер (имитация)

В этом примере первый стиль предназначен для мониторов, а второй — для принтеров.

Выбор устройств с помощью тегов <LINK>

Ну и, наконец, стили для разных устройств можно подключать с помощью тегов <LINK> и все того же атрибута media.

Пример подключения стилей для разных устройств с помощью LINK

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег LINK</title>
  <link rel="stylesheet" type="text/css" href="style/all.css">
  <link rel="stylesheet" type="text/css" href="style/scr_hand.css" media="screen, handheld">
  <link rel="stylesheet" type="text/css" href="style/print.css" media="print">
 </head>
 <body>
  <p>Текст параграфа.</p>
 </body>
</html>

В общем, с указанием типов устройств все довольно просто, поэтому надеюсь, что здесь у вас каких-то проблем с пониманием не возникло.

Подключение CSSСодержание >Базовый синтаксис