Версия сайта для печати средствами CSS

Автор: content Пятница, Апрель 11th, 2008 Нет комментариев

Рубрика: Интернет

Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны и с монитора читать не приучены. Они больше доверяют бумаге — там и подпись поставить можно если что и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати.

Версия сайта для печати средствами CSS — один стиль для браузера:

Версия сайта для печати средствами CSS - один стиль для браузера

Код страницы:

Предположим, есть сайт, основной текст которого помещен в блок <div id=»text»></div>, а небольшое меню в блок navigation. Обратите внимание, для страницы указано два независимых стиля: <style media=»screen»> для браузеров и <style media=»print»> для печатающих устройств. Экранный стиль — черный текст на светло-сером фоне и темно-серое меню навигации. В рамках данной заметки это не главное.

Стиль для печати описывает страницу по-своему. CSS-селектор означает, что мы выбираем все элементы страницы. Для них используется шрифт Times New Roman, белый фон и черный цвет шрифта — согласитесь, не в каждом офисе есть цветные лазерные принтеры. С помощью свойства display: none полностью удаляем с печатной версии блок навигации — на бумаге он бесполезен.

Версия сайта для печати средствами CSS — отдельный стиль страницы для принтера:

Версия сайта для печати средствами CSS - отдельный стиль страницы для принтера

В результате получается качественная версия страницы для печати. Благодаря CSS достичь такого результата чрезвычайно легко.

Автор: Земсков Юрий

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты