Impressão CSS - Regra @media

Você pode usar CSS para alterar a aparência de sua página da web quando for impressa em um papel. Você pode especificar uma fonte para a versão da tela e outra para a versão impressa.

Você viu a regra @mídia nos capítulos anteriores. Esta regra permite que você especifique estilos diferentes para mídias diferentes. Assim, você pode definir regras diferentes para tela e impressora.

O exemplo abaixo especifica diferentes famílias de fontes para tela e impressão. O próximo CSS usa o mesmo tamanho de fonte para a tela e também para a impressora.

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

Se você estiver definindo sua folha de estilo em um arquivo separado, você também pode usar o atributo de mídia ao vincular a uma folha de estilo externa -

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">