Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

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.