Passo 6 – Criar um CSS para Impressão

Geralmente é conveniente ter uma folha de estilo diferenciada para impressão. Pode–se, por exemplo, colocar todos os itens pretos e a cor de plano de fundo branca. Para isso, é necessário criar outro arquivo CSS e ligá-lo ao XHTML com a seguinte linha:

Observe que o atributo media é diferente do tipo definido para CSS que estiliza a apresentação no browser.

Para criar esse CSS, você pode fazer uma cópia do arquivo CSS já existente e modificar neste novo arquivo a aparência dos elementos já descritos. Antes disso, você deve analisar a página e identificar o que deve e o que não deve ser impresso.

Vamos ao nosso exemplo!

Com base no exemplo da Figura 4, foi definido o arquivo CSS a seguir. Os seguintes elementos foram modificados:

• Os elementos que não devem aparecer, inclusive containers, devem ser estilizados com a propriedade display: none;.
• Todos os textos foram alterados para a cor preta.
• Todos os planos de fundo foram alterados para a cor branca.
• Os links foram alterados com a declaração text-decoration: none;.
• Foram retiradas todas as declarações para tamanho de fonte, de forma que os tamanhos serão definidos pelo browser.
• As margens para a página foram definidas usando-se algo como: body{margin: 2em; }.

See the Pen Autoria Web - Aula 08 - Figura 07 by Materiais (@materiais) on CodePen.

Por outro lado, caso deseje manter o mesmo layout para exibição na tela e impressão, é necessário simplesmente modificar o atributo media do elemento link para media=“screen, print” ou media=”all”.