Define el medio con la regla “@media”

Publicado Por; jatgjose | Publicado en: CSS, HTML | Publicado el dia: 23-04-2010

0

Codigo HTML sin CSS.

<html>
    <head>
        <title>Esto es una prueba CSS</title> 

 </head>
   
    <body>
        <p>esta es una prueba para el texto</p>

    </body>
</html>

Codigo HTML con el codigo CSS:

<html>
    <head>
        <title>Esto es una prueba CSS</title>
        <style type="text/css">
            p{color: fuchsia;
                font-family: !important;
            }
            /*aqui va lo que se va a imprimir por impresora*/
            @media print{
                body{font-size: 10pt;
                }
            }
            /*aqui va lo que nos muestra por pantalla*/
            @media screen{
                body{font-size: 40px;
                }
            }
        </style>
    </head>
   
    <body>
        <p>esta es una prueba para el texto</p>

    </body>
</html>

-Cuando utilizamos la regla “@media print” toda la regla que le hemos introducido dentro la va ha imprimir por impresora tal cual le hemos indicado.

Estos casos son para cuando tenemos una web muy con muchos coloridos no gastemos tanta tinta.

- Y utilizamos la regla “@media screen” para que todo el diseño de nuestra web nos aparezca tal cual por pantalla. En el ejemplo con el CSS lo podremos ver como lo hemos aplicado.

Espero que les haya interesado este post y os ayude en un futuro. ¡Aporten más!

<html>
<head>
<title>Esto es una prueba CSS</title>
<style type=”text/css”>
p{color: fuchsia;
font-family: !important;
}
/*aqui va lo que se va a imprimir por impresora*/
@media print{
body{font-size: 10pt;
}
}
/*aqui va lo que nos muestra por pantalla*/
@media screen{
body{font-size: 40px;
}
}
</style>
</head>

<body>
<p>esta es una prueba para el texto</p>

</body>
</html>

Continuar