---
title: Regla-At
slug: Web/CSS/At-rule
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p><span class="seoSummary">Una <strong>regla-at</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaración CSS</a> que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloque CSS</a>, lo que sea primero.</span></p>

<p>Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:</p>

<ul>
 <li>{{cssxref("@charset")}} — Define el conjunto de caracteres usado por la hoja de estilos.</li>
 <li>{{cssxref("@import")}} — Indica al motor de CSS que incluya una hoja de estilos externa.</li>
 <li>{{cssxref("@namespace")}} — Indica al motor de CSS que todo el contenido usa como prefijo un espacio de nombres XML.</li>
 <li><strong><em>Reglas-at anidadas</em></strong> — Un subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como grupos de reglas condicionadas internas:
  <ul>
   <li>{{cssxref("@media")}} — Un grupo de reglas condicional que aplicará su contenido si el dispositivo cumple los criterios de las condiciones definidas usando un <em>media query</em>.</li>
   <li>{{cssxref("@supports")}} {{experimental_inline}} — Un grupo de reglas condicional que aplicará su contenido si el navegador cumple los criterios de la condición dada.</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} — Un grupo de reglas condicionadas que aplicará su contenido si el documento donde se aplica la hoja de estilos cumple los criterios de la condición dada. <em>(diferida al Nivel 4 de la Especificación CSS)</em></li>
   <li>{{cssxref("@page")}} — Describe los cambios en la disposición de la página que serán aplicados al imprimir el documento.</li>
   <li>{{cssxref("@font-face")}} — Describe la configuración de fuentes externas que se descargarán.</li>
   <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describe la configuración de pasos intermedios en una secuencia de animación CSS.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describe los aspectos del viewport para dispositivos de pantalla pequeña. <em>(actualmente en Borrador)</em></li>
   <li>{{cssxref("@counter-style")}} — Define estilos de contador específicos que no son parte de los conjuntos de estilos predeterminados. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
   <li>{{cssxref("@font-feature-values")}} (junto con <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> y <code>@character-variant</code>)<br>
    — Define nombres comunes para la propiedad {{cssxref("font-variant-alternates")}}. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li>
  </ul>
 </li>
</ul>

<h2 id="Grupos_de_Reglas_Condicionales">Grupos de Reglas Condicionales</h2>

<p>Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas <strong>conditional group rules</strong>. Estas declaraciones comparten sintáxis común y cada una puede incluir <em>nested statements</em>—ya sean <em>conjuntos de reglas</em> o <em>reglas-at anidadas</em>. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser <strong>verdadero</strong> o <strong>falso</strong>. Si el valor de la condición resulta <strong>verdadero</strong>, todas las declaraciones del grupo serán aplicadas.</p>

<p>Los grupos de reglas condicionales están definidos en <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> y son:</p>

<ul>
 <li>{{cssxref("@media")}},</li>
 <li>{{cssxref("@supports")}},</li>
 <li>{{cssxref("@document")}}. <em>(diferida al Nivel 4 de la Especificación CSS) </em></li>
</ul>

<p>Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificatión</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Definición inicial</td>
  </tr>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td><code>@-webkit-keyframes estandarizado</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li>
 <li>{{CSS_key_concepts}}</li>
</ul>