Fulls d'estil integrats, incrustats i externs: aquí teniu el que heu de saber
El desenvolupament de llocs web de primera mà sovint es representa com un tamboret de 3 potes. Aquestes cames són les següents:
La segona etapa d'aquest tamboret, CSS o Fulls d'estil en cascada, és el que estem observant aquí avui mateix. Concretament, volem abordar els 3 tipus d'estils que podeu afegir a un document.
- Estils en línia
- Estils incorporats
- Estils externs
Cadascun d'aquests tipus d'estils CSS té els seus avantatges i desavantatges, així que fem una ullada més profunda a cadascun d'ells de manera individual.
Estils en línia
Els estils en línia són estils que s'escriuen directament a l'etiqueta del document HTML. Els estils en línia només afecten l'etiqueta específica a la qual s'apliquen. Aquí teniu un exemple d'un estil en línia aplicat a un enllaç estàndard, o àncora, etiqueta:
Aquesta regla CSS converteix la decoració de text subratllada estàndard d'aquest enllaç. Tanmateix, no canviaria cap altre enllaç a la pàgina. Aquesta és una de les limitacions dels estils en línia. Com que només canvien en un element específic, haureu d'esborrar el vostre HTML amb aquests estils per aconseguir un disseny de pàgina real. Aquesta no és una bona pràctica. De fet, s'elimina un pas dels dies de les etiquetes "font" i la barreja d'estructura i estil a les pàgines web.
Els estils en línia també tenen una especificitat molt alta.
Això els fa molt difícils de sobreescriure amb altres estils no inserits. Per exemple, si voleu fer que un lloc sigui sensible i canviar com un element mira determinats punts d'interrupció utilitzant consultes multimèdia , els estils en línia d'un element faran que això sigui molt difícil de fer.
En última instància, els estils en línia són realment apropiats quan s'utilitzen molt poc.
De fet, rarament utilitzo estils en línia a les meves pàgines web.
Estils incrustats
Els estils incorporats són estils que s'inclouen al capdavant del document. Els estils incorporats només afecten les etiquetes de la pàgina en què s'inclouen. Un cop més, aquest enfocament nega una de les fortaleses de CSS. Atès que cada pàgina tindria estils a la
, si volíeu fer un canvi de lloc, com canviar el color dels enllaços de vermell a verd, haureu de fer aquest canvi a cada pàgina, ja que cada pàgina utilitza un full d'estil incrustat. Això és millor que els estils en línia, però encara és problemàtic en molts casos.
Fulls d'estils que s'afegeixen al
d'un document també afegeix una quantitat significativa de codi de marques a aquesta pàgina, que també pot fer que la pàgina sigui més difícil de gestionar en el futur.
El benefici dels fulls d'estil incrustats és que la càrrega immediatament amb la pàgina en si, en lloc de requerir que es carreguin altres fitxers externs. Això pot ser beneficiós d'una velocitat de descàrrega i una perspectiva de rendiment .
Fulls d'estil externs
La majoria de llocs web avui en dia utilitzen fulls d'estil externs. Els estils externs són estils que s'escriuen en un document separat i que s'adjunten a diversos documents web. Els fulls d'estil externs poden afectar qualsevol document al que estiguin connectats, el que significa que si teniu un lloc web de 20 pàgines on cada pàgina utilitza el mateix full d'estils (normalment es fa com fer-ho), podeu fer un canvi visual a cadascun d'aquestes pàgines simplement editant aquest full d'estil.
Això facilita molt la gestió del lloc a llarg termini.
L'inconvenient dels fulls d'estil externs és que requereixen pàgines per buscar i carregar aquests fitxers externs. No totes les pàgines utilitzaran tots els estils del full CSS, de manera que moltes pàgines carreguin una pàgina CSS molt més gran que la que realment necessita.
Tot i que és cert que hi ha un èxit de rendiment per als fitxers CSS externs, sens dubte es pot minimitzar. De manera realista, els fitxers CSS són només fitxers de text, pel que en general no són molt grans per començar. Si tot el vostre lloc fa servir un fitxer CSS, també obtindreu el benefici que aquest document es mantingui en memòria cau després de carregar-se inicialment.
Això vol dir que algunes visites poden tenir un lleuger cop d'èxit a la primera pàgina, però les pàgines posteriors faran servir el fitxer CSS emmagatzemat a la memòria cau, de manera que es negaria qualsevol resultat. Els fitxers CSS externs són com es creen totes les meves pàgines web.