Ir para conteúdo / Skip to content

Criando CSS para impressão

Postado em: 27 de agosto de 2007 por Pedro Rogério

Imprimir 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) ") ";

Se tiver um tempo, leiam também:

Deixe seu comentário

8 comentários para esse post

  1. Função disse: 27.08.07 ás 08:30
    #1

    Muito legal essa dica, obrigado!

  2. Guilherme Cavalcanti disse: 27.08.07 ás 09:39
    #2

    Humm, não conhecia esse da URL.
    Mas o pseudo-elemento after funciona no IE6?

  3. Pedro Rogério disse: 27.08.07 ás 11:11
    #3

    @ Guilherme,

    O nosso querido amigo IE6 não suporta esses elementos, até falei sobre isso aqui nesse post: OS PSEUDO-ELEMENTOS :AFTER E :BEFORE

  4. Juliano disse: 03.09.07 ás 18:24
    #4

    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!

  5. Vinícius Rocha disse: 03.09.07 ás 21:42
    #5

    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!

  6. Bispo disse: 20.08.08 ás 11:19
    #6

    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?

  7. Silvia disse: 05.09.08 ás 14:21
    #7

    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??

  8. Pedro Rogério disse: 05.09.08 ás 16:09
    #8

    @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.

Deixe seu comentário