» » Типи носіїв в CSS

Типи носіїв в CSS
Типи носіїв в CSS
Широкий розвиток різних платформ і пристроїв змушує розробників робити під них спеціальні версії сайтів, що досить трудомістко і проблематично. Разом з тим, часи і потреби змінюються, і створення сайту для різних пристроїв є неминучим і є необхідною ланкою його розвитку. З урахуванням цього в CSS введено поняття типу носія, коли стиль застосовується тільки для певного пристрою. У табл. 3.1 перераховані деякі типи носіїв.





































 Тип  Опис
 all Всі типи. Це значення використовується за замовчуванням 
 aural Мовні синтезатори, а також програми для відтворення тексту вголос. Сюди можна віднести мовні браузери 
 braille Пристрої, засновані на системі Брайля, які призначення для сліпих людей 
 handheld Портативні комп'ютери і аналогічні їм апарати 
 print Друкуючі пристрої на кшталт принтера
 projection Проектор 
 screen Екран монітора 
 tv  ТБ 


У CSS для вказівки типу носіїв застосовуються команди @import і @media, за допомогою яких можна визначити певний стиль для елементів залежно від того, виводиться документ на екран або на принтер.
Зауваження
Ключові слова @media і @import відносяться до ет-правил. Така назва походить від найменування символу @ - «ет», з якого і починаються ці ключові слова. В укрнеті для позначення символу @ використовується усталений термін «равлик» =). Тільки от використовувати вираз «равлине правило» язик не повертається.


При імпортуванні стилю через команду @import тип носія вказується після адреси файлу. При цьому допускається задавати відразу декілька типів, згадуючи їх через кому, як показано в прикладі 3.1.
Приклад 3.1. Імпорт стильового файлу

<!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 "/style/main.css" screen; /* Стиль для виводу результату на монітор */
@import "/style/palm.css" handheld, print; /* Стиль для друку */
 </style>
 </head>
 <body>
 <p>...</p>
</body>
</html>

У даному прикладі імпортується два файли - main.css призначений для зміни виду документа при його перегляді на екрані монітора, і palm.css - при друку сторінки і відображенні на КПК. Команда @media дозволяє вказати тип носія для таблиці глобальних або пов'язаних стилів і в загальному випадку має такий синтаксис.
@media тип_носію_1 {
 Опис стилю для типа носія 1
 }
 @media тип_носія_2 {
 Опис стилю для типу носія 2
 }

Після ключового слова @media йде один або кілька типів носія, перерахованих в табл. 3.1, якщо їх більше одного, то вони розділяються між собою комою. Після чого йдуть обов'язкові фігурні дужки, всередині яких йде зазвичай опис стильових правил. У прикладі 3.2 показано, як задати різний стиль для друку та відображення на моніторі.
Приклад 3.2. Стилі для різних типів носіїв

<!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 можна, якщо роздрукувати певну сторінку. Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки по типу пристроїв. Іноді ж має сенс створити кілька різних CSS-файлів - один для друку, інший для відображення в браузері - і підключати їх до даного документу в міру необхідності. У подібному випадку слід скористатися тегом
<LINK>
з параметром media, значенням якого виступають усі ті ж типи , перераховані в табл. 3.1. У прикладі 3.3 показано, як створювати посилання на CSS-файли, які призначені для різних типів носіїв.
Приклад 3.3. Підключення стилів для різних носіїв

<!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>

У даному прикладі використовуються дві таблиці пов'язаних стилів, одна для відображення в браузері, а друга - для друку документа і його перегляді на КПК. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.


974 07.10.13



Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера