Detalhes

Categoria: CSS - Cascanding Style Sheet

Atualização: Sábado, 27 Fevereiro 2010 16:19

Autor: vovó Vicki

Acessos: 12775

Muitos sites oferecem nas suas páginas a opção de transformá-las em páginas próprias para impressão, onde não há menus, propaganda, etc. Será que estes sites fazem duas páginas diferentes, uma para navegação web e outra para impressão? Sim e não :smile:

O truque está em gerar o mesmo conteúdo usando scripts CSS diferentes. Ao definir ou incluir um ou vários scripts, pode-se determinar o valor da propriedade media. Se houver um script com media: screen, o estilo é aplicado quando a saída for a tela do monitor; se houver um com media: print, o estilo é aplicado quando a saída for para a impressora.

Os valores da propriedade media são vários:

media="all"          para todos os tipos de mídia.
media="aural"        para voz sintetizada gerenciada por computador.
media="braille"      para aparelhos que produzem escrita Braille (para cegos).
media="embossed"     para impressoras Braille.
media="handheld"     para handhelds.
media="print"        para impressoras.
media="projection"   para projeção de dados (data show).
media="screen"       para a tela do monitor.
media="tty"          para mídia não gráfica (teletipo ou browser Lynx).
media="tv"           para dispositivos de saída semelhantes a TV.

Como inserir um script CSS

Há várias maneiras de se inserir um script CSS.

A tradicional é colocar o script na área head da página:

Outra forma clássica é criar um arquivo próprio para o script e incluí-lo na página:

Como mostrado acima, um método não exclui o outro. Além disto, mais de um script externo pode ser incluído, para o mesmo tipo de saída ou para saídas diferentes:

Apenas os navegadores mais recentes aceitam o método @import e, com exceção do Internet Explorer, aceitam associar @import com o tipo de mídia:

Há ainda o método @media que pode ser usado para definir propriedades de seletores para diversas saídas:

Existem algumas dicas para se criar um script CSS de impressão. Se você quiser que o estilo seja totalmente preservado, então use media: all ou media: screen, print. Por outro lado, se você quiser disponibilizar a chamada página print-friendly, dê uma olhada neste roteiro:

Antes de mais nada, crie um script completo para a apresentação na tela do monitor. Como exemplo, vou usar o script do tutorial Dê adeus às tabelas:

Coloque o script CSS num arquivo próprio e dê-lhe o nome, por exemplo, de tela.css. Faça uma cópia deste arquivo e dê-lhe o nome de imprime.css. Se o script estiver no código da página, retire-o. Faça a seguinte inclusão:

A partir deste ponto, vamos trabalhar no script imprime.css até obtermos o layout desejado para uma página de impressão. Inicialmente a saída ainda será para a tela para facilitar o trabalho de depuração. Seguem algumas sugestões do que e de como fazer algumas alterações:

• Esconder áreas desnecessárias usando display: none;
• Mudar todas as cores para preto ou escala de cinza
• Alterar os links para a { text decoration: none; }
• Remover tamanho de fonte deixando esta tarefa para o navegador
• Colocar margens na página, alguma coisa como body { margin: 2em; }

Como imprime.css ainda não foi alterado, a página de exemplo tem a seguinte aparência:

Se alterarmos o script imprime.css para body { margin: 2em; padding: 0; font: 100% arial, helvetica, sans-serif; color: #000; background-color: #fff; } a { color: #000; text-decoration: none;} #cabeca { border-bottom: 1px solid #999; } #cabeca h1 { color: #000; } #navega { display: none; } #meu_menu { display: none; } #texto p { line-height: 165%; } .ref { border-bottom: 1px solid #999; } .ref ul { list-style-type: none; text-align: right; margin: 1em 0; padding: 0; font-size: 95%; } .ref li { display: inline; padding: 0 0 0 7px; } .imagefloat { display: none; } #rodape { clear: both; color: #000; text-align: right; padding: 5px; font-size: 90%; border-top: 1px solid #999; margin-top: 2em; }

o resultado é:

Antes dos finalmentes, uma pequena observação: no compartimento do cabeçalho coloca-se o texto

Como no script tela.css o seletor font-size de #cabeca está com a propriedade de 1px, o texto não aparece e não se sobrepõe ao gráfico Já no script imprime.css, esta propriedade foi eliminada e o browser usa o tamanho de fonte padrão para mostrar o texto.

Uma vez satisfeito com o resultado, basta incluir as duas versões de CSS na(s) página(s), cuidando para que o tipo de mídia esteja correto:

Está feito o jogo. Agora você já pode oferecer esta mordomia aos visitantes do seu site. Desejo sucesso

Fontes de referência

• Parte do artigo de Russ Weakley, Colored Boxes (em inglês).
• SelfHTML, Layouts für Printmedien (em alemão).
азартные игры на деньгисковорода с антипригарным покрытием отзывыникас работа блендер погружнойсковорода нержавеющаяavonua.ruалександр лобановский