3# CSS. Типы носителей
css
638
12-02-2016
0
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определённого устройства.


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

таблица №1

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


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

Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.

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

пример №1

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/smart.css" print, handheld; /* Стиль для печати и смартфона */
  </style>
 </head> 
 <body>
  <p>...</p>
 </body>
</html>


В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и smart.css — при печати страницы и отображении на смартфоне.
Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте стилевого файла.


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


После ключевого слова @media идёт один или несколько типов носителя, перечисленных в №1 если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идёт обычное описание стилевых правил. В примере №2 показано, как задать разный стиль для печати и отображения на мониторе.

пример №2

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Типы носителей</title>
  <style>
   @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, 'Times New Roman', serif; /* Шрифт с засечками */
    }
    H1, H2, P {
     color: black; /* Чёрный цвет текста */
    }
   }
  </style>
 </head> 
 <body>  
  <h1>Как поймать льва в пустыне</h1>
  <h2>Метод случайных чисел</h2>
  <p>Разделим пустыню на ряд элементарных прямоугольников, размер 
     которых совпадает с размером клетки для льва. После чего 
     перебираем полученные прямоугольники, каждый раз выбирая заданную 
     область случайным образом. Если в данной области окажется лев,
     то мы поймаем его, накрыв клеткой.</p>
 </body>
</html>


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

Рис. №1. Страница для отображения в окне браузера

№2

Рис. №2. Страница, предназначенная для печати


Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу или воспользовавшись предварительным просмотром в браузере (Файл > Предварительный просмотр). Или пойти на хитрость и временно заменить print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 4.2.

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

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

пример №3
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Разные носители</title>
  <link media="print, handheld" rel="stylesheet" href="print.css">
  <link media="screen" rel="stylesheet" href="main.css"> 
 </head>
 <body>
  <p>...</p>
 </body>
</html>


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

Аналогично можно использовать и глобальные стили, добавляя атрибут media к тегу
< style >
</style>
(пример №4).

пример №4
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Разные носители</title>
  <style media="handheld">
   BODY {
    width: 320px; /* Ширина страницы */
   } 
  </style>
 </head>
 <body>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat. </p>
 </body>
</html>


В данном примере ширина для устройств типа handheld ограничена размером 320 пикселов.svadebnet.ruknig5.ru
0

Наверх

{SAPELINKS}