Home-theater-designers
Si alguna vez imprimió reservas de boletos o direcciones a un hotel desde la web, probablemente no haya quedado impresionado con los resultados. Por lo tanto, es posible que no sepa que los documentos impresos se pueden diseñar de la misma manera que en la pantalla, utilizando hojas de estilo en cascada (CSS).
Separación de intereses
Un beneficio clave de CSS es la separación del contenido de la presentación. En los términos más simples, esto significa en lugar de un marcado estilístico muy anticuado como:
|_+_|
Usamos marcado semántico:
|_+_|
Esto no solo es mucho más limpio, sino que también significa que nuestra presentación está separada de nuestro contenido. Los navegadores renderizan h1 elementos como texto grande y en negrita de forma predeterminada, pero podemos cambiar ese estilo en cualquier momento con una hoja de estilo:
|_+_|Al reunir esas declaraciones de estilo en un archivo separado y hacer referencia a ese archivo desde nuestro documento HTML, podemos hacer un uso aún mejor de la separación. La hoja de estilo se puede reutilizar y podemos cambiar ese único archivo en cualquier momento para actualizar el formato en cada documento que lo use.
Incluir una hoja de estilo de impresión
De manera similar a incluir una hoja de estilo de pantalla, podemos especificar una hoja de estilo para imprimir. Por lo general, se incluye una hoja de estilo de pantalla así:
|_+_|Sin embargo, un atributo adicional, media , permite la segmentación basada en el contexto en el que se representa el documento. Por defecto, el elemento anterior es equivalente a:
|_+_|
Esto significa que la hoja de estilo se aplicará a cualquier medio en el que se renderice el documento. Sin embargo, el atributo de medio también puede tomar valores de impresión y pantalla:
|_+_|En este ejemplo, el print.css La hoja de estilo solo se utilizará cuando se imprima el documento. Este es un mecanismo muy útil. Podemos recopilar todo el estilo común (tal vez la familia de fuentes o el interlineado) en una hoja de estilo que se aplica a todos los medios y el formato específico del medio en hojas de estilo individuales. Nuevamente, este es otro uso de la separación de preocupaciones.
Algunas declaraciones de estilo de ejemplo
Un fondo limpio
Es casi seguro que no querrá desperdiciar tinta imprimiendo un fondo colorido o una imagen de fondo. Comience restableciendo los valores predeterminados para estos valores que puedan haberse establecido en su documento:
|_+_|También es posible que desee evitar que se impriman imágenes de fondo; estas deben ser decorativas y, por lo tanto, no deben ser una parte obligatoria de su contenido:
|_+_|Relacionado: Cómo configurar una imagen de fondo en CSS
100% de espacio en disco windows 10
Controlar los márgenes
Otro punto obvio a considerar con respecto a la impresión es el margen de la página. Si bien CSS proporciona un medio para configurar el tamaño de los márgenes, debe tener en cuenta que su navegador y su impresora también pueden influir en la configuración de los márgenes.
Por ejemplo, en el cuadro de diálogo de impresión de Chrome, hay una configuración de margen que tiene valores que incluyen ninguno y personalizado que anulará todo lo especificado a través de CSS:
Por esta razón, se recomienda dejar las decisiones de margen al lector en las páginas web públicas. Sin embargo, para uso personal o para crear un diseño predeterminado, puede ser apropiado establecer los márgenes de impresión mediante CSS. los @página La regla permite establecer márgenes y debe usarse de la siguiente manera:
|_+_|CSS también tiene la capacidad para diseños de impresión más sofisticados, como variar el margen según si la página es impar (derecha), par (izquierda) o la portada.
¿Dónde puedo comprar un cachorro cerca de mí?
Desafortunadamente, esto no tiene suficiente soporte, especialmente la opción de portada, pero se puede usar en un grado mínimo. Los siguientes estilos producen páginas con márgenes inferiores ligeramente más grandes que los márgenes superiores y márgenes ligeramente más grandes en el borde exterior de la página que en el lomo:
|_+_|Ocultar contenido irrelevante
No todo el contenido será adecuado para una versión impresa de su documento. Si su página incluye navegación de banner, anuncios o una barra lateral, es posible que desee evitar que esos detalles aparezcan en la versión impresa, por ejemplo:
|_+_|Fijación de enlaces
Obviamente, los hipervínculos no son relevantes en el material impreso, por lo que probablemente desee eliminar cualquier estilo que los diferencie del texto circundante:
|_+_|Sin embargo, es posible que aún desee que los lectores tengan acceso a las URL originales, y una solución sencilla es insertarlas automáticamente después del texto vinculado:
|_+_|Este CSS da resultados como los siguientes:
a [href]: después se dirige específicamente a la posición después de ( :después ) cada elemento de enlace ( a ) que en realidad tiene una URL ( [href] ). los contenido declaración aquí inserta el valor de la href atributo entre paréntesis. Tenga en cuenta que se pueden aplicar otras reglas de estilo para controlar la visualización del contenido generado.
Manejo de saltos de página
Para evitar que los saltos de página dejen contenido aislado o que se rompa de forma incómoda en el medio, utilice las propiedades de salto de página: salto de página antes , salto de página después y salto de página en el interior . Por ejemplo:
|_+_|Esto debería ayudar a evitar que las tablas abarquen varias páginas, siempre que ninguna sea más alta que una sola página. Similar:
|_+_|Esto significa que dichos encabezados siempre inician una nueva página. Sin embargo, podría causar problemas si sigue inmediatamente el h1 de su página con un h2, ya que el h1 terminará en una página por sí solo. Para evitar esto, simplemente cancele el salto de página usando un selector que apunte a esa instancia específica, por ejemplo:
cómo encontrar sus suscriptores en youtube|_+_|
Visualización de estilos de impresión
En todos los casos, su navegador y sistema operativo deben proporcionar una función de vista previa de impresión, a menudo como parte del diálogo de impresión estándar.
El navegador Chrome hace que sea más conveniente verificar e incluso depurar sus estilos de impresión a través de Herramientas de desarrollo, como lo demuestra este ejemplo que muestra un CV con una hoja de estilo de impresión. Primero, abra el menú principal y seleccione Más herramientas Seguido por el Herramientas de desarrollo opción:
En el nuevo panel que aparece, seleccione Menú , luego Más herramientas , seguido por Representación :
Luego, desplácese hacia abajo hasta el Emular el tipo de medio CSS configuración. El menú desplegable le permite alternar entre las vistas de impresión y pantalla de su documento:
Al emular la hoja de estilo de impresión, el estándar Navegador de estilos está disponible para inspeccionar y modificar las reglas de estilo en vivo. Tenga en cuenta que la emulación de la salida de impresión en una pantalla aún no es 100% precisa. El navegador no sabe nada sobre el tamaño del papel y el @página la regla no se puede emular.
Imprimir en PDF
Una característica útil de los sistemas operativos modernos es la capacidad de imprimir en un archivo PDF. En efecto, cualquier cosa que pueda imprimir puede, en cambio, enviarse a un archivo PDF, lo que no es ninguna sorpresa, ya que se supone que un archivo PDF representa un documento impreso, después de todo.
Esto hace que HTML, en combinación con una hoja de estilo de impresión, sea un medio excelente para crear un documento de alta calidad que se puede enviar como archivo adjunto, así como imprimir.
Imprima una variedad de documentos
Puede utilizar una hoja de estilo de impresión para crear documentos de calidad, desde su CV hasta recetas o anuncios de eventos. Las páginas web suelen verse feas y contienen detalles no deseados cuando se imprimen, pero una pequeña cantidad de ajustes de estilo pueden mejorar drásticamente los resultados de impresión. Guardar los resultados finales como PDF es una forma rápida de crear documentos atractivos y profesionales.
Cuota Cuota Pío Correo electrónico Cómo imprimir páginas web a PDF con Microsoft Edge¿Alguna vez te has encontrado con un artículo interesante que querías guardar para más adelante? Bueno, puedes guardar como PDF con Edge en tres sencillos pasos.
Leer siguiente Temas relacionados- Programación
- Impresión
- CSS
Bobby es un entusiasta de la tecnología que trabajó como desarrollador de software durante la mayor parte de dos décadas. Le apasionan los juegos, trabaja como editor de reseñas en Switch Player Magazine y está inmerso en todos los aspectos de la publicación en línea y el desarrollo web.
Más de Bobby JackSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse