Usar CSS para cambiar los estilos de impresión
Marzo 2nd, 2007 | Publicado por Francisco en CSS
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:
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:
El estilo normal de visualización tiene todos los elementos visibles y podría ser como sigue:
Y el estilo de impresión sería muy similar a esto pero con una peculiaridad:
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Í.<!-- 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"><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>/* 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;}/* Estilo de impresión */#contenedor {visibility:hidden}#banner {visibility:hidden}#menu {visibility:hidden}#contenido {float:right; margin:10px auto; width:500px;}
