Inicialment l'HTML es va desenvolupar en un entorn científic on es donava prioritat als aspectes estructurals i de contingut per sobre dels formals. L'èxit de l'eina va fer que progressivament s'hi anessin incorporant recursos orientats a una presentació formalment més rica. Però aquesta barreja constitueix una nosa si considerem que un mateix document pot anar adreçat a més d'un intèrpret, no únicament a la pantalla d'ordinador tradicional. Avui doncs es tendeix a separar els aspectes estructurals dels formals: el W3C recomana fer servir els anomenats fulls d'estil, eina independent orientada exclusivament als aspectes formals.
Les codificacions CSS (Cascading Style Sheets) permeten determinar amb gran precisió i amb moltes més opcions que no pas el llenguatge HTML la forma de presentació dels documents.
El W3C ha declarat desaconsellats alguns dels recursos que havia anat adquirint l'HTML, com és ara l'element FONT; tanmateix alguns recursos formals de l'HTML són encara d'ús freqüent, i és impossible no referir-s'hi.
Fins ara hem presentat diverses especificacions d'estil sense donar-ne gaire explicacions; ara és el moment de tractar a fons totes les possibilitats que tenen.
L'assignació d'estils es realitza de diverses maneres; la més elemental i bàsica consisteix a especificar-los a HEAD. Això s'aconsegueix amb la fórmula següent:
on element són els elements definits per l'HTML (BODY, TABLE, P, A, BLOCKQUOTE, etc.), atribut són les diverses característiques formals que s'hi poden assignar (mida, color, etc.) i valor el valor desitjat per a cada atribut.
Així
significa que l'element H1 ha d'anar centrat.
Sovint hi ha molts documents de contingut diferent però amb el mateix aspecte. En aquests casos és molt avantatjós poder determinar una sola vegada les qüestions d'estil. Això s'aconsegueix situant els estils en un document independent exterior.
Aquests són simples arxius de text, als quals donem la terminació .css. A l'interior hi ha les especificacions d'estil, amb el mateix format però sense les etiquetes <style>...</style>).
En els documents afectats s'invoca el full d'estil posant a HEAD
on adreça (curta o llarga, segons convingui) indica el fitxer que conté les especificacions.
També és possible d'aplicar els estils individualment als elements. En aquest cas cal fer servir la fórmula
Un mateix document pot tenir especificacions d'estil diverses i fins i tot contradictòries. En aquests casos cal tenir molt presents els criteris que en regulen l'àmbit d'aplicació:
Per exemple, si especifiquem un tipus de lletra i un color de lletra a BODY, no fem cap especificació per als elements P i en fem una de diferent per a BLOCKQUOTE, els elements P heretaran l'especificació continguda a BODY pel que fa al tipus de lletra i al color; els elements BLOCKQUOTE seran presentats amb la seva especificació pròpia de tipus de lletra, però amb el color especificat a BODY i que no ha estat modificat a un nivell inferior.
Els elements DIV i SPAN són molt útils per a fer encara més flexible l'aplicació dels estils.
Molt sovint volem crear dues o més varietats formals d'un determinat element (per exemple, dues varietats diferents de paràgrafs). Aquestes varietats s'anomenen classes.
Les diferents classes es designen lliurement (el nom ha de començar per una lletra). A HEAD el nom de cada classe s'uneix al de l'element corresponent mitjançant un punt:
A BODY les classes s'indiquen amb l'especificació
Així, un paràgraf que pertanyi a la classe n serà designat així:
Si una especificació d'ha de fer servir en un sol punt, es pot fer servir un identificador. En aquest cas l'especificació és
i l'aplicació
Si hi ha més d'una especificació formal per a cada tipus d'element, aquestes es poden expressar alhora; n'hi ha prou de separar-les amb punt i coma:
Inversament, si una mateixa especificació afecta dues o més etiquetes, també es poden expressar alhora; en aquest cas els símbols del elements es separen amb una coma:
Les acumulacions d'estils no són reconegudes per alguns navegadors antics; la compatibilitat millora especificant-los d'un en un.
És possible d'assignar una especificació a un element en un context donat; per a això cal especificar el context mitjançant una seqüència d'elements, no necessàriament consecutius, del més general al més particular. Així, l'especificació
afectarà els elements LI inclosos dins un element UL, però no els inclosos dins un element OL. Notem bé que en aquest cas, a diferència del que fem en l'acumulació d'especificacions, no separem els tipus d'elements amb comes.
També és previst de poder exigir que el segon element de la seqüència sigui directament consecutiu al primer, és a dir, que formi part d'aquest directament, sense cap element intermedi. En aquest cas els separem amb el signe >. així, l'especificació
afectarà els P inclosos directament a BODY, però no els compresos dins un element DIV o BLOCKQUOTE. Aquesta darrera modalitat, però, no és reconeguda per alguns navegadors.
Quan es fan servir fulls d'estil, convé no oblidar quina és la seva finalitat primera: separar els aspectes estructurals dels aspectes formals.
El cas és, però, que la mateixa potència dels fulls d'estil és enemiga del manteniment de l'estructura. La majoria dels atributs és aplicable a la majoria de les etiquetes, de manera que és tècnicament possible, per exemple, crear un document en què dins de BODY només hi hagi elements P, dividits en classes, i prescindir totalment dels elements H1, H2, etc, BLOCKQUOTE, UL, OL, etc.
Una pràctica com la descrita, que reduiria a no res el concepte d'estructura, és totalment desaconsellable.
Abans de l'aparició dels fulls d'estil, els atributs formals s'especificaven mitjançant el codi HTML sol, amb una d'aquestes dues fórmules:
El W3C desaconsella genèricament l'ús d'aquests procediments, i n'ha declarat molts formalment rebutjats; però per diverses raons encara s'usen sovint. Indicarem en vermell els rebutjats formalment i en verd els tolerats.
Així per exemple
on s'estableix que el color de fons del document ha d'ésser vermell.
on s'indica que el paràgraf s'ha de presentar amb lletra del tipus Tahoma.
El recurs preferit ha d'ésser, sense cap mena de dubte, el dels fulls d'estil; els avantatges que aquests ofereixen són de dos tipus:
Cal tenir present que els navegadors contenen determinades especificacions de format (tipus de lletra, color, etc.). Sempre que l'autor del document deixa de fixar-hi alguna especificació, s'entén que s'hi aplicaran les que tingui establertes el navegador.
Els navegadors permeten modificar algunes de les especificacions per defecte i, en alguns casos, poden fins i tot establir la preeminència de les seves sobre les que el creador del document HTML hagi establert.
Especificacions CSS1 i CSS2 |
||
|
El W3C ha establert dues especificacions per als fulls d'estil CSS, anomenades level 1 i level 2:
En aquest tema i en els següents s'exposen els recursos més emprats. |
||