Creación de estilos CSS exclusivo para la impresión de documentos HTML

Con CSS podemos manipular y tener control de un documento HTML para su impresión, e incluso ver la vista previa antes de mandarlo a imprimir dicho documento HTML en el mismo navegador.

Con la etiqueta link, tiene un atributo que es la media, donde especificados en que medio utilizar dichos estilos.

Aquí el formato

<link rel="stylesheet" type="text/css" href="style_print.css" media="print">

Con media, especificamos el medio la cual se aplicaran el estilo definido en href

Veamos un ejemplo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Incluir un archivo CSS para impresion</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="style_print.css" media="print">
</head>

<body>

    <h1>Mi primer titulo</h1>

    <h2>Un ejemplo del titulo</h2> 
El concepto de paisaje es utilizado tanto por la geografía, por el arte, e incluso por la literatura. Si bien todas estas acepciones son diferentes, tienen como base común que encontramos uno o mas observadores que se enfrentan a una extensión de terreno, destacándose generalmente por características que lo hacen diferenciarse (ya sean positivas o negativas).

    <img src="image/Paisaje.jpg" align="center">
</body>

</html>

Código del archivo “Style.css”

body{
background-color: black;
}

h1,h2 {
padding: 10px;
background-color: gray;
color: white;
}

p{
padding: 15px;
font-family: monospace;
color: white;
font-size: 16px;
}

img {
width: 400px;
display: block;
margin: 10px auto;
}

Código del archivo “style_print.css” para su impresión.

body{
background-color: white;
}

h1,h2 {
background-color: white;
color: black;
font-size: 16px;
border-bottom: black 1px dashed;
}

p{
font-family: monospace;
font-size: 14px;

}

img{
display: none;
}

Como vemos, en el archivo style_print.css, lo que hacemos es poner el fondo en blanco y quitar la imagen, porque solo nos interesa imprimir el texto.

nota

Deja una respuesta