Cómo hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.
A veces necesitamos que nuestra página se imprima en una impresora de manera distinta a como se visualiza en la página web. Por ejemplo, si en una página se muestra un informe con datos que se desea guardar impreso en papel, probablemente deseemos que en la impresora se muestre con una fuente más pequeña, para que se pueda comprimir todo el contenido de manera que quepa en un folio. También es posible que en los informes deseemos que aparezca el logo de la compañía centrado en la cabecera del informe.
Todo esto se puede hacer con CSS. Las Hojas de Estilo en Cascada sirven para definir el aspecto de la página, y estos estilos se pueden declarar de manera distinta a la hora de imprimir un documento y a la hora de verlo en el navegador.
Con CSS se puede definir estilos en un documento externo, de esta manera:
<link href="estilos.css" rel="stylesheet" type="text/css">
Con esto suponemos que tenemos un archivo llamado estilos.css, que está en el mismo directorio de la página, donde se definen los estilos del documento.
De modo parecido, podemos asignar una hoja de estilos externa para definir el aspecto cuando un usuario imprime la página web:
<link href="estilos_impresion.css" rel="stylesheet" type="text/css" media="print">
Lo único que cambia es el atributo media="print", que indica que esta hoja de estilos es sólo para cuando se va a imprimir la web.
Ejemplo de dos hojas css distintas para impresión y visualización
Ahora veamos un ejemplo de página web que tiene dos hojas de estilo distintas, una para cuando se está en el navegador y otra cuando se va a imprimir.
Tenemos un HTML que incluye dos hojas de estilos y dispone varias capas, que luego maquetaremos o posicionaremos con CSS.
<html>
<head>
<title>informe superpuzzles</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
Superpuzzles
</div>
<div id="logo">
<img src="logo.gif">
</div>
<div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a>
<li><a href="#">Vínculo 2</a>
</ul>
</div>
<div id="derecha">
<div id="principal">
Contenido de un posible informe
</div>
</div>
</div>
<div id="pie">
</div>
</div>
</body>
</html>
Usuarios que han visto este tema también han visto...
- Qué son las capas
- Centrar DIV horizontal en CSS
- Hacks CSS
- Colores en CSS
- Estilo en funcion del contexto
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.