Però durant la codificació, és difícil incloure les mateixes propietats CSS per a totes i cadascuna de les pàgines web per separat. Per tant, cal utilitzar una solució a través de la qual es pugui crear un sol full d'estil i després accedir fàcilment a diversos fitxers.
Què és la regla @import en CSS?
La millor manera d'incloure les propietats d'estil CSS és utilitzant la regla @import. @import s'utilitza per importar o accedir a un full d'estil CSS des d'un altre full d'estil. Això redueix l'esforç del desenvolupador, ja que totes les propietats afegides al full d'estil importat s'implementen directament escrivint @import i després el nom exacte del full d'estil.
Sintaxi de la regla @import
La sintaxi per afegir la regla @import per accedir a un full d'estil des d'un altre full d'estil és la següent:
@import 'stylesheetname.css' ;
La regla @import també es pot afegir pel mètode següent:
@import url ( stylesheetname.css ) ;
Simplement, afegiu el nom del fitxer del full d'estil CSS entre comes invertides o entre claudàtors amb ' url 'després d'escriure' @import ”.
Exemple: afegint una regla @import
Per entendre com funciona la regla @import, escrivim un fragment de codi senzill:
< h1 > Aquest és un text senzill! < / h1 >Al fragment de codi anterior, hi ha un encapçalament
amb una simple frase d'una línia afegida en un document HTML. Aquest codi senzill generarà la següent sortida:
Permet crear un full d'estil per definir algunes propietats CSS que després es poden importar del fitxer a través del qual es crea la interfície de la pàgina web anterior. Creem un altre fitxer i li anomenem ' full d'estil ” amb el tipus de fitxer declarat com a “ css ”, i simplement afegiu algunes propietats per a l'encapçalament i el cos
: h1 {
color : blau mitjanit ;
color de fons : atzur ;
alineació de text : centre ;
}
cos {
color de fons : blau clar ;
}
Per accedir al fitxer del full d'estil que conté les propietats d'estil per a l'encapçalament i el cos
, només hem d'afegir la regla @import a qualsevol dels fitxers CSS on aquest estil sigui necessari.
Afegir només una regla simple @import implementarà totes les propietats d'estil a la interfície de la pàgina web sense haver d'escriure les propietats per separat a cada pàgina web.
Per tant, cal escriure la regla @import com:
@import 'stylesheet.css' ;Afegint la regla @import escrivint ' url ” i el nom del fitxer CSS entre claudàtors també mostrarà els mateixos resultats:
@import url ( full d'estil.css ) ;Les propietats definides a la ' full d'estil ' s'implementen només afegint un senzill ' @import ” regla per això:
Aquesta és la manera més senzilla d'incloure les propietats CSS en un fitxer sense cap esforç addicional.
Beneficis de la regla @import en CSS
La regla @import s'utilitza habitualment pels motius següents:
- L'ús de la regla @import redueix el temps i l'esforç del desenvolupador, ja que implementa totes les propietats d'un full d'estil concret només escrivint el nom d'aquest full després de @import.
- En aplicacions web grans i complexes, la regla @import demostra ser molt avantatjosa, ja que les mateixes propietats d'estil es poden implementar en diversos fitxers només afegint el nom del fitxer del full d'estil.
- Els elements del full d'estil com les capçaleres, els peus de pàgina, el cos, etc. es poden emmagatzemar en fitxers de full d'estil separats i, després, mitjançant la regla @import, es pot importar qualsevol dels estils necessaris sense necessitat d'afegir, eliminar o comentar propietats d'estil d'un dossier.
Això resumeix l'ús de la regla @import i explica com aquesta regla es considera el millor mètode per incloure CSS.
Conclusió
Es pot importar o accedir a un full d'estil CSS directament des d'un altre full d'estil i totes les propietats del full d'estil importat s'implementen directament a la pàgina web del fitxer on s'ha importat. No cal escriure totes i cadascuna de les propietats CSS per separat per a cada interfície de pàgina web. Tot el que cal és afegir el nom del fitxer del full d'estil CSS amb @import. I, aquest es considera el millor mètode per afegir CSS.