Wiki-учебник по веб-технологиям: CSS/РазделениеПоВидамНосителей ...

Главная | |

Задание разных CSS для отдельных видов носителей


Оглавление документа


Вы можете задать различные стили для печати и экранного просмотра.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />


Вы также можете поместить стили в один файл с помощью сбора информации с помощью @ в блоки.

@media print { div.box {width:100px; } } @media screen { div.box {width:400px; } } 


Отдельные блоки для разных типов носителей также могут быть вынесены непосредственно в html-код, тогда это выглядит так:

<style type="text/css"> @media print { div { overflow:visible; } }  </style>

Типы носителей и их описание


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

Тип Описание
all Все типы. Это значение используется по умолчанию.
auralРечевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheldНаладонные компьютеры и аналогичные им аппараты.
printПечатающие устройства вроде принтера.
projectionПроектор.
screenЭкран монитора.
tvТелевизор.

Импорт файла стилей


В CSS для указания типа носителей применяются команды @import и @media, с помощью которых можно определить определенный стиль для элементов в зависимости от того, выводится документ на экран или на принтер.

При импортировании стиля через команду @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=windows-1251">
  <title>Импорт стиля</title>
  <style type="text/css">
  @import &quot;/style/main.css&quot; screen; /* Стиль для вывода результата на монитор */
  @import &quot;/style/palm.css&quot; handheld, print; /* Стиль для печати */
   </style>
 </head> 
 <body>
  <p>...</p>
 </body>
</html>

В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и palm.css — при печати страницы и отображении на КПК.

Команда @media позволяет указать тип носителя для таблицы глобальных или связанных стилей и в общем случае имеет следующий синтаксис.

@media тип носителя 1 {
 Описание стиля для типа носителя 1
}
 
@media тип носителя 2 {
 Описание стиля для типа носителя 2
}

Стили для разных типов носителей


После ключевого слова @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=windows-1251">
  <title>Типы носителей</title>
  <style type="text/css">
   @media screen { /* Стиль для отображения в браузере */
    BODY {
     font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
     font-size: 90%; /* Размер шрифта */
     color: #000080; /* Цвет текста */
    }
    H1 {
     background: #faf0e6; /* Цвет текста */
     border: 2px dashed maroon; /* Рамка вокруг заголовка */
     color: #a0522d; /* Цвет текста */
     padding: 7px; /* Поля вокруг текста */
    }
    H2 {
     color: #556b2f; /* Цвет текста */
     margin: 0; /* Убираем отступы */
    }
    P {
     margin-top: 0.5em; /* Отступ сверху */
    }
   }
   @media print { /* Стиль для печати */
    BODY {
     font-family: Times, serif; /* Шрифт с засечками */
    }
    H1, H2, P {
     color: black; /* Черный цвет текста */
    }
   }
   </style>
 </head> 
 <body>
  <p>...</p>
 </body>
</html>


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

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

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <LINK> с параметром media, значением которого выступают все те же типы, перечисленные в таблице выше.

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

<!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=windows-1251">
  <title>Разные носители</title>
  <link media="print, handheld" rel="stylesheet" href="print.css" type="text/css">
  <link media="screen" rel="stylesheet" href="main.css" type="text/css"> 
 </head>
 <body>
  <p>...</p>
 </body>
</html>

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