Шаг 4: Создание таблицы стилей для печати

Простая таблица стилей для печати контролирует процесс печати вашей стра­ницы. Такую таблицу стилей вы можете использовать для того, чтобы скрыть навигацию и другие элементы страницы, на которые напрасно расходуется бумага. Также вы можете выбрать шрифты, наиболее подходящие для печати. Листинг 7.13 показывает таблицу стилей, которая делает сайт «Ботинки не любовь» таким, как вы видите на рис. 7.11.

Листинг 7.13.  Новая таблица стилей сайта «Ботинки не любовь»

для печати

body    {

color:  #000;

background-color:   #fff;

font-family:   verdana,   geneva,    arial,    sans-serif;

margin-left:    70px;

marigin-right:  70px;} div,     p,   th,   td,   li,   dd,   dl,   dt   {

color   :    #ffffff;

font:   llpt verdana,   geneva,   arial,   sans-serif;}

 

Рис. 7.11. Если вы хотите проверить, как ваша страница будет выглядеть в напечатанном виде, вы быстро можете создать таблицу стилей специально для печати

 h2 ,   h3 ,   h4 ,   h5#   h6    {

font-family:   Georgia,   Times  New  Roman,   Times,   serif; margin-bottom:   lpx;  }  {

2 0pt;} 18pt;}

font-size:         2 4pt ; text-transform :   uppercase; text-align:    justify;}

font-size: font-size:

h4    {

font-size:         14pt;} h5  .        {

font-size:         12pt;}
h6    {

font-size:         llpt;} a  {  ‘

color:    #99cccc; text-decoration:   underline; font-weight:   bold;} a:hover   {

text-decoration:    none;} a:active   { color:    #99ffff;} img   {

border:    dotted   lpx   #cccccc;} .first   {

margin-top:    0;

padding-top:    0;

text-transform:    uppercase;} #menu    ul ,    #menu  li   {

display:   none;} #sidebar   {

width:    2 4 5px;

text-align:    justify;

padding:   2 0px,   Opx,   2Opx,   2Opx;

float:   right;}

Листинг 7.13 показывает таблицу стилей, которая отформатирует документ для печати. Она основана на таблице стилей, переделанной для безумной кли­ентки, но сюда были внесены некоторые изменения, для того чтобы страница хорошо выглядела на бумаге:

  •  размеры шрифтов текста тела уже не выражены в пикселях и ems (отно­сительных единицах), которыми лучше всего выражать размер шрифта в Сети; они выражены в пунктах. Пункты используются в печати;
  • все, что было в рамках идентификатора menu, скрыто. Правило display: none выполняет это. Лучше не тратить бумагу на распечатывание панели навигации;
  • убраны все фоновые цвета; остается только белый фон для тела. Пользо­вателю не придется по душе, если по вашей вине ему придется тратить краску на печать фоновых цветов, которые при этом передадутся неправильно. (К тому же некоторые браузеры вообще не печатают фоно­вые цвета.)

Когда пользователь напечатает сайт, он увидит страницу, отформатирован­ную, как документ на рис. 7.11.

Posted in Экономичный Web-дизайн.