"@"Se usa el símbolo para agregar reglas en CSS. Las reglas agregadas a través del "@"Símbolo se llaman el"a las reglas". Estas reglas minimizan el esfuerzo del desarrollador de diferentes maneras. Las operaciones que "a las reglas"Performa está importando propiedades CSS directamente sin necesidad de escribir o copiar Paste todas las propiedades de CSS en cada archivo, aplicar propiedades en ciertos medios y descargar y aplicar directamente las fuentes al contenido de la página web.

Los siguientes son los principales "a las reglas"En CSS:

• La regla @Import
• La regla de @media
• La regla de @font-face

Discutamos brevemente cada uno de los tres "a las reglas"Para entender cómo funcionan.

¿Cuál es la regla @import en CSS??

El "@importar"La regla en CSS se utiliza para importar una hoja de estilo CSS de otra hoja de estilo. Si hay una hoja de estilo CSS que contiene propiedades o instrucciones de estilo para diferentes elementos de una página web y es necesario agregar el mismo estilo a otro archivo de la página web, escribiendo solo ""@importar"Con el nombre de esa hoja de estilo (que contiene propiedades CSS) en el lado derecho en cualquier paréntesis redondos con"url"O en comas invertidas puede importar todas las propiedades de esa hoja de estilo y aplicarlas directamente a la hoja de estilo donde"@importar"Se ha agregado la regla.

Sintaxis

Debe haber el nombre del archivo de hoja de estilo formateado CSS escrito después "@importar". Entonces, la sintaxis para agregar "@importar"La regla en una hoja de estilo es la siguiente:

@import "StylesheetName.CSS ";

La regla de importación también se puede escribir como la siguiente para el mismo propósito que también generará el mismo resultado:

@Import URL (StylesheetName.CSS);

¿Cuál es la regla de @media en CSS??

El "@medios de comunicación"La regla se usa para agregar instrucciones de medios a la página web. Esta regla funciona de acuerdo con la condición aplicada al agregar esta regla. La condición se agrega justo después de agregar "@medios de comunicación"En el lado derecho y luego dentro de la regla en los soportes rizados están las propiedades o las instrucciones que deben implementarse cuando la condición sea verdadera.

Ejemplo: aplicar la regla de @media

Para comprender a través de un ejemplo, podemos agregar algo de contenido a la página web:

Bienvenido al tutorial de Linuxhint!

En el fragmento de código anterior, hay un encabezado creado para mostrar esto como contenido de la página web.

Tomemos un ejemplo de agregar instrucciones de medios cuando las dimensiones o el ancho de la página aumente o disminuya. Primero, escribe "@medios de comunicación"Y luego agregue la condición y luego en los soportes rizados defina las propiedades de CSS que deben implementarse si la condición con"@medios de comunicación"Se vuelve verdadero:

@Media (max-width: 700px)
.mi clase
de color negro;
Antecedentes: verde;


@Media (Min-Width: 700px) y (Max-Width: 900px)
.mi clase
de color negro;
Antecedentes: amarillo;


@Media (Min-Width: 900px)
.mi clase
de color negro;
Antecedentes: cian;

En el código anterior, se han mencionado diferentes tamaños de ancho como la condición de tres reglas de medios diferentes para ejecutar en consecuencia. Por ejemplo, según el código anterior, cuando el ancho mínimo será de 700 px, el color de fondo del texto cambiará a amarillo.

El siguiente será el resultado generado a través del código anterior. Cambiar el tamaño de la pantalla cambiará los colores de fondo del texto:

¿Cuál es la regla de @font-face en CSS??

La regla de Fontface es un método fácil para agregar estilos de fuente directamente a la página web. Las fuentes se descargan directamente y se aplican al texto a través de esta regla.

Ejemplo: aplicar la regla de la cara de la fuente

Entendamos el método para agregar el "@Perfil delantero"Regla a través de un ejemplo simple:

Bienvenido al tutorial de Linuxhint!

El fragmento de código anterior tiene el mismo encabezado de texto que se describe en la sección anterior de esta publicación.

Implementemos el "@Perfil delantero"Regla para el"

"Dirigiéndose para cambiar su fuente:

@Perfil delantero
Font-Family: "DeJavu Sans";
SRC: URL ("./fuentes/dejavusanos.ttf ") format (" ttf ");
Font-peso: 500;

H1
Font-Family: 'Dejavu Sans';
Font-peso: 500;

En el fragmento de código anterior, existe el nombre de la familia de fuentes que se requiere y luego el "url"Enlace desde donde se supone que se descarga la fuente y luego el peso de la fuente. Cuando la cara de la fuente se especifica a través del "@Perfil delantero"Regla, el nombre de la cara de la fuente se puede usar con cualquier elemento, como en este código se ha utilizado para el"H1" título.

Ejecutar este código cambiará la fuente de acuerdo con las instrucciones mencionadas en el "@Perfil delantero" regla. Lo siguiente será la salida del fragmento de código anterior:

Esto resume el propósito del "@"Símbolo en CSS.

Conclusión

El "@"Se usa el símbolo en CSS para agregar"a las reglas"En CSS. Estas reglas realizan tareas muy útiles mientras usan CSS para diseñar los documentos I.mi. Importan hojas de estilo completo de otro archivo CSS a través del "@importar"Regla, aplique propiedades CSS en medios definidos de acuerdo con las condiciones a través de"@medios de comunicación"Regla, y descargue directamente las fuentes para usar en la página web a través del"@Perfil delantero" regla.