CSS Типы носителей

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

Вот список наиболее часто применяемых в CSS типов носителей:

  • Screen — монитор компьютера.
  • Print — вывод для печати.
  • Handheld — наладонные устройства.
  • TV — вывод на экран телевизора.
  • All — все типы устройств, используется по умолчанию.
  • Braille — устройства для слепых, на основе системы Брайля.
  • Aural — программы, устройства и браузеры для речевого воспроизведения текста.

В CSS для определения типа носителя используют команды @media и @import.

При задании стилей через @import тип носителя пишется после указания адреса файла:

<html>
<head>
<title>Задание стиля через @import</title>
<style type="text/css">
@import "/style/base.css" tv;
@import "/style/little.css" handheld, print;
</style>
</head>
<body>
...
</body>
</html>

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

А вот команда @media используется не только для подключения внешних таблиц стилей, но пригодна и для использования в стилях глобальных. Но сначала посмотрим как с помощью @media привязать к веб-странице внешние файлы стилей. Это делается с помощью теге LINK:

<html>
<head>
<title>Задание стиля через @import</title>
<style type="text/css">
@import "/style/base.css" tv;
@import "/style/little.css" handheld, print;
</style>
</head>
<body>
...
</body>
</html>

Типы носителей использован тот же что и в примере с выводом CSS при помощи @import.

Теперь о глобальных стилях:

<html>
<head>
<title>Задание стиля через @import</title>
<style type="text/css">
@import "/style/base.css" tv;
@import "/style/little.css" handheld, print;
</style>
</head>
<body>
...
</body>
</html>

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

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

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha