Pero al codificar, es difícil incluir las mismas propiedades CSS para todas y cada una de las páginas web por separado. Por lo tanto, se requiere utilizar una solución a través de la cual se pueda crear una sola hoja de estilo y luego acceder fácilmente a múltiples archivos.
¿Qué es la regla @import en CSS?
La mejor forma de incluir las propiedades de estilo CSS es mediante 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 con solo escribir @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:
@importar 'nombrehojaestilo.css' ;
La regla @import también se puede agregar mediante el siguiente método:
@importar URL ( nombrehojaestilo.css ) ;
Simplemente, agregue el nombre del archivo de hoja de estilo CSS entre comillas o entre corchetes con ' URL ” después de escribir “ @importar ”.
Ejemplo: Adición de la regla @import
Para comprender cómo funciona la regla @import, escribimos un fragmento de código simple:
< h1 > ¡Este es un Texto Simple! < / h1 >En el fragmento de código anterior, hay un encabezado
con una oración simple de una línea agregada en un documento HTML. Este código simple generará el siguiente resultado:
Vamos a crear una hoja de estilo para definir algunas propiedades 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 el encabezado y el cuerpo
: h1 {
color : azul medianoche ;
color de fondo : azur ;
texto alineado : centro ;
}
cuerpo {
color de fondo : azul claro ;
}
Para acceder al archivo de hoja de estilo que contiene las propiedades de estilo para el encabezado y el cuerpo
, simplemente debemos agregar la regla @import en cualquiera de los archivos CSS donde se necesita ese estilo.
Agregar solo una regla @import simple implementará todas las propiedades de estilo en 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:
@importar 'hoja de estilo.css' ;Agregando la regla @import escribiendo “ URL ” y el nombre del archivo CSS entre corchetes también mostrarán los mismos resultados:
@importar URL ( hoja de estilo.css ) ;Las propiedades definidas en el “ hoja de estilo ” se implementan 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 la hoja de estilo, como encabezados, pies de página, cuerpo, etc., se pueden almacenar en archivos de hojas de estilo separados y, luego, mediante el uso de la regla @import, cualquiera de los estilos requeridos se puede importar sin necesidad de agregar, eliminar o comentar las propiedades de estilo de un archivo. archivo.
Esto resume el uso de la regla @import y explica cómo esta regla se considera el mejor método para incluir CSS.
Conclusión
Una hoja de estilo CSS se puede importar o acceder directamente desde otra hoja de estilo y todas las propiedades de 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 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.