Я не буду рассматривать HTML-часть вопроса, потому что это очень, очень просто и очень специфично для вас.
Для стилей, специфичных для печати, в вашей HTML-разметке вы можете явно добавить таблицу стилей для печатных СМИ, например:
<link rel="stylesheet" type="text/css" media="print" href="my-printable-style.css"/>
Вы также можете сделать это напрямую в существующем документе CSS, используя директивы CSS, например:
//sample ripped from http://www.w3schools.com/CSS/css_mediatypes.asp
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
@media print
{
p.test {font-family:times,serif;font-size:10px}
}
но это обычно рассматривается как более слабый инструмент, потому что это может привести к путанице и проблемам с обслуживанием, чтобы раздуть один документ, подобный этому, и он достигает того же, что и метод на основе элементов.
Чтобы справиться с некоторыми печатными проблемами CSS, прочитайте этот список, кроме статьи .