CSS para imprimir páginas web
À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.
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.
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;
}
| 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 ). |