helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Como fazer uma folha de estilo CSS diferente para a visualização da página no navegador e outra para a impressão em uma impressora.
Por Miguel Angel Alvarez - Tradução de JML
Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.
Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.
Com CSS pode-se definir estilos em um documento externo, desta maneira:
<link href="estilos.css" rel="stylesheet" type="text/css">
Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.
Referência: As diferentes maneiras de incluir estilos em uma web estão comentadas em nosso Manual de CSS.
De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:
<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">
O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.
Por Miguel Angel Alvarez - Tradução de JML
Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.
Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.
Com CSS pode-se definir estilos em um documento externo, desta maneira:
<link href="estilos.css" rel="stylesheet" type="text/css">
Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.
Referência: As diferentes maneiras de incluir estilos em uma web estão comentadas em nosso Manual de CSS.
De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:
<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">
O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.