Blogger CSS

Usar CSS para cambiar los estilos de impresión

Muchas veces cuando queremos brindarle a nuestros usuarios contenido para imprimir, quisieramos mostrarselo en una versión más ligera, sin banner, sin publicidad y sin menús. Una forma de darle esta opción es creando dos estilos: el estilo a mostrar en la web y un estilo de impresión. Podemos tener ambos en una misma página pero indicando que uno solo se utilizará cuando el usuario quiera imprimir. Esto se hace de la siguiente forma:


<!-- estilo usado en la visulización normal -->
<link href="estilos.css" rel="stylesheet" type="text/css">

<!-- estilo usado sólo al imprimir -->
<link href="estilos_de_impresion.css" rel="stylesheet" type="text/css" media="print">

Como vemos, el estilo de impresión tiene declarado el atributo media=»print» que espeifica su uso sólo para imprimir.

Pongamos un ejemplo:

Tenemos una página con la siguiente estructura: un banner, un menú y el contenido. El código es el codigo siguiente:


<html>
<head>
<title>Estilos de impresión</title>

<!-- estilo usado en la visulización normal -->
<link href="estilos.css" rel="stylesheet" type="text/css">

<!-- estilo usado sólo al imprimir -->
<link href="estilos_de_impresion.css" rel="stylesheet" type="text/css" media="print">
</head>

<body>

<div id="contenedor">

<div id="banner"><p>Aquí tenemos un banner, ya saben una imagen grande hasta arriba, pero no quisieramos que salga al imprirmir</p></div>

<div id="menu"><p>aquí siempre ponemos nuestras opciones, pero tampoco queremos verlas al imprirmir</p></div>

<div id="contenido">
<p>Aquí tenemos nuestro contenido y es lo que queremos ver en la visualizacion de internet y al imprimir</p>
</div>

</div>
</body>
</html>

El estilo normal de visualización tiene todos los elementos visibles y podría ser como sigue:


/* Estilo de visualización normal */
#contenedor {margin:30px auto; width:750px; background:#CCCCCC;}
#banner {width:100%}
#menu {float:left; width:200px;}
#contenido {float:right; width:530px;}

Y el estilo de impresión sería muy similar a esto pero con una peculiaridad:


/* Estilo de impresión */
#contenedor {visibility:hidden}
#banner {visibility:hidden}
#menu {visibility:hidden}
#contenido {float:right; margin:10px auto; width:500px;}

Todos los elementos que no queremos que aparescan tienen el atributo visibility:hidden, es decir, ocultos, por lo que sólo tendras que definir los estilos a imprimir y ocultar el resto.

Es conveniente no colocar muchos colores en los estilos de impresión por el costo que puede representar para el usuario y para tener un aspecto más sencillo.

Este método funciona muy bien si tienes tus bloques generales (cabecera, menu, pie de pagina, contenido, etc.) declarado con CSS, pero si nos tienes asi queda la opción se hacerle una versión imprimible a cada página, pero eso reprenta mucho trabajo.

Para descargar los ejemplos da CLICK AQUÍ.

Deja un comentario

5 Comentarios

  • Hola, gracias por el árticulo.
    Con la propiedad visibility:hidden, no se muestran los elementos pero sí que ocupan su espacio correspondiente.
    Por eso yo creo que es mejor utilizar (siempre dependiendo lo que uno quiera) la propiedad display:none, que además de no verse el elemento tampoco ocupa su espacio.

    Yo tengo el problema de que si quiero poner a la versión imprimible un color al fondo, con la propiedad background, no me sale, y siempre me sale con el fondo blanco. ¿Alguien sabe como podría poner un color de fondo a la versión imprimible?
    Gracias.

  • Y como sabe la pagina web cuando se va a usar el estilo normal y el estilo irmpimible :S, yo tengo un botón que quiero que cuando le de le envíe a impresion pero solo una parte de la pagina, un div