Basico Css Impressao-Infowester

22/10/13 O bsico do CSS para impresso
www.infowester.com/cssimpressao.php 1/2
sobre o site | contato
Pesquisar
Incio Web
O bsico do CSS para impresso
Por Erika Sarti, em 02_08_2008. Atualizado em 10_08_2011.
Introduo
Voc j deve ter visto em muitos sites um link com a opo "verso para impresso" ou "imprima esta pgina" (ou algo equivalente).
Aqui no InfoWester mesmo este recurso est presente no incio ou final de praticamente todos os textos.
Quando seu site tem um contedo que possa ser impresso, como textos longos, artigos ou um currculo, uma boa ideia utilizar
declaraes CSS (Cascading Style Sheets) prprias para a mdia impressa, assim voc pode controlar aparncia do que ir para o papel,
deixando a pgina mais amigvel e mais agradvel de ser ler. isso que voc ver a seguir.
necessrio ao leitor ter algum conhecimento de HTML e CSS para compreender o artigo.
Como deve ser uma pgina impressa?
Cada caso um caso, mas a maioria dos desenvolvedores concorda em algums aspectos:
Definir todas as cores em tons de cinza;
Sublinhar os links, e de preferncia imprimir seus endereos;
Escolher uma fonte serifada para os textos, que mais fcil de ser lida no papel, j que foi criada para isso;
Definir as unidades de texto em pontos, e no em pixels;
Remover elementos no essenciais, como menus, barras laterais e, dependendo do caso, anncios publicitrios;
Quando aplicvel, destacar o endereo do site e o autor do texto.
Uma folha de estilo separada para a impresso
Para efeito de organizao, voc pode criar uma folha de estilos separada para a impresso e adicion-la ao header de seu site:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Dentro do arquivo print.css, j no elemento body, voc pode mudar vrios atributos, como a cor de fundo e a aparncia do texto:
body {background: #FFF; color: #000; font: 12pt serif;}
Depois, voc pode definir uma outra cor para os links, adicionando um sublinhado para destac-los no meio do texto:
a:link, a:visited {color: #333; text-decoration: underline;}
Se o seu texto tiver muitos links externos, uma boa ideia imprim-los tambm. Voc pode fazer isso adicionando a seguinte linha sua
folha de estilos para impresso:
ir para o contedo | ir para o menu | sobre os links "ir para"
Incio | Hardware | Software | Redes | Linux | Dicas | Tutoriais | Web | Notcias | Blog | Dvidas
22/10/13 O bsico do CSS para impresso
www.infowester.com/cssimpressao.php 2/2
Feed RSS
InfoWester no Facebook
InfoWester no Twitter
InfoWester no Google+
Newsletter
Contato
Acompanhe o site
Poltica de privacidade
Condies de uso do site
Perguntas mais frequentes
Que site este?
Quem faz este site?
Assessorias / Agncias
Anuncie aqui
Pesquisar CustomSearch
Contedo disponvel sob uma licena Creative Commons.
Saiba mais nas condies de uso dos textos.
InfoWester 2013 | Conhecimento tecnolgico ao seu alcance
Responsvel: Emerson Alecrim | Layout: Erika Sarti | No ar desde 2001
Voltar Pgina inicial Ir para o topo
a[href]:after {content: " (" attr(href) ")";}
Para esconder elementos, como menus, barras de navegao e propagandas, use o atributo display: none;:
#menu, #lateral {display: none;}
A diferena entre os atributos display: none; e visibility: hidden que o primeiro remove completamente o elemento da
tela (ou do papel), enquanto o segundo no exibe o elemento, mas deixa o espao que ele ocuparia em branco. Dependendo
do efeito desejado, a diferena muito grande.>
Quando o texto estiver dentro de um div de largura fixa, uma boa idia ajustar a largura e a margem para a folha de papel:
#texto {width: 100%; margin: auto;}
Se o seu layout utiliza outros elementos coloridos, como ttulos e bordas, voc pode querer alterar as cores para tons de cinza tambm.
Finalizando
Este um exemplo claro da importncia de ter um cdigo HTML semntico e organizado. O ideal numa pgina que voc consiga mudar
totalmente a aparncia dela sem mexer no HTML, apenas no CSS (como no CSS Zen Garden, por exemplo). Se isso possvel para o
que ser exibido na tela, tambm perfeitamente aplicvel mdia impressa.
Todos os navegadores atuais tm a opo de visualizao de impresso, mas voc tambm pode testar a aparncia da sua folha de
estilos impressa salvando a sua pgina em PDF, em vez de gastar papel desnecessariamente.
Esse um assunto muito complexo, mas aqui abordamos apenas o bsico. O mesmo princpio usado para ter uma folha de estilo para
impresso pode ser usado para modificar a aparncia do seu layout para a exibio em dispositivos portteis, por exemplo. Existem no
mercado timos livros para que voc possa se aprofundar no assunto, alm de sites mais completos, como o prprio site da W3C (em
ingls).
Erika Sarti web designer e trabalha como free-lancer desde 2000, sendo tambm responsvel pelo layout do InfoWester. Mais
informaes em seu blog - www.erikasarti.com - e em seu portflio - www.erikasarti.net -.
Mais em Hardware Software Redes GNU/Linux Dicas Tutoriais Web Design Notcias Blog Dvidas

Basico Css Impressao-Infowester

Enviado por

Direitos autorais:

Formatos disponíveis

Basico Css Impressao-Infowester

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Basico Css Impressao-Infowester

Enviado por

Direitos autorais:

Formatos disponíveis

22/10/13 O bsico do CSS para impresso

Você também pode gostar