Impressão no CSS: CSS é uma linguagem de estilo que permite que você controle a aparência de suas páginas da web. Neste artigo, vamos explorar um aspecto específico do CSS: a impressão. Vamos abordar vários tópicos, incluindo CSS de impressão, @media print, links, margens de página, quebras de página, como evitar a quebra de imagens no meio e como depurar a apresentação de impressão.
A impressão de páginas da web é uma tarefa comum, mas muitas vezes negligenciada, no desenvolvimento web. Com o CSS, podemos controlar como uma página da web é exibida quando impressa, proporcionando uma experiência de usuário melhor e mais consistente.
CSS de Impressão
O CSS de impressão é um conjunto de estilos CSS que são aplicados apenas quando uma página da web é impressa. Isso é útil para ocultar elementos que não são necessários na versão impressa de uma página, como navegação, rodapés, ou para alterar o layout para se adequar melhor ao formato de papel.
CSS @media print
A regra @media print é usada para aplicar estilos CSS apenas quando uma página da web está sendo impressa. Por exemplo, você pode querer alterar o tamanho da fonte ou a cor do texto para a versão impressa de sua página da web. Aqui está um exemplo de como você pode usar @media print em CSS:
@media print {
body {
font-size: 12pt;
color: black;
}
}Links
Quando você está imprimindo uma página da web, os links não são clicáveis. Portanto, pode ser útil mostrar a URL do link na versão impressa da página. Você pode fazer isso com o seguinte CSS:
@media print {
a[href]:after {
content: " (" attr(href) ")";
}
}Margens de Página
As margens da página são especialmente importantes ao imprimir uma página da web. Você pode querer garantir que haja espaço suficiente nas bordas da página para que nada seja cortado. Você pode definir as margens da página usando a propriedade margin dentro de uma regra @page:
@page {
margin: 2cm;
}Quebras de Página
As quebras de página permitem controlar onde uma nova página começa ao imprimir um documento. Você pode usar as propriedades page-break-before e page-break-after para controlar as quebras de página:
h1 {
page-break-before: always;
}Evitar a Quebra de Imagens no Meio
Ao imprimir uma página da web, você pode querer evitar que as imagens sejam divididas entre duas páginas. Você pode fazer isso usando a propriedade page-break-inside:
img {
page-break-inside: avoid;
}Depurar a Apresentação de Impressão
Depurar a apresentação de impressão pode ser um pouco mais complicado do que depurar o CSS normal, pois você não pode simplesmente inspecionar o código no navegador. No entanto, a maioria dos navegadores modernos tem uma opção “Visualizar impressão” que permite ver como a página será exibida quando impressa.
Conclusão
CSS oferece uma série de ferramentas poderosas para controlar como uma página da web é exibida quando impressa. Ao entender e utilizar essas ferramentas, você pode garantir que suas páginas da web sejam tão eficazes no papel quanto são na tela.
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!
