Lenguajes
Web/Otros
Extra
Enlaces

Las hojas de estilo en cascada (CSS) no sólo nos permiten definir cómo debe verse una página en el navegador, también nos permiten definir cómo debe verse la página en diferentes dispositivos, en una televisión, en un dispositivo portátil (un movil por ej) y lo que nos interesa, también nos permite definir cómo debe verse la página al imprimirla.

Para adjuntar una hoja de estilos de este tipo utilizaremos el tag <link> como de costumbre, pero utilizando el parámetro media="print". De esta forma:

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


En el archivo printer.css definiremos los estilos de la página que queremos utilizar en la impresión de esta.

Para ver un ejemplo más práctico supongamos que tenemos una página típica, con una cabecera, una lista de secciones a la izquiera y en el centro una tabla con información. Nos interesa que al imprimir la página sólo aparezca la tabla y no la cabecera ni las secciones. Para hacerlo le añadiremos una id a la tabla:

<table id="tablaPrincipal">


Y ahora, crearemos el printer.css y en él escribiremos:

body * { visibility: hidden; }

#tablaPrincipal, #tablaPrincipal * { visibility: visible; }


Lo que hacemos es esconder todo lo que haya en el body y luego, visualizar la tabla y todo su contenido. De esta forma, al imprimir la página sólo se verá la tabla.

Redactado por Nenillo

¿Dudas? ¡Cualquier duda será atendida en nuestro Foro!

Inicio | JavaScript necesario para este enlace

Noticias en RSS2 XHTML Vlido CSS Vlido