Hi ha diverses maneres d'aplicar els estils CSS a una pàgina web, inclosos els fulls d'estil externs o fins i tot els estils en línia. Si utilitzeu un full d'estils extern, que és la manera recomanada de dictar l'aspecte d'un document HTML, cal utilitzar un enfocament
@import.
El
@import La regla us permet obtenir fulls d'estil externs importants al document, ja sigui en una pàgina HTML o fins i tot en altres documents CSS. Es trenca molts estils en una sèrie d'arxius més petits i centrats (un per a la disposició, un per a la tipografia, un per a imatges, etc.) a vegades pot fer que els fitxers i el estil que continguin sigui més fàcil. Si voleu gaudir d'aquest avantatge, importeu aquests diversos fitxers és el que heu de fer perquè tots funcionin per a la visualització de la vostra pàgina web.
Importació a HTML
Per utilitzar el
@import En el vostre codi HTML, afegiu el següent al
del document:
:
Aquest codi ara importaria aquest full d'estil per utilitzar-lo en aquesta pàgina HTML i podríeu gestionar tots els vostres estils en un sol arxiu. El desavantatge d'importants fulls d'estil d'aquesta manera és que aquest mètode no permet realitzar descàrregues paral·leles. La pàgina ha de descarregar un full d'estils complet abans de passar a la resta de la pàgina, inclosos els altres fitxers CSS que esteu important mitjançant aquest mètode. Això tindrà un efecte negatiu en la velocitat i el rendiment de la vostra pàgina. Tenint en compte la importància del rendiment de la pàgina a l'èxit del lloc web, aquest inconvenient per si sol pot ser un motiu pel qual voleu evitar utilitzar @import.
Enfocament alternatiu
Com a alternativa a l'ús
@import en el teu HTML, pots enllaçar a aquest fitxer CSS d'aquesta manera:
Això funciona de manera molt similar al
@import ja que permet gestionar tots els vostres CSS des d'una ubicació / fitxer central, però aquest mètode és preferible des d'una perspectiva de descàrrega. Si encara voleu segmentar diferents tipus d'estils en fitxers separats, podeu continuar fent-ho i utilitzar la funcionalitat @import dins del vostre fitxer CSS mestre. Això vol dir que els vostres fitxers CSS externs encara es poden gestionar individualment, però com que tots importen en un mestre CSS, el rendiment es millora.
Importació a CSS
Utilitzant el
L'exemple de codi anterior portaria el fitxer "default.css" a utilitzar a la vostra pàgina HTML. A l'interior d'aquest fitxer CSS, tindreu diversos estils de pàgina. Podeu tenir tots els estils detallats en una pàgina, o podeu utilitzar @import per separar-los per a una gestió més senzilla. Una vegada més, diguem que estem utilitzant 4 fitxers CSS separats: un per al disseny, un per a la tipografia i un per a les imatges. El quart fitxer és el nostre fitxer "mestre" que és el que connecta la nostra pàgina (per a aquest exemple, això és "default.css"). A la part superior d'aquest arxiu mestre CSS podem afegir les regles que es mostren a continuació:
@import url ('/ styles / layout.css'); @ url d'importació ('/ styles / type.css'); @ url d'importació ('/ styles / images.css');
Tingueu en compte que aquestes regles haver de Aneu a tots els altres continguts del vostre fitxer CSS perquè funcionin. No podeu tenir cap altre estil CSS abans d'aquestes regles d'importació.
A sota d'aquestes regles d'importació, podeu afegir qualsevol altre estils CSS que vulgueu tenir al vostre full predeterminat. Quan es carregui aquest fitxer CSS principal, primer importarà aquests fitxers separats i afegirà els estils a la part superior del full d'estils. A continuació, tindreu tots els altres estils a sota d'aquests importats, creant el fitxer CSS complet que el navegador web usarà per mostrar el vostre lloc. Obté el benefici de gestionar fitxers més petits i més centrats mentre encara teniu un únic full d'estils vinculat a aquest HTML.
Ús de @import per consultes de mitjans
Una cosa que pot considerar fer-ho separant les consultes dels vostres llocs web als estils de llocs web responsables en un fitxer separat. Atès que aquests estils de resposta poden ser confusos quan es veuen juntament amb les altres regles d'estil del vostre lloc, tenir-les en un arxiu diferent pot ser atractiu. Una preocupació per aquest enfocament és que, des de la vostra
@import Les regles han de ser les primeres, això significa que les vostres consultes de mitjans es carregaran abans que la resta dels estils del vostre lloc. Quan creeu un lloc de resposta mòbil primer que tingui en compte el rendiment, és probable que això sigui un problema. Per aquest motiu, es suggereix que no separeu els estils de resposta del vostre lloc per separat i l'utilitzeu
@import per portar-los al vostre lloc. Sí, pot semblar que hi ha beneficis de fer-ho, però els inconvenients superen aquests beneficis.
Necessito utilitzar @import?
No, tu no. Molts llocs simplement mostren tots els seus estils principals dins d'un arxiu i, tan gran com aquest arxiu pot ser, es gestiona d'aquesta manera (així és com ho faig en el meu propi treball). Si trobeu
@import útil, llavors pot ser part del vostre flux de treball. En cas contrari, podeu crear pàgines web amb seguretat el vostre full d'estils individual de totes les vostres regles CSS.
Suport del navegador
Els navegadors molt antics tenen problemes amb algunes d'aquestes regles d'importació, però és poc probable que aquests navegadors siguin un problema per a vostè en aquests dies. Això és especialment cert ara que el termini de finalització de vida de les versions anteriors d'Internet Explorer ha passat. En definitiva, si decideix utilitzar-lo
@import regles en el vostre codi HTML o CSS, no hauríeu d'executar problemes amb versions heretats dels navegadors web, tret que tinguis una estranya necessitat de suportar versions increïblement antigues d'IE.
Editat per Jeremy Girard
