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

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 1

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)

Sobre el autor

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

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido