¿Qué son las reglas CSS?

Reglas CSS, precedidas por el carácter @

En CSS tenemos las denominadas «at-rules» (reglas precedidas del carácter @). Son un tipo de declaración especial que permite indicar comportamientos especiales en muchos contextos. Su sintaxis suele determinarse incluyendo una palabra clave que comienza por @ (como por ejemplo @media o @import) y dependiendo de la regla en cuestión, puede tener una sintaxis u otra:

Algunos ejemplos con @media o @import:

/* Regla @import para importar estilos CSS de otro fichero */
@import url("index.css");

/* Media query para definir estilos de móvil */
@media screen and (max-width: 640px) {
.page {
width: 100%;
}
}

En general, se pueden colocar en cualquier parte de la hoja de estilos, tanto al principio, al medio como al final. Sin embargo, algunas reglas tienen ciertas restricciones. Por ejemplo, como comentaremos, en el caso de la regla @import debe colocarse en las primeras líneas del fichero.

Veamos a continuación que reglas CSS existen.

Reglas CSS

A continuación, podemos encontrar las siguientes reglas de CSS. Cada una pertenece a temáticas diferentes, en cada enlace profundizamos un poco sobre ellas:

Regla Descripción Enlace
@import Incluye una hoja de estilos externa, indicando su URL. Ver la regla @import
@charset Indicaba la codificación de carácteres usada en el fichero .css actual. Obsoleta. Ya no existe.
@supports Establece un bloque de estilos que se aplicará si se cumple la condición. Ver la regla @supports
@media Aplica los estilos si cumple las condiciones indicadas. Usado para responsive. Ver Media Queries
@keyframes Crea los fotogramas clave de una animación. Ver regla @keyframes
@scope Aplica estilos con un límite de ámbito en elementos descendientes. Aún sin soporte.
@font-face Indica una tipografía externa que el navegador debe descargar. Ver tipografías externas
@font-feature-values Activa/desactiva características especiales en una tipografía Ver caract. personalizadas
@when / @else Establece unos estilos si se cumple la condición y otros si no se cumple. Aún sin soporte.
@page Modifica propiedades relacionadas con una página impresa. Ver Medios paginados
@counter-style Indica el estilo que se utilizará en los contadores CSS. Ver Contadores CSS
@layer Establece que estilos se incluirán en una capa (que se fusionará más tarde). Ver la regla @layer

Cada una de ellas, la explicaremos en su sección específica.

Reglas de @font-feature-values

Las reglas que vemos a continuación, son reglas CSS especiales que sólo sirven dentro de la regla @font-feature-values mencionada anteriormente, para indicar la activación/desactivación de características especiales en tipografías concretas.

Entre ellas, podemos encontrar las siguientes reglas:

Regla Descripción Enlace
@stylistic Estalece características de estilo alternativas individuales. Ver características personalizadas
@historical-forms Establece glifos históricos. Ver características personalizadas
@styleset Establece un pack de características de estilo alternativas. Ver características personalizadas
@character-variant Establece variaciones en carácteres Ver características personalizadas
@swash Establece decoraciones artísticas (adornos tipográficos) Ver características personalizadas
@ornaments Establece glifos con adornos Ver características personalizadas
@annotation Establece formas notacionales de glifos Ver características personalizadas
Tabla de contenidos