acerca de: @import, @media

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);

Deshacer

Índice Capítulo 4
Contenido material adicional