diff options
Diffstat (limited to 'files/pt-br/web/css/@import/index.html')
-rw-r--r-- | files/pt-br/web/css/@import/index.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/files/pt-br/web/css/@import/index.html b/files/pt-br/web/css/@import/index.html new file mode 100644 index 0000000000..9081439ecb --- /dev/null +++ b/files/pt-br/web/css/@import/index.html @@ -0,0 +1,121 @@ +--- +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("<string>")}} ou como {{cssxref("<uri>")}} 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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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("<string>")}} 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>Suorte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> |