---
title: Regra At
slug: Web/CSS/At-rule
translation_of: Web/CSS/At-rule
---
<p>Uma <strong>regra at (at-rule)</strong> é uma <a href="/en/CSS/Syntax#CSS_statements" title="en/CSS/Syntax#CSS_statements">CSS statement</a> iniciando com um caractere arroba, '<code>@</code>' (<code>U+0040 ARROBA COMERCIAL</code>), seguido por um indetificador e terminando no primeiro ponto e vírgula', <code>;</code>' (<code>U+003B SEMICOLON</code>), fora de um <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">bloco</a>, ou no fim do primeiro <a href="/en/CSS/Syntax#CSS_declarations" title="en/CSS/Syntax#CSS_declarations">Bloco CSS</a>.</p>
<p>Existem muitas regras at, criadas por seu identificador, cada um com uma sintaxe diferente:</p>
<ul>
  <li>{{ cssxref("@charset") }}, definindo o conjunto de caracteres (codificação) usado pela folha de estilos.</li>
  <li>{{ cssxref("@import") }}, informando o motor CSS para incluir uma folha de estilos externa.</li>
  <li>{{ cssxref("@namespace") }}, informando ao motor CSS que todo o conteúdo deve ser considerado prefixado com um namespace XML.</li>
  <li>Regras at aninhadas, um subconjunto de regras aninhadas que pode ser usado não somente como uma regra de uma folha de estilos, mas também dentro de um grupo de regras condicional:
    <ul>
      <li>{{ cssxref("@media") }}, um grupo de regras condicional que é aplicado ao conteúdo caso o dispositivo de exibição cumpra com a condição de mídia definida.</li>
      <li>{{ cssxref("@font-face") }}, descrevendo o aspecto de uma fonte externa que deve ser baixada. {{ experimental_inline() }}</li>
      <li>{{ cssxref("@document") }}, um grupo de regras condicional que é aplicado ao conteúdo caso o documento cumpra com os critério definidos. {{ experimental_inline() }}</li>
      <li>{{ cssxref("@supports") }}, um grupo de regras condicional que é aplicado caso o navegador cumpra com os critérios definidos. {{ experimental_inline() }}</li>
    </ul>
  </li>
</ul>
<h2 id="Grupos_condicionais_de_regras">Grupos condicionais de regras</h2>
<p>Assim como valores de propriedades, cada regra at possui uma sintaxe diferente; várias delas, entretanto, podem ser agrupadas em uma categoria especial, os <strong>grupos condicionais de regras</strong>. Essas regras compartilham uma sintaxe em comum. Cada uma delas inclui <em>regras aninhadas</em>, que são <em>conjuntos de regras</em> ou <em>regras at aninhadas</em>. Todas elas transmitem um significado semântico em comum: todas indicam uma condição (de um tipo diferente) para que as regras sejam aplicadas.</p>
<p>Grupos condicionais de regras são definidos pelo CSS3 e são:</p>
<ul>
  <li>{{ cssxref("@media") }},</li>
  <li>{{ cssxref("@document") }},</li>
  <li>{{ cssxref("@supports") }}.</li>
</ul>
<p>Cada uma delas sendo também uma regra aninhada, pode haver uma quantidade indeterminada de aninhamentos.</p>
<div class="noinclude">
  <p>{{ languages( { "ja": "ja/CSS/At-rule" } ) }}</p>
</div>
<p> </p>