Al desarrollar sitios web y aplicaciones web, a menudo se requiere el mismo estilo en cada página web para mantener la consistencia de la aplicación web. Por ejemplo, si los colores de la página principal de una aplicación web son una combinación de rosa y morado, se verá extraño si la página siguiente de la aplicación web es de cualquier otro color como el negro y el naranja.

Pero mientras codifica, es difícil incluir las mismas propiedades CSS para cada página web por separado. Por lo tanto, se requiere usar una solución a través de la cual se puede crear una sola hoja de estilo y luego acceder fácilmente mediante múltiples archivos.

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

La mejor manera de incluir las propiedades de estilo CSS es usar la regla @import. @Import se usa para importar o acceder a una hoja de estilo CSS desde otra hoja de estilo. Esto reduce el esfuerzo del desarrollador ya que todas las propiedades agregadas en la hoja de estilo importada se implementan directamente escribiendo @import y luego el nombre exacto de la hoja de estilo.

Sintaxis de la regla @import

La sintaxis para agregar la regla @import para acceder a una hoja de estilo desde otra hoja de estilo es la siguiente:

@import "StylesheetName.CSS ";

La regla @Import también se puede agregar mediante el siguiente método:

@Import URL (StylesheetName.CSS);

Simplemente, agregue el nombre del archivo CSS Stylesheet en comas invertidas o en soportes redondos con "url"Después de escribir"@importar".

Ejemplo: agregar @import regla

Para comprender cómo funciona la regla @import, escribimos un fragmento de código simple:

Este es un texto simple!

En el fragmento de código anterior, hay un

encabezarse con una oración simple de una línea agregada en un documento HTML. Este simple código generará la siguiente salida:

Creemos una hoja de estilo para definir algunas propiedades de CSS que luego se pueden importar desde el archivo a través del cual se crea la interfaz de la página web anterior. Creamos otro archivo y lo nombramos "hoja de estilo"Con el tipo de archivo declarado como"CSS", Y simplemente agregue algunas propiedades para

encabezado y cuerpo:

H1
Color: MidnightBlue;
Color de fondo: Azure;
Text-Align: Center;

cuerpo
Color de fondo: LightBlue;

Para acceder al archivo de hoja de estilo que contiene las propiedades de estilo para

encabezado y cuerpo, simplemente necesitamos agregar la regla @import en cualquiera de los archivos CSS donde se necesita ese estilo.

Agregar solo una regla simple @import implementará todas las propiedades de estilo a la interfaz de la página web sin tener que escribir las propiedades por separado en cada página web.

Entonces, se requiere escribir la regla @import como:

@import "Hojas de estilo.CSS ";

Agregar la regla @Import escribiendo "url"Y el nombre del archivo CSS en los soportes redondos también mostrará los mismos resultados:

@Import URL (hojas de estilo.CSS);

Las propiedades definidas en el "hoja de estilo"El archivo se implementa simplemente agregando un simple"@importar"Regla para ello:

Esta es la forma más fácil de incluir las propiedades CSS en un archivo sin ningún esfuerzo adicional.

Beneficios de la regla @import en CSS

La regla @Import se usa comúnmente por las siguientes razones:

• El uso de la regla @Import reduce el tiempo y el esfuerzo del desarrollador, ya que implementa todas las propiedades de una hoja de estilo particular simplemente escribiendo el nombre de esa hoja después de @import.
• En aplicaciones web grandes y complejas, la regla @import demuestra ser muy ventajosa ya que las mismas propiedades de estilo se pueden implementar en varios archivos simplemente agregando el nombre del archivo de hoja de estilo.
• Los elementos de hoja de estilo, como encabezados, pies de página, cuerpo, etc., se pueden almacenar en archivos de hoja de estilo separados, y luego mediante el uso de la regla @import, cualquiera de los estilo requerido se puede importar sin necesidad de agregar, eliminar o hacer comentarios de propiedades de estilo de un archivo.

Esto resume el uso de la regla @import y explica cómo se considera esta regla el mejor método para incluir CSS.

Conclusión

Se puede importar o acceder a una hoja de estilo CSS directamente desde otra hoja de estilo y todas las propiedades en la hoja de estilo importada se implementan directamente en la página web del archivo donde se ha importado. No es necesario escribir todas y cada una de las propiedades CSS por separado para cada interfaz de la página web. Todo lo que se necesita es agregar el nombre del archivo de hoja de estilo CSS con @import. Y este se considera el mejor método para agregar CSS.