Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

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

Типы носителей в языке CSS

Типы
Назначение цвета в CSS
Описание типов носителей в языке CSS.

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

В этой статье мы рассмотрим способы создания CSS-файлов для различных устройств.

Тип Описание
all Все типы (устройства). Значение используемое по умолчанию.
braille Устройства основанные по системе Брайля.
embossed Устройства для печати символов Брайля.
handheld Наладонные компьютеры (имеют маленький экран, зачастую черно-белый).
print Принтеры, предварительный просмотр.
projection Проекторы.
screen Мониторы компьютеров.
speech Программы воспроизводящие текст в слух, речевые браузеры, речевые синтезаторы.
tty Устройства с фиксированным расстоянием между символами (терминалы, телетайпы).
tv Телевизоры.

Приведём пример для использования типа устройства print

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

Для того, чтобы указать как должна выглядеть страница при отправке её на принтер, нужно в шапку HTML-документа добавить тег <link> с атрибутом media=" " и значением print

<link rel="stylesheet" media="print" href="print.css">

Где атрибут rel="stylesheet" указывает на то, что будет загружаться CSS-файл, а атрибут href="print.css" указывает на имя и адрес CSS-файла.

Помимо тега <link>, атрибут media=" " можно также вставить и в тег <style> или CSS-документ:

@media print {
 CSS-код...
}

Если в HTML-документе один из CSS-типов установлен как print, то его можно посмотреть нажав на кнопки меню браузера:
Файл — Предварительный просмотр

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget