¿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
@media Aplica estilos dependiendo de características de la pantalla (responsive). Ver Media Queries
@container Aplica estilos dependiendo de un elemento contenedor. Ver Container Queries
@page Modifica propiedades relacionadas con una página impresa. Ver Medios paginados
@keyframes Crea los fotogramas clave de una animación. Ver regla @keyframes
@scope Aplica estilos con un límite de ámbito en elementos descendientes. Ver regla @scope
@layer Establece que estilos se incluirán en una capa (que se fusionará más tarde). Ver la regla @layer
@property Indica el tipo de dato de una variable CSS, aplicando ciertas ventajas. Ver regla @property
@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
@font-palette-values Permite personalizar los valores por defecto de la propiedad font-palette. -
@supports Establece un bloque de estilos que se aplicará si se cumple la condición. Ver la regla @supports
@when / @else Establece unos estilos si se cumple la condición y otros si no se cumple. ⚠️ Aún sin soporte.
@function Crea una función CSS que dada una entrada, produce una salida de CSS. ⚠️ Aún sin soporte.
@mixins / @apply Crea un grupo de propiedades CSS que se pueden aplicar o reutilizar. ⚠️ Aún sin soporte.
@counter-style Indica el estilo que se utilizará en los contadores CSS. Ver Contadores CSS
@color-profile Define un perfil de color específico que podrá usarse con la función color(). -
@namespace Define un espacio de nombres XML para utilizar en CSS. -
@starting-style Define valores iniciales de un elemento al que aplicarás una transición CSS. Ver Transiciones CSS
@position-try Crea posiciones de ancla (Anchor Position) alternativas. -
@charset Indicaba la codificación de carácteres usada en el fichero .css actual. Obsoleta. No usar.

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

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev