Como otimizar as páginas web para impressão?

Para otimizar as páginas para impressão, utilizam-se consultas de mídia CSS com o tipo print.

Esconder elementos desnecessários: Esconder elementos que não devem ser exibidos na impressão (navegação, rodapés, blocos de anúncios, botões).
```
/* Esconder na impressão */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Mostrar conteúdo oculto: Se houver conteúdo oculto na tela, mas necessário para impressão (por exemplo, URLs completas de links), pode ser exibido.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Adiciona a URL após o link */
  }
}
```

Reiniciar estilos: Reiniciar estilos específicos para a tela: imagens de fundo/cor, sombras, margens, tamanhos de fonte.

@media print {
  body {
    background: none !important; /* Remove a imagem/cor de fundo */
    color: #000; /* Texto preto para melhor legibilidade */
  }
  * {
    box-shadow: none !important; /* Remove sombras */
    text-shadow: none !important; /* Remove sombras do texto */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Impede linhas órfãs no início/fim da página */
    widows: 3; /* Impede linhas órfãs no início/fim do parágrafo */
  }
}

Controle de quebras de página: Uso das propriedades page-break-before, page-break-after, page-break-inside para controlar as quebras de página.

@media print {
  article h2 {
    page-break-before: always; /* Começa uma nova seção em uma nova página */
  }
  ul, ol {
    page-break-inside: avoid; /* Impede quebras dentro de listas */
  }
}

Otimização de imagens e tabelas: Reduzir tamanhos de imagens, garantir a exibição correta de tabelas.

@media print {
  img {
    max-width: 100% !important; /* Garante que a imagem não ultrapasse a largura da página */
  }
  table {
    width: 100% !important; /* Tabela na largura total da página */
    border-collapse: collapse; /* Remove espaços entre células */
  }
  th, td {
     border: 1px solid #ccc; /* Adiciona bordas às células */
  }
}

Estilos especiais para impressão: Pode criar um arquivo CSS separado para impressão e vinculá-lo com uma consulta de mídia.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Testar: É essencial testar o resultado usando a função "Visualização de impressão" no navegador.