English Português

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Í.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Enrique / Hace 8 años /

      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.

      Responder a Enrique →
    2. artemisa / Hace 5 años /

      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

      Responder a artemisa →
    3. julio / Hace 4 años /

      gracias francisco, esto me vendra bien para mi pagina de letras de canciones.

      Responder a julio →
    4. Juan / Hace 4 años /

      Lo probé pero queda igual el estilo, no cambia cuando se va a imprimir

      Responder a Juan →
    5. Isabel / Hace 2 años /

      Muchas gracias, me funciono muy bien!

      Responder a Isabel →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad