5 – Preparando páginas para impressão

A media query @media print é uma ferramenta poderosa que permite estilizar páginas da web especialmente para impressão, proporcionando uma experiência de leitura otimizada em papel. Ao ajustar margens, ocultar elementos desnecessários e definir tamanhos de fonte adequados, você pode garantir que seu conteúdo seja impresso de forma clara e legível.

O que é @media print? A media query @media print é uma forma de segmentar estilos específicos para quando a página é enviada para impressão. Essa media query permite que você defina regras CSS exclusivas para o layout de impressão, separando-as dos estilos aplicados ao layout da tela.
Configurando o ambiente de impressão Ao utilizar a media query @media print, é possível definir propriedades específicas para a página impressa, como cores de fundo, margens, tamanhos de fonte e outros detalhes visuais. É importante considerar que o ambiente de impressão é diferente do ambiente da tela, portanto, certos ajustes podem ser necessários.
Ocultando elementos desnecessários Ao imprimir uma página da web, pode ser interessante ocultar certos elementos que não são relevantes para a versão impressa, como cabeçalhos, rodapés, menus de navegação e até mesmo anúncios. Você pode usar a propriedade display: none; para ocultar esses elementos dentro da media query @media print.
Ajustando margens e espaçamento Ao imprimir uma página, é comum ajustar as margens para garantir que o conteúdo principal fique centralizado e bem distribuído na página impressa. Você pode utilizar as propriedades margin e padding para ajustar as margens e espaçamentos dentro da media query @media print.

Agora vamos explorar o uso da media query @media print no CSS para estilizar páginas da web ao serem impressas.

Comece criando a estrutura básica do seu documento HTML. Aqui está um exemplo simples:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo de Media Queries para Impressão</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<header>
<h1>Meu Site</h1>
</header>

<div class="content">
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo...</p>
</div>

<footer>
<p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
</html>

Crie um arquivo CSS separado chamado estilo.css que já está vinculado ao seu arquivo HTML. Adicione algumas regras CSS básicas para estilizar os elementos:

header, footer {
background-color: #ccc;
padding: 10px;
text-align: center;
}

h1, h2 {
color: #333;
}

.content {
margin: 20px;
}

p {
font-size: 16px;
color: #000;
}

Essas regras CSS definem estilos básicos para o cabeçalho, rodapé, títulos, conteúdo e parágrafos.

Agora, vamos adicionar media queries para estilizar a página ao ser impressa. Dentro das media queries, faremos alterações específicas para a impressão:

@media print {
body {
background-color: #fff; /* Define o fundo como branco */
}

header, footer {
display: none; /* Oculta o cabeçalho e o rodapé na impressão */
}

.content {
margin-top: 20px; /* Adiciona uma margem no topo do conteúdo impresso */
}

p {
font-size: 14px; /* Define o tamanho da fonte para impressão */
}
}

Aqui, usamos a media query @media print para aplicar estilos específicos para a impressão. Dentro dessa media query:

Definimos o fundo da página como branco usando background-color.
Ocultamos o cabeçalho e o rodapé na impressão usando display: none.
Adicionamos uma margem superior de 20 pixels para o conteúdo impresso usando margin-top.
Definimos o tamanho da fonte para os parágrafos como 14 pixels usando font-size.