Está usted en Indice > Construcción > Lenguajes > CSS > Lecciones y Paso a Paso > Evitar que una página se imprima
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Evitar que una página se imprima

Evitar que una página se imprima

Veamos un pequeño truco con hojas de estilos para evitar que se pueda imprimir una página web con el botón de imprimir de nuestro navegador.

Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya asociada como sino, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja contendrá un único estilo, con el código necesario para ocultar un elemento:

.nover{
visibility:hidden
}

A la hora de asociar la hoja de estilos, se le añade un modificador a la etiqueta HTML que enlaza con el fichero .css que permite especificar para qué tipo de medio se aplicará esta hoja. En nuestro caso, se aplica en el ámbito de la impresión, por lo que se utiliza el atributo media="print".

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

Una vez hecho esto, basta que toda nuestra página este dentro de un elemento div, que pertenezca a la clase nover.

<body>
<div class="nover">

-- Contenido --


</div>
</body>

Al hacer esto se provoca que en pantalla se visualice la página, pero que si por el contrario se decide imprimir, se le aplicará la hoja de estilos de impresión, en la que el elemento esta puesto como no visible, por lo que no se imprimirá.

Codigo Completo:

Veamos el código íntegro de la página web y la hoja de estilos asociada.

Página HTML


<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="nover">

… contenido de la pagina

</div>
</body>
</html>

Hoja estilos: estilos.css

.nover{
visibility:hidden
}

Nota: Esta catacterística de las hojas de estilos funciona con éxito en navegadores IExplorer 6, Netscape 7 y Opera 7. No la hemos probado en otras versiones.

Autor: Carlos Luis Cuenca



Usuarios que han visto este tema también han visto...

- Clases, pseudoclases y pseudoelementos en css
- Primeros pasos con CSS
- Trucos prácticos y técnicas para maquetar en CSS
- Bordes Punteados con CSS
- Cambiar el aspecto del cursor con CSS


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad

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.


Página generada el 05-09-2008 a las 08:26:46