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.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 21/3/07
À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.
Comentários do artigo
