Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны и с монитора читать не приучены. Они больше доверяют бумаге — там и подпись поставить можно если что и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати.
Код страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Смысл жизни решительно творит объект деятельности</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body {
background-color: #f0f0f0;
font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif;
}
#text { width: 65%; }
#navigation {
float: right;
width: 30%;
background-color: #ccc;
padding: 1%;
margin-left: 1%;
}
</style>
<style type="text/css" media="print">
* {
font-family: "Times New Roman", Times, serif;
background-color: #fff;
color: #000;
}
#navigation { display: none; }
</style>
</head>
<body>
<div id="navigation"><a href="/index.html">Главная</a><br />
<a href="/news.html">Новости</a><br />
<a href="/products.html">Товары</a><br />
<a href="/about.html">О компании</a></div>
<div id="text">
<p>Смысл жизни решительно творит объект деятельности…</p>
<p>Представление нетривиально…</p>
<p><a href="/page2.html">Далее ></a></p>
</div>
</body>
</html>
Есть сайт, основной текст которого помещен в блок <div id="text"></div>, а небольшое меню в блок navigation. Обратите внимание, для страницы указано два независимых стиля: <style media="screen"> для браузеров и <style media="print"> для печатающих устройств. Экранный стиль — черный текст на светло-сером фоне и темно-серое меню навигации. В рамках данной заметки это не главное.
Стиль для печати описывает страницу по-своему. CSS-селектор * означает, что мы выбираем все элементы страницы. Для них используется шрифт Times New Roman, белый фон и черный цвет шрифта — согласитесь, не в каждом офисе есть цветные лазерные принтеры. С помощью свойства display: none полностью удаляем с печатной версии блок навигации — на бумаге он бесполезен.
В результате получается качественная версия страницы для печати. Благодаря CSS достичь такого результата чрезвычайно легко.
| 
