В большинстве случаев верстальщики веб-сайтов не задумываются как ихние веб-странички будут выглядеть в распечатанном виде на бумаге.
А вот HTML предоставляет механизм, позволяющий задавать css-стили, которые будут индивидуальны для принтера.
Красивее всего реализовать это можно следующим образом:
1. Создать файл, в котором будут размещены стили для принтера (к примеру «printer_styles.css»).
2. Подключить этот файл в исходном коде страницы, указав что эти стили предназначены для принтера.
<link
href="printer_styles.css"
media="print"
type="text/css"
rel="stylesheet"
/>
Обратите внимание, что подключать этот файл желательно ниже основных стилей, потому что вы сможете переопределять их.
У данного подхода есть небольшой недостаток, а именно то, что для того чтобы получить стили для принтера, веб-браузеру приходится делать дополнительный запрос чтобы скачать соответствующий файл. CSS позволяет определять стили в одном файле для разных устройств вывода. Поэтому в целях оптимизации можно указать все стили в одном общем файле (к примеру «style.css»).
/*Общие стили*/
#hat, #foot {width:100%; ..... }
.....
/*Стили для принтера*/
@media print {
#hat, #foot {display:none;}
p {font-size:20px;}
....
}
Какой же подход лучше? Вы должны понимать, что тут нужно искать «золотую середину». К примеру нам нужно подогнать всего лишь одну страничку для печати. В этом случае нет смысла тянуть стили для принтера по всему сайту и лучше подключить эти стили только на этой одной страничке. Возможно даже прописать их непосредственно в исходный код страницы, используя тэг <style />.
А если стили общие для всего сайта, то лучше было бы сэкономить на количестве запросов к серверу, и поместить их в один файл.