Resultados 1 a 4 de 4

Tópico: CSS para imprimir páginas web

  1. #1
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640
    Blog: Como formatar o computador e instalar o Windows 8

    Padrão CSS para imprimir páginas web

    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.



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640
    Blog: Como formatar o computador e instalar o Windows 8

    Padrão

    Exemplo de duas folhas CSS distintas para impressão e visualização

    Agora vejamos um exemplo de página web que tem duas folhas de estilo diferentes, uma para quando se está no navegador e outra quando vai se imprimir.

    Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas, que logo construiremos ou posicionaremos com CSS.

    <html>
    <head>
    <title>informe super quebra-cabeça</title>
    <link rel="STYLESHEET" type="text/css" href="estilo.css">
    <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
    </head>

    <body>

    <div id="container">
    <div id="cabecalho">
    Super quebra-cabeça
    </div>
    <div id="logo">
    <img src="logo.gif">
    </div>
    <div id="corpo">
    <div id="lateral">
    <ul>
    <li><a href="#">Link 1</a>
    <li><a href="#">Vínculo 2</a>
    </ul>
    </div>
    <div id="direita">
    <div id="principal">
    Conteúdo de um possível informe
    </div>
    </div>
    </div>
    <div id="rodape">
    © 2007 CriarWeb.com
    </div>
    </div>

    </body>
    </html>

    Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).

    Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640
    Blog: Como formatar o computador e instalar o Windows 8

    Padrão

    O código CSS de visualização no navegador

    BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ffffff;
    }
    #container{
    text-align: left;
    width: 770px;
    margin: auto;
    }
    #cabecalho{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
    }

    #logo{
    visibility:hidden;
    display: none;
    }

    #corpo{
    margin: 10 0 10 0px;
    }
    #lateral{
    width: 160px;
    background-color: #d0d0ff;
    float:left;
    }
    #lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
    }
    #lateral li{
    background-color: #ffffff;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
    }
    #lateral a{
    color: #3333cc;
    text-decoration: none;
    }

    #rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
    }

    #principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 580px;
    float: left;
    }

    #principal table{
    background-color: #ffffff;
    width: 580px;
    border: 2px solid #cccccc;
    font-size:10pt;
    }


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  4. #4
    GForum Mestre Avatar de helldanger1
    Data de Ingresso
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    39
    Posts
    29.640
    Blog: Como formatar o computador e instalar o Windows 8

    Padrão

    O código CSS que se utilizará para a impressão da página

    BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ffffff;
    }
    #container{
    text-align: left;
    width: 600px;
    margin: auto;
    }
    #cabecalho{
    visibility:hidden;
    display: none;
    }

    #logo{
    visibility:visible;
    display: block;
    margin-left: 20px;
    }

    #corpo{
    margin: 10 0 10 0px;
    }
    #lateral{
    visibility:hidden;
    display: none;
    }

    #rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
    }

    #principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 600px;
    float: left;
    }

    #principal table{
    background-color: #ffffff;
    width: 600px;
    border: 2px solid #cccccc;
    font-size:10pt;
    }

    Novamente, colocamos o link para que se possa ver a página do exemplo de estilos de impressão CSS.

    Nota: Se quisermos ver como se imprimiria a página, porém sem a necessidade de utilizar a impressora (para não gastar papel nem tinta ou se não tivermos impressora), podemos acessar ao menu Arquivo - Visualizar impressão ).


    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Já fez "Like" na nossa página do facebook?

Acompanhe todas as novidades.