jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de estilos de impresion CSS

Genera una hoja de estilo de impresion para ocultar navegación y mostrar URLs.

Cargando herramienta...

Qué es Generador de estilos de impresion CSS?

Una hoja de estilos de impresion es CSS dentro de @media print que estiliza la pagina cuando alguien imprime o guarda como PDF. Debe ocultar la navegacion, barras laterales y pies de pagina, mostrar URLs completas despues de los enlaces, evitar saltos de pagina dentro de bloques importantes como tablas y codigo, y establecer margenes adecuados. Esto es especialmente util para documentacion, recetas, facturas y articulos.

Respuesta rápida

Genere un bloque @media print que oculte la navegacion, muestre las URLs de los enlaces, controle los saltos de pagina y establezca margenes de impresion adecuados. Esencial para que articulos, recetas, documentacion y facturas se impriman limpiamente.

Last updated: 2026-06-11

Limitaciones

  • Las reglas de salto de pagina como page-break-inside: avoid son sugerencias para el motor de impresion del navegador, no garantias. El motor puede dividir el contenido si el bloque no cabe en una pagina.
  • Los motores de impresion del navegador renderizan CSS de manera diferente. Chrome, Firefox y Safari producen resultados impresos ligeramente diferentes, especialmente con colores de fondo, margenes de pagina y disenos multicolumna.
  • Las reglas de estilo de impresion solo se aplican cuando la pagina se imprime o se ve en la vista previa de impresion. Siempre pruebe los estilos de impresion en la vista previa de impresion.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione los elementos que desea ocultar al imprimir.
  2. Elija si desea mostrar las URLs despues de los enlaces.
  3. Establezca preferencias de margen y tamano de pagina.
  4. Copie el bloque @media print en su hoja de estilos y pruebe con la vista previa de impresion.

Para qué puedes usarla

  • Preparar una pagina de receta para impresion limpia sin navegacion ni anuncios.
  • Hacer que las paginas de documentacion se impriman con URLs completas de enlaces como referencia.
  • Estilizar facturas y listas de verificacion para una salida impresa profesional.

Casos de uso

Ejemplos prácticos

Ejemplo

Estilos de impresion para tarjeta de receta

Un blog de recetas agrega estilos de impresion para que los lectores puedan imprimir una tarjeta de receta limpia sin el encabezado, la barra lateral ni los comentarios.

Ejemplo

Documentacion con URLs expandidas

Un sitio de documentacion imprime con URLs de enlaces expandidas para que los lectores puedan seguir las referencias en papel.

Errores comunes

  • Ocultar todas las imagenes en lugar de solo las decorativas.
  • Usar display:none en todo sin probar la salida impresa.
  • No establecer page-break-inside: avoid en tablas y bloques de codigo.

Verificación

  1. Use la vista previa de impresion en Chrome, Firefox y Safari para verificar que la pagina se imprima sin navegacion, con URLs de enlaces expandidas y con saltos de pagina adecuados.
  2. Guarde la pagina como PDF desde cada navegador y compare la salida para verificar la consistencia en margenes, tamanos de fuente y colocacion de saltos de pagina.

FAQ

Preguntas sobre Generador de estilos de impresion CSS

Como pruebo los estilos de impresion?

Use la vista previa de impresion del navegador (Ctrl+P) o la pestana Rendering de DevTools para emular el medio de impresion.

Los estilos de impresion deberian estar en un archivo separado?

Puede usar un print.css separado o incrustar @media print en su hoja de estilos principal. Ambos enfoques funcionan.

Que elementos deberia ocultar en los estilos de impresion?

Oculte barras de navegacion, menus laterales, widgets de pie de pagina, secciones de comentarios, botones para compartir, formularios de suscripcion a boletines y cualquier elemento interactivo que no sirva en papel. Mantenga el contenido principal, encabezados, imagenes y tablas de datos que sean parte del cuerpo del articulo.

Como manejo los saltos de pagina en CSS de impresion?

Use page-break-before, page-break-after y page-break-inside con valores auto, always o avoid. Los equivalentes modernos son break-before, break-after y break-inside. Use break-inside: avoid en bloques de codigo, imagenes y tablas para evitar que se dividan en dos paginas.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también