CSS para imprimir páginas web

Como fazer uma folha de estilo CSS diferente para a visualização da página no navegador e outra para a impressão em uma impressora.

Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.

Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.

Com CSS pode-se definir estilos em um documento externo, desta maneira:

<link href="estilos.css" rel="stylesheet" type="text/css">

Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.

Referência: As diferentes maneiras de incluir estilos em uma web estão comentadas em nosso Manual de CSS.

De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:

<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">

O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.

Exemplo de duas folhas CSS distintas para impressão e visualização

Agora vejamos um exemplo de página web que tem duas folhas de estilo diferentes, uma para quando se está no navegador e outra quando vai se imprimir.

O exemplo pode-se ver em funcionamento em uma página a parte.

Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas, que logo construiremos ou posicionaremos com CSS.

<html>
<head>
   <title>informe super quebra-cabeça</title>
   <link rel="STYLESHEET" type="text/css" href="estilo.css">
   <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
</head>

<body>

<div id="container">
    <div id="cabecalho">
      Super quebra-cabeça
    </div>
   <div id="logo">
       <img src="logo.gif">
   </div>
   <div id="corpo">
    <div id="lateral">
    <ul>
       <li><a href="#">Link 1</a>
       <li><a href="#">Vínculo 2</a>
    </ul>
    </div>
    <div id="direita">
       <div id="principal">
Conteúdo de um possível informe
       </div>
    </div>
   </div>
    <div id="rodape">
    © 2007 CriarWeb.com
    </div>
</div>

</body>
</html>

Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).

Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".

O código CSS de visualização no navegador

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#container{
text-align: left;
width: 770px;
margin: auto;
}
#cabecalho{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}

#logo{
visibility:hidden;
display: none;
}

#corpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}

#rodape{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}

#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}

#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;
}

O código CSS que se utilizará para a impressão da página

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
    background-color: #ffffff;
}
#container{
    text-align: left;
    width: 600px;
    margin: auto;
}
#cabecalho{
   visibility:hidden;
   display: none;
}

#logo{
   visibility:visible;
   display: block;
   margin-left: 20px;
}

#corpo{
    margin: 10 0 10 0px;
}
#lateral{
   visibility:hidden;
   display: none;
}

#rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
   clear: both;
}

#principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 600px;
    float: left;
}

#principal table{
   background-color: #ffffff;
    width: 600px;
   border: 2px solid #cccccc;
   font-size:10pt;
}

Novamente, colocamos o link para que se possa ver a página do exemplo de estilos de impressão CSS.

Nota: Se quisermos ver como se imprimiria a página, porém sem a necessidade de utilizar a impressora (para não gastar papel nem tinta ou se não tivermos impressora), podemos acessar ao menu Arquivo - Visualizar impressão ).

Esperamos que este workshop de CSS para imprimir tenha sido útil. Queremos lhes dar um link a outro workshop no qual se explica como evitar, com CSS, que uma página se imprima.