CSS o Fulles d'estil en cascada, són les que s'utilitzen en el disseny del lloc web modern per aplicar l'aspecte visual a una pàgina. Mentre HTML crea l'estructura de la pàgina i Javascript pot manejar comportaments, l'aspecte d'un lloc web és el domini de CSS. Quan es tracta d'aquests estils, s'aplica més sovint amb fulls d'estils externs, però també podeu aplicar estils CSS a un element concret i específic mitjançant l'ús dels anomenats "estils en línia".
Els estils en línia són estils CSS que s'apliquen directament a l'HTML de la pàgina. Hi ha avantatges i desavantatges per a aquest enfocament. Primer, vegem exactament com estan escrits aquests estils.
Com escriure un estil en línia
Per crear un estil CSS en línia, comenceu per escriure la vostra propietat d'estil semblant a com ho faria en un full d'estils, però ha de ser tota una línia. Separeu diverses propietats amb un punt i coma tal com ho faria en un full d'estils.
antecedents: #ccc; color: #fff; frontera: 1px negre sòlid;
Col·loqueu aquesta línia d'estils dins de l'atribut style de l'element que vulgueu modelar. Per exemple, si voleu aplicar aquest estil a un paràgraf del vostre codi HTML, aquest aspecte quedaria així:
En aquest exemple, aquest paràgraf en particular apareixerà amb un fons gris clar (és el que representaria #cc), text negre (del color # 000) i amb un límit negre sòlid de 1 píxel al voltant dels quatre costats del paràgraf .
Avantatges dels estils en línia
Gràcies a la cascada dels estils en línia de fulls d'estils en cascada, teniu la major prioritat o especificitat d'un document. Això vol dir que s'aplicaran sense importar el que més es dicti en el vostre full d'estils extern (amb l'única excepció que qualsevol estil que tingui la declaració important d'aquest full, però això no és una cosa que s'hauria de fer en llocs de producció si es pot evitar).
Els únics estils que tenen una major prioritat que els estils en línia són els estils d'usuari aplicats pels mateixos lectors. Si teniu problemes per aplicar els vostres canvis, podeu provar d'establir un estil en línia a l'element. Si els estils encara no es mostren amb un estil en línia, sabeu que hi ha alguna cosa més.
Els estils en línia són fàcils i ràpids d'afegir i no cal que us preocupeu per escriure el selector CSS adequat ja que afegiu els estils directament a l'element que voleu canviar (aquest element substitueix substancialment el selector que escriurà en un full d'estil extern ). No cal crear un document nou (com amb fulls d'estils externs) o editar un element nou al capdavant del document (com ho fa amb els fulls d'estil interns). Acabeu d'afegir l'atribut d'estil que és vàlid en gairebé tots els elements HTML. Aquestes són totes les raons per les quals podeu estar temptat d'utilitzar els estils en línia, però també heu de tenir en compte alguns inconvenients molt importants d'aquest enfocament.
Desavantatges dels estils en línia
Com que els estils en línia són els més específics de la cascada, poden over-ride coses que no els vau voler fer. També neguen un dels aspectes més poderosos de CSS: la possibilitat d'aconseguir lots d'estil i moltes pàgines web d'un arxiu CSS central per fer que les actualitzacions i els canvis d'estil siguin molt més fàcils de gestionar.
Si només heu d'utilitzar els estils en línia, els vostres documents es tornarien ràpidament inflats i molt difícils de mantenir. Això es deu als estils en línia que s'han d'aplicar a tots els elements que vulgueu. Per tant, si voleu que tots els paràgrafs tinguin la família font "Arial", heu d'afegir un estil en línia a cada etiqueta
del vostre document. Això afegeix tant el treball de manteniment del dissenyador com el temps de descàrrega del lector, ja que hauríeu de canviar això a cada pàgina del vostre lloc per canviar-la. Alternativament, si utilitzeu un full d'estils separat, podeu canviar-lo en un sol lloc i rebre cada pàgina d'aquesta actualització.
De debò, això és un pas endarrerit en el disseny web: torna els dies de l'etiqueta .
Un altre inconvenient per als estils en línia és que no és possible classificar pseudo-elements i classes amb ells. Per exemple, amb fulls d'estils externs , podeu definir el color visitat, desplaçat, actiu i d' enllaç d'una etiqueta d'ancoratge, però amb un estil en línia, tot el que podeu fer és el mateix enllaç, perquè és l'atribut de l'estil .
En definitiva, es recomana no utilitzar estils en línia per a les vostres pàgines web perquè causen problemes i fan que les pàgines treballin molt més per mantenir. L'única vegada que els fem servir és quan volem revisar un estil ràpidament durant el desenvolupament. Un cop ho hàgim buscant adequat per a aquest element, el traslladem al nostre full d'estils extern.
Article original de Jennifer Krynin. Editat per Jeremy Girard.