Ús de CSS Site Wide
Els llocs web són una combinació d'estil i estructura, i en la web d'avui, és una bona pràctica mantenir aquests dos aspectes d'un lloc separats entre si.
HTML sempre ha estat el que proporciona un lloc amb la seva estructura. En els primers dies de la web, l'HTML també contenia informació d'estil. Elements com ara l'etiqueta estaven envoltats del codi HTML, afegint informació d'aparença i sensació al costat d'informació estructural. El moviment de normes web ens va impulsar a canviar aquesta pràctica i, en canvi, emportar tota la informació d'estil a CSS o Fulls d'estil en cascada. En fer un pas més enllà, les recomanacions actuals són que utilitzeu el que es coneix com un full d'estils extern per a les necessitats d'estil del vostre lloc web.
Avantatges i desavantatges de fulls d'estils externs
Una de les millors coses sobre fulls d'estil en cascada és que podeu utilitzar-los per mantenir coherent el vostre lloc sencer. La manera més senzilla de fer-ho és enllaçar o importar un full d'estils extern . Si utilitzeu el mateix full d'estils extern per a cada pàgina del vostre lloc, podeu estar segur que totes les pàgines tindran el mateix estil. També podeu fer més fàcil fer canvis per al futur. Atès que totes les pàgines utilitzen el mateix full d'estils extern, qualsevol canvi d'aquest full afectarà totes les pàgines del lloc. Això és molt millor que haver de canviar cada pàgina de manera individualitzada.
Avantatges de fulls d'estils externs
- Podeu controlar l'aparença de diversos documents alhora.
- Això és especialment útil si treballeu amb un equip de persones per crear el vostre lloc web. Moltes regles d'estil poden ser difícils de recordar, i si bé podeu tenir una guia d'estil imprès, és ineficient i tediós que continuï passant per ell per determinar si el text de l'exemple s'escriu en 12 punts de font Arial o missatgeria de 14 punts. Al tenir tot en un sol lloc, i ja que aquest lloc també és on faria canvis, podeu fer el manteniment molt més senzill.
- Podeu crear classes d'estils que es poden utilitzar en molts elements HTML diferents.
- Si utilitzeu sovint un tipus de lletra determinat per fer èmfasi en diverses coses a la vostra pàgina, podeu utilitzar un atribut de classe que configureu al vostre full d'estils per obtenir-ne un aspecte més que definir un estil específic per a cada instància del document. èmfasi.
- Podeu agrupar fàcilment els vostres estils per ser més eficients.
- Tots els mètodes d'agrupació disponibles per a CSS es poden utilitzar en fulls d'estils externs i això us proporciona més control i flexibilitat a les vostres pàgines.
Desavantatges de les fulles d'estil extern
- Els fulls d'estil externs poden augmentar el temps de descàrrega, especialment si són molt grans. Atès que el fitxer CSS és un document separat que s'ha de carregar, tindrà un impacte en el rendiment per realitzar aquesta descàrrega.
- Els fulls d'estil externs s'obtenen molt ràpidament, ja que és difícil saber quan un estil ja no s'utilitza perquè no se suprimeix quan s'elimina la pàgina. La gestió adequada dels vostres fitxers CSS és important, especialment si hi ha diverses persones que treballen en el mateix fitxer.
- Si només teniu un lloc web de pàgina única, és possible que no tingueu un fitxer extern per a CSS, ja que només teniu una pàgina a l'estil. Molts dels avantatges del CSS extern es perden quan només teniu un lloc de pàgina única.
Com crear una fulla d'estils externs
Els fulls d'estil externs es creen amb una sintaxi similar als fulls d'estil del nivell de document. Tanmateix, tot el que necessiteu per incloure són el selector i la declaració. Igual que en un full d'estils de nivell de document, la sintaxi per a una regla és:
selector {property: value;}Deseu aquestes regles en un fitxer de text amb l'extensió .css. Això no és necessari, però és un bon hàbit d'entrar, de manera que podeu reconèixer immediatament els vostres fulls d'estil en una llista de directoris.
Un cop tingueu un document de full d'estils, heu d'enllaçar-lo a les vostres pàgines web . Això es pot fer de dues maneres:
- Vinculació
- Per enllaçar un full d'estils, utilitzeu l'etiqueta HTML. Això té els atributs rel , tipus i href . L'atribut rel indica què està enllaçant (en aquest cas un full d'estils), el tipus defineix el tipus MIME per al navegador, i el href és la ruta d'accés al fitxer .css.
- Importació
- Utilitzareu un full d'estil importat dins d'un full d'estils de nivell de document, de manera que pugueu importar els atributs d'un full d'estils externs sense perdre cap document específic. El truques d'una manera similar a cridar un full d'estil vinculat, només s'ha de trucar dins d'una declaració d'estil a nivell de document. Podeu importar tants fulls d'estil externs que necessiteu per mantenir el vostre lloc web.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 8/8/17