Опубликовано: 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" "https://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" "https://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" "https://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" "https://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

< Содержание >

Базовый синтаксис