Criando CSS para impressão
Postado por: Pedro Rogério emImprimir uma página web muitas vezes pode ser uma dor de cabeça, com certeza todos nós já passamos por algum problema quando fomos imprimir uma página com muitos gráficos e cores, onde nada sai do jeito que você queria. Mas isso pode ser contornado facilmente com CSS, quando, por exemplo, você criar a sua folha de estilos com media=”screen” (aquele css usado para exibição nos monitores), basta você duplicá-lo, renomeá-lo, e alterar seu atributo media para print. Com isso teriamos 2 folhas de estilo distintas:
<link rel="stylesheet" type="text/css" href="normal.css" media="screen" />
<link rel="stylesheet" type="text/css" href="impressao.css" media="print" />
Agora, para personalizar a impressão, basta você definir o que vocÊ quer que apareça e o que não apareça quando o usuário for imprimir, por exemplo, aqui no blog eu poderia definir um display:none para o menu, sidebar, rodapé e personalizar as fontes e cores do post, para que seja impresso na página realmente o que interessa.
Caso você queira que as urls apareçam impressas na página, basta utilizar o seguinte código CSS em suas folhas de impressão:
a[href^="/"]:after {
content: " (http://www.seusite.com.br" attr(href) ") ";
Random Posts
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito legal essa dica, obrigado!
Humm, não conhecia esse da URL.
Mas o pseudo-elemento after funciona no IE6?
@ Guilherme,
O nosso querido amigo IE6 não suporta esses elementos, até falei sobre isso aqui nesse post: OS PSEUDO-ELEMENTOS :AFTER E :BEFORE
Qual a diferença de se colocar o media=”print” para o css que será impresso, uma vez que o nome do css é outro e as propriedades dos elementos também. Se não colocasse o media=”print” faria alguma diferença??
Grato!
Juliano
Faria diferença sim. Os elementos do css de impressão não são tão diferentes assim, sendo que você poderia aplicar o css de impressão na tela. Ou seja, o media=”print” é necessário – se você quiser que sua impressão saia conforme especificado no css.
Espero ter ajudado!
Prezado amigo,
Eu precisaria imprimir uma página HTML mas…
Sem aparecer aquela tela de setup de impressao.
Eu pré-definir o número de cópias para imprimir
(Detalhe que eu tentei utilizar ScriptX com o “factoty.printing.” mas nao funciona)
O sr. poderia me ajudar?
Eu entendi o tutorial, é uma mão na massa para quem tá começando a aprender CSS, como é o meu caso, mas fiquei com uma dúvida.
como eu faço para que apareça um preview da versão de impressão no próprio navegador (sem ter que clicar na opção de visualizar impressão).
Eu gostaria de poder colocar um link no final da página para que o leitor saiba que existe uma versão otimizada para impressão e quando ele clicar no link, apareça o preview.
Eu já procurei na web em vários sites e não encontrei essa informação em canto algum.
Vc poderia me ajudar??
@Silvia,
Acho que a única forma de fazer isso é você colocando uma screenshot de como ficaria a impressão, infelizmente eu também não conheço uma outra forma de fazer isso. Abraços.
Muito bom o tutorial mais no caso e para aparecer a versão para impressão como que faz?cria um novo arquivo tpw eu to criando um site pra escola ae to fazendo os horarios e queria disponibilizar para download ae então eu crio uma pagina chamada imprimir_9b.html
(suponhamos que seja esse o nome do arquivo) utilizando o CSS que usei com o media print ou quando a pessoa clicar para imprimir que aparecerá lá numero de copias e tals ele ja imprime com esse CSS que tem na media print?Grato se responder em algum email meu:
rafinhadebrito2@hotmail.com
rafinhadebrito@gmail.com
@Rafael,
Basta você criar um CSS com media print que a formatação será aplicada automaticamente a impressão.
Nossa muito bom seu artigo nem eu conhecia esse codigo parabens mesmo…