Introdução
Um recurso útil do CSS é o “Media Print“, pois permite você controlar, à parte, o estilo daquilo que será impresso.
Por exemplo, você pode ter um CSS que define o estilo padrão da sua página Web e pode ter um outro CSS para diferenciar o estilo de certos elementos, como DIV, quando estes forem impressos. Isto é interessante usar quando você precisar ocultar alguns botões ou mesmo trocar a cor de fundo ao imprimir um documento. Outra ideia é fazer com que apareça um logotipo ou marca d’água na hora de imprimir. Enfim, são inúmeras as possibilidades, vai da sua criatividade ou necessidade.
CSS – Externo
O mais comum é você definir seu código CSS em um arquivo externo print.css, com estilo diferenciado para impressão.
print.css | A chamada a este arquivo será feita dentro de site.html
#noprint { display:none; } body { background: #fff; } |
E então fazer a chamada do arquivo print.css em suas páginas Web.
site.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Site</title> <link rel="stylesheet" href="print.css" type="text/css" media="print"> </head> <body bgcolor="#ff0000"> A cor de fundo padrão desta página é vermelha, porém, ao imprimir, passará a ser branca. <div id="noprint"> Tudo que estiver entre esta DIV "noprint" será visível na tela, porém, invisível ao imprimir. </div> </body> </html> |
CSS – Interno
Uma segunda alternativa é diferenciar o estilo da impressão usando o código CSS dentro da própria página Web. Neste caso, ficaria assim:
site.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>Site</title> <style> @media print { #noprint { display:none; } body { background: #fff; } } </style> </head> <body bgcolor="#ff0000"> A cor de fundo padrão desta página é vermelha, porém, ao imprimir, passará a ser branca. <div id="noprint"> Tudo que estiver entre esta DIV "noprint" será visível na tela, porém, invisível ao imprimir. </div> </body> </html> |
Muito boa sugestao, foi útil.
Muito bom.
Obrigado
VALEU, RESOLVEU MEU PROBLEMA, OBRIGADO
Funcionou muito bem. Valeu.
Muito bom. Obrigado
100% parabéns, agora só não consegui ocultar o endereço do link, coloquei la a div mas nao foi não
Boa tarde. E se eu quiser ocultar o link da impressão, como faço?