Поговорим о том, как сделать так, чтобы выводить на экран одну веб-страницу, а при печати этой страницы на принтере результат был несколько иным. А делается это с помощью CSS. В CSS есть одна очень полезная функция @media — вы можете для одного и того же HTML-элемента указать разные способы его отображения при печати и при показе в браузере. Для лучшего понимания рассмотрим следующий пример.
Code
<html>
<head>
<style type="text/css">
@media screen {
p {
color: #000000; /* Черный цвет текста */
}
}
@media print {
p {
color: #ff0000; /* Красный цвет текста */
}
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>
Теперь при просмотре HTML-страницы в браузере вы увидите слово «Hello» чёрного цвета. Однако попробуйте распечатать эту страницу на цветном принтере, и слово «Hello» окрасится в красный цвет.
Извлекаем выгоду
Теперь немного изменим стиль.
Code
@media screen {
p {
display: block; /* Отображаем элемент */
}
}
@media print {
p {
display: none; /* Прячем содержимое */
}
}
Что будет, если мы снова откроем в браузере, а затем распечатаем HTML-файл? В браузере текст будет спокойно отображаться, а вот при печати пользователь получит чистый лист бумаги. Вот это и есть ещё один способ защиты информации. Однако подчас такая защита не нужна. Посмотрим реальный пример: необходимо сделать на сайте страницу, для удобной распечатки материалов без излишнего оформления. При этом где-то на веб-странице будет кнопка «Печать». Так вот, я думаю, что стоит убрать её из печатной версии. Что делаем в CSS.
Code
@media screen {
input {
display: block; /* Отображаем элемент */
}
}
@media print {
input {
display: none; /* Прячем элемент */
}
}
А ещё можно добавить текст о том, что «Статья скачана с сайта Site.Ru». Тут лучше сделать всё наоборот — в браузере её нет, а при печати — есть.
Code
<html>
<head>
<style type="text/css">
@media screen {
input {
display: block;
}
p.advert {
display: none;
}
}
@media print {
input {
display: none;
}
p.advert {
display: block;
}
}
</style>
</head>
<body>
<p class="advert">Страница скачана с сайта Site.Ru</p>
: здесь идёт текст, который должен быть распечатан :
<input type="button" value="Печать" onClick="javascript:print(document);">
</body>
</html>
Подчас, не обязательно использовать данную функцию CSS только для защиты информации. Порой необходимо некоторые данные при печати представить в несколько другом виде. Впрочем, как пользоваться — решайте сами.
Автор:Влад Мержевич
Источник: www.htmlbook.ru
Главная 
