Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

Коротка інформація

CSS | CSS2, CSS2.1, CSS3
Значення за умовчанням | все
Посилання на специфікацію | http://www.w3.org/TR/CSS21/cascade.html#at-import

### Опис

Правило @media дозволяє вказати тип носія, для якого застосовуватиметься вказаний стиль. Типами виступають різні пристрої, наприклад, принтер, КПК, монітор та ін. В таблиці. 1 перераховані деякі з них.

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

### Синтаксис

@media тип1 [, тип2] {

Опис стилю

}

### Значення

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

Приклад 1

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>@media</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 #800000; /* Рамка навколо заголовка */

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: #000; /* Чорний колір тексту */

}

}

</style>

</head>

<body>

<h1>Метод лову лева в пустелі</h1>

<h2>Метод послідовного перебору</h2>

<p>Нехай лев має габаритні розміри LxWxH, де L - довжина лева від кінчика носа

до пензлика хвоста, W - ширина лева, а H - його висота. Після чого пустелю розбиваємо на

ряд елементарних прямокутників, розмір яких співпадає з шириною і завдовжки лева.

Враховуючи, що лев може знаходитися не строго на заданій ділянці, а одночасно на

двох з них, клітину для лову слід робити підвищеній площі, а саме 2Lx2W.

Завдяки цьому ми уникнемо помилки, коли в клітині виявиться спійманим лише половина

лева або, що гірше, тільки його хвіст.</p>

<p>Далі послідовно накриваємо кожного з розмічених прямокутників пустелі

клітиною і перевіряємо, спійманий лев або ні. Як тільки лев опиниться в клітині, процедура

упіймання вважається завершеною.</p>

</body>

</html>

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

Мал. 1. Сторінка для відображення у вікні браузеру

Мал. 2. Сторінка, призначена для друку

Проглянути документ, у якого CSS встановлений як тип print можна, якщо роздрукувати певну сторінку. Чи піти на хитрість і тимчасово замінити слово print на screen, щоб відобразити підсумок у браузері. Саме так був отриманий мал. 2.

Команда @media застосовується в основному для формування одного стильового файлу, який розбитий на блоки за типом пристроїв. Іноді ж має сенс створити декілька різних CSS -файлов - один для друку, інший для відображення у браузері - і підключати їх до документу в міру необхідності. У подібному випадку слід скористатися тегом <LINK> з параметром media, значенням якого виступають ті ж типи, перераховані в таблиці. 1.

Приклад 2

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>@media</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>

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