Faça o curso: jQuery na Prática

Nesse artigo irei abordar um assunto muito interessante. Para determinar, por meio de CSS, como será impresso seu documento, podemos criar um estilo CSS para visualização (tela.css) e outro para impressão (imprimir.css). Vamos lá!

Muitas vezes uma página não deve ser impressa do mesma maneira que é exibida na tela do monitor. Existem diversos pontos que precisam ser editados como o tipo de fonte, cores de fundo, links etc.. Uma solução usada pelos desenvolvedores é a criação de uma página independente, com o mesmo conteúdo porém com um formato mais adaptado para ser usado nas impressoras. Outra é você criar outra Folha de Estilo com a maneira que você quer que seu documento seja impresso.

Quando você vai relacionar a seu documento uma folha de estilo, usa o seguinte código:

Para determinar um estilo para impressão de sua página, isto é, um estilo que seja aplicado apenas quando o usuário optar por imprimir o conteúdo da tela, você deverá utilizar um parâmetro chamado media, na tag link. Ele deve ser especificado como print. Veja como ficaria o HTML que faz referência a um arquivo chamado imprimir.css:

Vamos agora analisar nossas CSS, tela.css e imprimir.css aplicadas no nosso exemplo.

tela.css

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000CC;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FF0000;
}
h5 {
color: #FFCC33;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #FF9900;
}
a:visited {
color: #FF9A00;
}
a:hover {
color: #FF9A00;
}
a:active {
color: #FF9A00;
}

Determinei que os parágrafos sejam com tamanho de fonte 12, tipo de fonte Verdana, cor de fonte - #0000CC. Determinei também que os cabeçalhos

sejam com a fonte Verdana e cor #FF0000 e por fim que os cabeçalhos

tenham fonte Verdana e cor #FFCC33. Em relação aos links , todos os estágios na cor #FF9A00. Como visto em nosso exemplo.

imprimir.css

p {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link, a:visited {
color: #000000;
font-weight: bold;
text-decoration: underline;
}
body {
background-color: #FFFFFF;
}

Nessa CSS determinei que os parágrafos, cabeçalhos

e

, todos tenham a fonte Arial, tamanho 12 e na cor #000000. O fundo da página será #FFFFFF (branco). Já os links são escritos em negrito, cor de fonte #000000 e sublinhados. Essa configuração só atuará no caso de seu arquivo ser impresso.