Manual CSS - Paso 11 > Imprimir el CSS

Para finalizar, tenemos que preparar la plantilla para la impresión. Si quieres reproducir fielmente la plantilla en la pantalla deberías cambiar los enlaces a tus hojas de estilo externas de modo que puedan ser accesibles por las impresoras. Hay muchas maneras de hacerlo, como media="all“ y media="screen, print“.

Si quieres ofrecer al usuario una página preparada para imprimir puedes hacer lo siguiente.

1. Duplica tu archivo CSS principal (stylehseet1.css) y sitúa una copia en algún sitio aparte. A continuación trabajaremos con el archivo stylehseet1.css y lo convertiremos en una hoja de estilo imprimible. En lo que al navegador respecta esta es una hoja de estilo de pantalla. Esto significa que podemos trabajar en el archivo y previsualizarlo en varios navegadores sin tener que ir a la vista previa de impresión en cada paso.

Cuando hayamos terminado solo tenemos que cambiarle el nombre y poner un nuevo enlace en la cabecera del documento apuntando a este archivo.

2. Observa la plantilla y decide que es necesario para la versión imprimible.

3. Para este ejemplo quitaremos la cabecera gráfica, el mainnav y el menú derecho, y también quitaremos todos los colores y enlaces subrayados.

• Oculta cualquier contenedor que no necesites usando display: none;
• Cambia todos los colores a negro o escala de grises.
• Cambia los enlaces utilizando a { text decoration: none;}
• Quita el dimensionado de fuentes y permite utilizar el tamaño de fuentes por defecto.
• Establece algún márgen de página utilizando algo como esto: body { margin: 2em; }

La plantilla lista para imprimir se verá como esta

• Versión imprimible

4. Cambia el nombre del fichero y recupera la versión duplicada. Luego añade un nuevo enlace en la cabecera a tu documento:

<link rel=”stylesheet” href=”print.css” media=”print”>

Escribe un comentario