La posibilidad de importar hojas de estilo y la indicación de los tipos de medios con la sintaxis CSS se realiza la mayoría de las veces sólo en el encabezaado del archivo HTML utilizado:
<head>
<style type="text/css">
@import url("css/sample.css") screen, projection;
@media print {
body {background-color: #fff; color: #000;}
}
</style>
</head>
Estructura de un bloque @media
:
@media [typ] { [selector]{[propiedad]:[valor];} }
Este artículo se centrará en la importación de hojas de estilo o de los medios de comunicación específicos de las instrucciones existentes en una hoja de estilos externa. Esta técnica se puede modular en hojas de estilo, y, en algunos casos, las diversas referencias a las hojas de estilo deben aparecer en el documento.
Aquí está el primer escenario - los archivo HTML (código reducido a la parte esencial):
<head>
<link rel="stylesheet" type="text/css" href="css/basis.css">
</head>
<body>
<div id="header"><h1>e-workers.de</h1></div>
<h2>Título</h2>
<p>Texto</p>
<hr>
<p class="copy">(c) 2008 | e-workers</p>
</body>
Ahora a las tareas:
En una hoja de estilos se deben regular las siguientes opciones:
Para ello, son necesarios los siguientes archivos:
index.html
css/basis.css
css/standard.css
css/xmas.css
En primer lugar, consideramos que el archivo basis.css
ya es
referenciado en nuestro documento. Contiene una sola declaración que sirve a los
efectos de estilo de nuestro nivel de importación. Estos son los que tenemos en
el archivo standard.css
que se encuentra en el directorio
/css
.
@import url(standard.css);
Aquí están la instrucciones importadas de standard.css
:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #dad7cf;
font-size: 82%;
color: #000;
margin: 2% 20%;
}
#header {
background-image: url(../images/banner468_stdd.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100px;
background-color: #b1ab9c;
color: #000;
}
h1, .copy, hr {
display: none;
}
@media print {
body {
background-color: #fff;
color: #000;
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
margin: 0;
}
h1, .copy, hr {
display: block;
}
#header {
background: none;
height: auto;
}
}
La primera parte contiene instrucciones con las que usted debe estar
familiarizado. Vamos directamente a la segunda parte, las declaraciones de
impresión. Estamos en la declaración @media print
.
Podemos cambiar el resultado de estas instrucciones en la vista previa de impresión al realizar la comprobación en el navegador.
Ya hemos realizado dos de nuestras tareas. Se aproxima la Navidad y debemos
realizar la tercera. Por lo tanto, tenemos otro archivo CSS xmas.css
preparado con el siguiente contenido:
#header {
background-image: url(../images/banner468_xmas.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100px;
background-color: #600;
color: #000;
}
Comparar la cabecera de sección #header
con la del archivo
standard.css
- define una imagen diferente y un color de fondo distinto.
En último paso, la importación adicional de la hoja de estilo, en lugar de
basis.css
ahora se encuentran las siguientes instrucciones:
@import url(standard.css);
@import url(xmas.css);