12. Especificacions formals

 

Índex

Justificació

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.

Amb el pas del temps, el CSS ha experimentat diverses ampliacions. La versió 3 ha introduït, entre d'altres coses, el factor temps, i fa possible l'estil dinàmic; en alguns casos entra doncs en competència amb el llenguatge de programació Javascript, al qual farem una breu referència.

Fins ara hem presentat diverses especificacions d'estil sense donar-ne gaire explicacions; ara és el moment de tractar a fons les principals possibilitats que ofereixen.

 

Assignació d'estils des de HEAD

Quan es fa servir el CSS, sorgeixen dues preguntes bàsiques:

En aquest apartat i en els següents analitzarem primer la primera pregunta.

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.

 

Fulls d'estil exteriors

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 d'aquests 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.

Exemple

 

Aplicació directa d'estils sobre els elements

També és possible d'aplicar els estils individualment als elements. En aquest cas cal fer servir la fórmula

Exemple

 

Àmbits d'aplicació dels estils

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.

Exemple

 

Acumulació d'especificacions

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 dels elements es separen amb una coma:

Exemple

 

Els selectors

Un selector és una referència a un tipus d'element al qual s'ha d'aplicar un estil. Fins ara hem aplicat selectors simples, mitjançant els quals les especificacions d'estil s'apliquen a tots els exemplars d'un element determinat.

Hi ha, però, selectors compostos, que permeten restringir l'àmbit d'aplicació de les especificacions d'estil, i que analitzarem a continuació.

 

Les classes i els identificadors

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í:

Exemple

Si una especificació s'ha de fer servir en un sol punt, es pot fer servir un identificador. En aquest cas l'especificació és

i l'aplicació

Exemple

 

Especificacions contextuals

É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.

Exemple

També es pot seleccionar un element contingut immediatament en un altre. En aquest cas els separem amb el signe >. així, l'especificació

afectarà els SPAN inclosos a P, però no els compresos dins un altre element (LI, TD...

I amb l'expressió

i anàlogues afectem només el segon element quan segueix immediatament el primer.

Exemple

 

Precaucions en l'ús dels fulls d'estil

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.

 

Especificacions formals pròpies del navegador

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.

 

Antigues especificacions sense fulls d'estil

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 se'n poden veure sovint.

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.

 

 

Especificacions CSS1 i CSS2

 

El W3C ha establert successivament dues especificacions per als fulls d'estil CSS, anomenades level 1 (avui ja declarat obsolet) i level 2 (vigent):

W3C: Cascading Style Sheets, level 2 revision 1 (CSS 2.1)

A més, el W3C treballa en la formalització de l'especificació del CSS 3, de la qual s'ha publicat un esborrany. Un molt bon resum de les noves possibilitats es troba a

W3Schools

Cal advertir que només els navegadors més moderns reconeixen aquesta nova versió. Cal tenir-ho present alhora d'observar els exemples dels capítols següents.