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»>

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

1 comentario en “Manual CSS – Paso 11 > Imprimir el CSS”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido