Imprimir solo un DIV. Dar formato para impresión

Imprimir solo un DIV. Dar formato para impresión

Código CSS

Por ASP clásico / 17/05/2013 @ 09:44:37 / 1486 visitas

Un sitio web puede ofrecer al usuario la posibilidad de imprimir sus contenidos mediante una versión específica para impresora. Estas versiones optimizadas para impresora eliminan los contenidos superfluos, modifican o eliminan las imágenes y colores de fondo y sobre todo, optimizan los contenidos de texto para facilitar su lectura.

Las reglas CSS de la versión para imprimir se aplican solamente al medio print. Por lo tanto, en primer lugar se crea una nueva hoja de estilos y al enlazarla se especifica que sólo debe aplicarse en las impresoras:

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

Las hojas de estilos para la pantalla se aplican a todos los medios (por utilizar el valor media="all" al enlazarla o por no indicar ningún valor en el atributo media). Una hoja de estilo para impresora se construyen siguiendo los pasos que se muestran a continuación:

Ocultar los elementos que no se van a imprimir:

#cabecera, #menu, #lateral, #comentarios {
  display: none !important;
}

Los bloques <div> que no se van a imprimir se ocultan con la propiedad display y su valor none. La palabra clave !important aumenta la prioridad de esta regla CSS.Si al imprimir la página se eliminan las columnas laterales, es conveniente reajustar la anchura y el posicionamiento de la zona de contenidos y de otras zonas que sí se van a imprimir.

body, #contenido, #principal, #pie {
  float: none !important;
  width: auto !important;
  margin:  0 !important;
  padding: 0 !important;
}

Ahora debe modificar los colores y tipos de letra:

body { color: #000; font: 100%/150% Georgia, "Times New Roman", Times, serif; }

Puede ser realmente útil es mostrar al lado de un enlace la dirección a la que apunta. De esta forma, al imprimir la página no se pierde la información relativa a los enlaces.CSS incluye una propiedad llamada content que permite crear nuevos contenidos de texto para añadirlos a la página HTML. Si se combina la propiedad content y el pseudo-elemento :after, es posible insertar de forma dinámica la dirección a la que apunta un enlace justo después de su texto:

a:after {
  content: " (" attr(href) ") ";
}

o bien

a:before {
  content: " (" attr(href) ") ";
}

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.