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

<h2 id="Sumário">Sumário</h2>

<p>A <a href="/en-US/docs/Web/CSS/At-rule">Regra Atribuída (at-rule) </a><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>@import </code></strong>é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as  regrasde <a href="/pt-BR/docs/Web/CSS/@charset">@charset</a> ; uma vez que não é um <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">Declaração aninhada</a>, <code>@import não pode ser usado dentro do</code> <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">grupo condicional de regras atribuídas (at-rules)</a>.</p>

<p><span id="result_box" lang="pt"><span class="alt-edited">Assim como</span> <span class="alt-edited">os agentes do usuário</span> <span class="alt-edited">podem evitar</span> <span>a recuperação de</span> <span>recursos</span> <span>para os tipos de</span> <span>mídia incompatíveis</span><span>, os autores podem</span> <span>especificar regras</span> <span>@import</span> <span>dependentes de mídia</span><span>.</span> <span>Estas importações</span> <span>condicionais</span> <span class="alt-edited">devem ter </span></span> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> <span lang="pt"><span class="alt-edited">separadas por vírgulas</span></span> após a URI. <span id="result_box" lang="pt"><span>Na ausência</span> <span>de qualquer</span> <span>consulta de mídia</span><span> (media queries), a importação</span> <span>é incondicional.</span> <span>Especificando</span> <span>todos</span> <span>para o médio</span> <span>tem o mesmo efeito</span></span>.</p>

<h2 id="Sintaxe">Sintaxe</h2>

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

<p>where:</p>

<dl>
 <dt style="margin: 0 40px;"><em>url</em></dt>
 <dd style="margin: 0 40px;">É algo como {{cssxref("&lt;string&gt;")}} ou como {{cssxref("&lt;uri&gt;")}} representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Veja aqui</a> para mais informações.</dd>
 <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt>
 <dd style="margin: 0 40px;">É uma lista separada por vírgulas de <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">consultas de mídia (media queries)</a> conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.</dd>
</dl>

<h2 id="Sintaxe_formal">Sintaxe formal</h2>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

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

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Situação</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td><span id="result_box" lang="pt"><span class="alt-edited">Estendeu</span> <span>a sintaxe</span> <span>para apoiar qualquer</span> <span>consulta de mídia</span> <span>e</span> <span>não apenas</span> <span>simples</span></span> <a href="/en-US/docs/Web/CSS/@media#Media_types">tipos de mídia (media types)</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Adicionado suporte para {{cssxref("&lt;string&gt;")}} para denotar a URL de uma folha de estilo,<br>
    e obrigatoriedade da regra <code>@import</code> no início do documento CSS.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibilidade">Browser compatibilidade</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>Suporte 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>Suporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.5</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>