{"id":61674,"date":"2023-11-09T18:08:00","date_gmt":"2023-11-09T17:08:00","guid":{"rendered":"https:\/\/www.aulatina.com\/css-para-impresion-creando-hojas-de-estilo-para-medios-impresos\/"},"modified":"2025-09-29T12:29:17","modified_gmt":"2025-09-29T10:29:17","slug":"css-for-printing-creating-style-sheets-for-print-media","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/css-para-impresion-creando-hojas-de-estilo-para-medios-impresos\/","title":{"rendered":"Css for print creating style sheets for print media"},"content":{"rendered":"

CSS para impresi\u00f3n: creando hojas de estilo para medios impresos<\/p>\n

Las hojas de estilo en cascada (CSS) son una herramienta esencial para dise\u00f1ar y dar estilo a p\u00e1ginas web. Sin embargo, en ocasiones es necesario adaptar el dise\u00f1o para imprimir, ya que lo que se ve en pantalla puede no ser adecuado para su impresi\u00f3n.<\/p>\n

Crear hojas de estilo espec\u00edficas para medios impresos es una soluci\u00f3n perfecta para este problema. Estas hojas de estilo permiten definir reglas de dise\u00f1o y formato que se aplicar\u00e1n exclusivamente cuando el contenido se imprima.<\/p>\n

\u00bfPor qu\u00e9 crear hojas de estilo para medios impresos?<\/h2>\n

Cuando una p\u00e1gina web<\/a> se imprime directamente desde el navegador, a menudo se presentan problemas como la impresi\u00f3n de elementos de fondo, encabezados y pies de p\u00e1gina poco legibles, entre otros. Al crear una hoja de estilo para medios impresos, podemos controlar y optimizar la apariencia de la p\u00e1gina cuando se imprime, garantizando una presentaci\u00f3n de calidad.<\/p>\n

Pasos para crear una hoja de estilo para medios impresos<\/h3>\n

1. Agregar una referencia a la hoja de estilo en el archivo HTML:
\n[html]
\n<link href=\u00bbURL\/archivo.css\u00bb \u00a0\/>
\n[\/html]<\/p>\n

2. Crear un archivo CSS separado para las reglas de estilo destinadas a la impresi\u00f3n. Por ejemplo, \u00abstyles.css\u00bb.<\/p>\n

3. Utilizar reglas CSS para adaptar el dise\u00f1o para los medios impresos. Algunos ejemplos de reglas comunes incluyen:
\nOcultar elementos no impresos:<\/strong>
\n[css]
\n@media print {
\n.no-print {
\ndisplay: none;
\n}
\n}
\n[\/css]<\/p>\n

Ajustar el tama\u00f1o de fuente y eliminar estilos innecesarios:<\/strong>
\n[css]
\n@media print {
\nbody {
\nfont-size: 12pt;
\ncolor: black;
\ntext-decoration: none;
\n}<\/p>\n

a {
\ntext-decoration: none;
\n}
\n}
\n[\/css]<\/p>\n

Personalizar encabezados y pies de p\u00e1gina:<\/strong>
\n[css]
\n@media print {
\n@page {
\nmargin-top: 2cm;
\nmargin-bottom: 2cm;
\n@top-left {
\ncontent: \u00abTexto personalizado para encabezado izquierdo\u00bb;
\n}
\n@top-right {
\ncontent: \u00abTexto personalizado para encabezado derecho\u00bb;
\n}
\n@bottom-left {
\ncontent: \u00abTexto personalizado para pie de p\u00e1gina izquierdo\u00bb;
\n}
\n@bottom-right {
\ncontent: \u00abTexto personalizado para pie de p\u00e1gina derecho\u00bb;
\n}
\n}
\n}
\n[\/css]<\/p>\n

Recomendaciones adicionales<\/h2>\n