Понеділок, 25.11.2024, 10:31
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 5
Гостей: 5
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Типи носіїв в CSS
15:18
Типи носіїв в CSS
Широкий розвиток різних платформ і пристроїв змушує розробників робити під них спеціальні версії сайтів, що досить трудомістко і проблематично. Разом з тим, часи і потреби змінюються, і створення сайту для різних пристроїв є неминучим і є необхідною ланкою його розвитку. З урахуванням цього в CSS введено поняття типу носія, коли стиль застосовується тільки для певного пристрою. У табл. 3.1 перераховані деякі типи носіїв.
Табл. 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>
У даному прикладі використовуються дві таблиці пов'язаних стилів, одна для відображення в браузері, а друга - для друку документа і його перегляді на КПК. Хоча на сторінку завантажуються одночасно два різні стилі, застосовуються вони тільки для певних пристроїв.
Категорія: КСМ | Переглядів: 900 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: