---
title: '@import'
slug: Web/CSS/@import
translation_of: Web/CSS/@import
---
<p>{{CSSRef}}</p>

<h2 id="Resumen">Resumen</h2>

<p>La regla-at <a href="/en/CSS" title="/en/CSS">CSS</a> <code>@import</code>  permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una <a href="/en/CSS/Syntax#nested_statements" title="/en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usado dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos condicionales de reglas-at</a>.</p>

<p>Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio <code>@import</code>. Estas condiciones @import se especifican separando por una coma las <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> despues de la <em>url</em>. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando  <code>all</code> para el medio tiene el mismo efecto.</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="eval">@import <em>url</em>;                      <em>or</em>
@import <em>url</em> <em>list-of-media-queries</em>;
</pre>

<p>Dónde :</p>

<dl>
 <dt style="margin: 0 40px;"><em>url</em></dt>
 <dd style="margin: 0 40px;">es una <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("&lt;string&gt;")}} </span>o un {{cssxref("&lt;uri&gt;")}}</dd>
 <dd style="margin: 0pt 40px;">Representa la ubicación del recurso a importar. La <em>url</em> puede ser absoluta o relativa.</dd>
 <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
 <dd style="margin: 0 40px;">Es una lista separada por comas de <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> que condicionan la aplicación de las reglas CSS definidas en el enlace <em>url</em>. Si el navegador no soporta cualquiera de estos <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a>,  ni siquiera cargará el recurso vinculado.</dd>
</dl>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<pre class="eval">@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
</pre>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}</td>
   <td>{{ Spec2('CSS3 Media Queries') }}</td>
   <td>Extiende la sintaxis para soportar cualquier <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> y no sólo los <a href="/en/CSS/@media#Media_types" title="/en/CSS/@media#Media_types">tipos de medios</a> simples.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Añade soporte para <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("&lt;string&gt;")}}</span><br>
     para denotar la <em>url</em> de una hoja de estilo,<br>
    y es requerida para insertar la regla <code>@import</code>  en el principio del documento CSS.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#the-cascade', '@import') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>5.5</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>5.5</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>