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_impres
ion.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_imprimi
r.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[/url]
<li><a href="#">Vínculo 2[/url]
</ul>
</div>
<div id="derecha">
<div id="principal">
Contenido de un posible informe
</div>
</div>
</div>
<div id="pie">
</div>
</div>
</body>
</html>
Como se ha podido ver en el HTML anterior, se han incluido dos archivos CSS con estilos. El primero es estilo.css, que es el estilo que se utilizará al visualizar la página en el navegador. El segundo link con una hoja de estilos CSS es estilo_imprimi
r.css, que definirá el aspecto de la página al imprimirla (fijarse en el atributo media="print" de la etiqueta).
Los códigos CSS son muy parecidos, simplemente hemos hecho un par de cambios para ilustrar lo que venimos diciendo. En la visualización de la página no se mostrará la capa con id="logo". Por su parte, al imprimir la página no se mostrará la barra de navegación de la izquierda y los contenidos centrales se mostrarán en todo el ancho del espacio de impresión. Tampoco se mostrará la capa id="cabecera".
El código CSS de visualización en navegador
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#logo{
visibility:hidden;
display: none;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}
#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;
}
El código CSS que se utilizará para la impresión de la página
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 600px;
margin: auto;
}
#cabecera{
visibility:hidden;
display: none;
}
#logo{
visibility:visible;
display: block;
margin-left: 20px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
visibility:hidden;
display: none;
}
#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}
#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 600px;
float: left;
}
#principal table{
background-color: #ffffff;
width: 600px;
border: 2px solid #cccccc;
font-size:10pt;
}
Autor