Continguts:

1. Valors especificats, valors calculats i valors reals
1.1. Valors especificats
1.2. Valors calculats
1.3. Valors reals
2. L'herència
2.1. El valor 'inherit'
3. La regla '@import'
4. L'efecte cascada
4.1. Ordre de cascada
4.2. Regles '!important'
4.3. Calcular l'especificitat d'un selector
4.4. Precedència d'indicacions presentacionals no-CSS
1. Valors especificats, valors calculats i valors reals
Un cop un agent d'usuari ha analizat gramaticalment un document i ha construït un arbre del document, ha d'assignar, per a cada element de l'arbre, un valor per a cada propietat que s'apliqui al tipus de mitjà objectiu.

El valor final d'una propietat és el resultat d'un càlcul de tres passos: el valor es determina a través de l'especificació (el "valor especificat"), aleshores es resol en un valor absolut si és necessari (el "valor computat" o "valor calculat"), i finalment es transforma d'acord amb les limitacions de l'entorn local (el "valor real").
1.1. Valors especificats
Els agents d'usuari primer han d'assignar un valor especificat a una propietat, basant-se en els següents mecanismes (per ordre de precedència):

  1. Si la l'efecte cascada resulta en un valor, cal utilitzar-lo.
  2. D'altra manera, si la propietat és heretada, cal utilitzar el valor de l'element pare, generalment el valor computat.
  3. D'altra manera, cal utilitzar el valor inicial de la propietat. El valor inicial de cada propietat està indicat en la definició de la propietat.

L'arrel de l'arbre del document, com que no té pare, no pot utilitzar valors de l'element pare; en aquest cas, si és necessari s'utilitza el valor inicial.
1.2. Valors calculats
Els valors especificats poden ser absoluts (és a dir, com 'red' o '2mm', els quals no estan especificats relativament a un altre valor) o relatius (és a dir, com 'auto', '2em' i '12%', els quals estan especificats relativament a un altre valor). Per als valors absoluts no és necessari fer cap càlcul per trobar el valor computat.

Els valors relatius, per altra banda, han de ser transformats a valors computats: els percentatges s'han de multiplicar per un valor de referència (cada propietat defineix quin és aquest valor), els valors amb unitats relatives (em, ex, px) s'han de convertir en absoluts multiplicant-los per la mida apropiada del píxel o de la font, els valors 'auto' han de calcular-se mitjançant la fórmula donada amb cada propietat, certes paraules clau ('smaller', 'bolder', 'inherit') han de ser substituïdes d'acord amb les seves definicions.

En la majoria de casos els elements hereten els valors computats. No obstant, hi ha algunes propietats el valor especificat de les quals pot ser heretat (per ex., el valor numèric per a la propietat line-height). En els casos en què els elements fill no hereten el valor computat, això es descriu en la definició de la propietat.
1.3. Valors reals
Un valor calculat, en principi, està preparat per a ser utilitzat però un agent d'usuari pot no ser capaç de fer ús del valor en un entorn determinat. Per exemple, un agent d'usuari pot només ser capaç de presentar les vores amb amplades d'un nombre enter de píxels i pot, per tant, haver d'aproximar l'amplada computada. El valor real és el valor computat després d'aplicar-hi qualsevol aproximació.
2. L'herència
Alguns valors són heretats pels fills d'un element en l'arbre del document. Cada propietat defineix si és heretada o no.

Suposem que hi ha un element H1 amb un element emfatitzant (EM) a dins:
   <H1>El títol <EM>és</EM> important!</H1>
Si no s'ha assignat cap color a l'element EM, el "és" emfatitzat heretarà el color de l'element pare, per tant, si H1 té el color blau l'element EM també serà blau.

Per a fixar una propietat d'estil "per defecte" per a un document, els autors poden fixar la propietat en l'arrel de l'arbre del document. En HTML, per exemple, els elements HTML o BODY poden servir per a aquesta funció. Cal remarcar que això funcionarà encara que l'autor ometi el tag BODY en l'HTML origen ja que l'analitzador gramatical d'HTML inferirà el tag que falta.

Per exemple, com que la propietat color és heretada, tots els descendents de l'element BODY heretaran el color 'black' (negre):
	BODY { color: black; }
Els valors especificats percentuals no s'hereten; els valors computats sí.

Per exemple, donat el següent full d'estil:
	BODY { font-size: 10pt }
	H1 { font-size: 120% }
i aquest fragment de document:
   <BODY>
      <H1>Un títol <EM>gros</EM></H1>
   </BODY>
la propietat font-size per a l'element H1 tindrà el valor computat '12pt' (120% vegades 10pt, el valor del pare). Com que el valor computat de font-size s'hereta, l'element EM també tindrà el valor computat '12pt'. Si l'agent d'usuari no té disponible la font 12pt, el valor real de font-size tant per H1 com per EM podria ser, per exemple, '11pt'.
2.1. El valor 'inherit'
Cada propietat pot tenir, també, un valor especificat de 'inherit', el qual significa que, per a un element donat, la propietat pren el mateix valor computat que per al pare de l'element. El valor heretat, el qual normalment només s'utilitza com a valor de prevenció (per defecte), es pot reforçar fixant 'inherit' explícitament (el valor 'inherit' fa que els valors de les propietats s'heretin; això s'aplica fins i tot a propietats el valor de les quals d'altra manera no s'heretarien).

En l'exemple següent, les propietats color i background s'han inicialitzat en l'element BODY. En tots els altres elements, el valor de color serà heretat i el fons serà transparent. Si aquestes regles són part del full d'estil de l'usuari, es forçarà el text negre sobre un fons blanc en tot el document.
	BODY { 
         color: black !important; 
         background: white !important;
      }
	
      * { 
         color: inherit !important; 
         background: transparent;
      }
En resum, el valor 'inherit' fa que el valor de les propietats s'hereti. Això s'aplica fins i tot en les propietats els valors de les quals no s'heretarien d'altra manera.
3. La regla @import
La regla '@import' permet als usuaris importar regles d'estil d'altres fulls d'estil. Qualsevol regla @import, si es troba present, ha de precedir tots els conjunts de regles d'un full d'estil. La paraula clau '@import' ha d'anar seguida per la URI del full d'estil que s'ha d'incloure. També es permet que vagi seguida d'una cadena; serà interpretada com si estigués delimitada per url(...).

Les següents línies són equivalents en siginificat i il·lustren les dues sintaxis de '@import' (l'una amb "url()" i l'altra amb una cadena a seques):
	@import "elmeuestil.css";

	@import url("elmeuestil.css");
Per tal que els agents d'usuari puguin evitar recuperar recursos per a tipus de mitjans no suportats, els autors poden especificar regles @import depenents de mitjà. Aquestes importacions condicionals especifiquen tipus de mitjans, separats per comes, després de la URI.

Les següents regles tenen el mateix efecte que si el full d'estil importat estigués dins una regla @media per al mateix mitjà, però pot estalviar-li a l'agent d'usuari una descàrrega infructuosa:
	@import url("bonaimpressio.css") print;

	@import url("blavos.css") projection, tv;
En absència dels tipus de mitjans, la importació és incondicional. El fet d'especificar 'all' com a mitjà té el mateix efecte. Les següents regles són equivalents:
	@import url("totselsmitjans.css");

	@import url("totselsmitjans.css") all;
4. L'efecte cascada
Els fulls d'estil poden tenir tres orígens diferents:


Els fulls d'estil des d'aquests tres orígens solaparan els seus àmbits i interactuaran d'acord amb l'efecte cascada.

L'efecte cascada de CSS assigna un pes a cada regla d'estil. Quan s'apliquen vàries regles, la que té el pes més gran és la que té precedència.

Per defecte, les regles dels fulls d'estil d'autor tenen més pes que les regles dels fulls d'estil d'usuari. La precedència s'inverteix d'ordre, no obstant, per a les regles "!important". Totes les regles d'usuari i d'autor tenen més pes que les regles del full d'estil per defecte dels agents d'usuari.

Els fulls d'estil importats també cauen en cascada i els seus pesos depenen del seu ordre d'importació. Les regles especificades en un full d'estil donat sobreescriuen les regles importades des d'altres fulls d'estil. Els fulls d'estil importats poden ells mateixos importar i sobreescriure altres fulls d'estil, recursivament, i s'apliquen les mateixes regles de precedència.
4.1. Ordre de cascada
Per a trobar el valor per a una combinació element/propietat, els agents d'usuari han d'aplicar el següent ordre de classificació:

  1. Trobar totes les declaracions que s'apliquin a l'element i a la propietat en qüestió, per al tipus de mitjà objectiu. Les declaracions s'apliquen si el selector associat unifica amb l'element en qüestió.
  2. La primera classificació de les declaracions és pel pes i l'origen: per a declaracions normals, els fulls d'estil d'autor sobreescriuen els fulls d'estil d'usuari, els quals sobreescriuen el full d'estil per defecte. Per a les declaracions "!important", els fulls d'estil d'usuari sobreescriuen els fulls d'estil d'autor, els quals sobreescriuen el full d'estil per defecte. Una declaració "!important" sobreescriu les declaracions normals. Un full d'estil importat té el mateix origen que el full d'estil que l'ha importat.
  3. La classificació secundària és per l'especificitat del selector: els selectors més específics sobreescriuran els més generals. Els pseudo-elements i les pseudo-classes es compten com a elements i classes normals, respectivament.
  4. Finalment, la classificació per ordre d'especificació: si dues regles tenen el mateix pes, origen i especificitat, la que ha estat especificada més tard és la que guanya. Les regles en fulls d'estil importats es considera que han estat declarades abans que qualsevol regla del full d'estil en sí.

Apart del cas d'assignar "!important" a declaracions individuals, aquesta estratègia dóna als fulls d'estil d'autor un pes més alt que a aquells que són del lector. És per això que és important que l'agent d'usuari dóni a l'usuari l'habilitat de desactivar la influència d'un cert full d'estil, per ex., a través d'un menú desplegable.
4.2. Regles '!important'
CSS intenta crear un equilibri de poder entre els fulls d'estil d'autor i els d'usuari. Per defecte, les regles d'un full d'estil d'autor sobreescriuen les d'un full d'estil d'usuari (veieu la regla 3 de l'efecte cascada).

No obstant, a fi d'equilibrar, una declaració "!important" (les paraules clau "!" i "important" van darrera de la declaració) pren precedència per sobre d'una declaració normal. Tant els fulls d'estil d'autor com els d'usuari poden contenir declaracions "!important", i les regles "!important" d'usuari sobreescriuen les regles "!important" d'autor. Aquesta característica CSS millora l'accessibilitat dels documents donant als usuaris amb requeriments especials un control sobre la presentació (fonts més grans, combinacions de colors, etc.).

Nota. Aquesta semàntica ha canviat de CSS1 a CSS2. En CSS1 les regles "!important" d'autor tenien precedència sobre les regles "!important" d'usuari.

El fet de declarar una propietat drecera (per ex., background) com a "!important" és equivalent a declarar totes les seves subpropietats com a "!important".

En el següent exemple, la primera regla del full d'estil d'usuari conté una declaració "!important", la qual sobreescriu la declaració corresponent en el full d'estil d'autor. La segona declaració també guanyarà, degut al fet d'estar marcada com a "!important". Tanmateix, la tercera regla en el full d'estil d'usuari no és "!important" i per tant perdrà precedència en favor de la segona regla del full d'estil d'autor (la qual fa que es fixi estil sobre una propietat drecera). A més, la tercera regla d'autor predrà precedència en favor de la segona regla d'autor, ja que la segona regla és "!important". Això mostra que les declaracions "!important" tenen una funció també dins mateix dels fulls d'estil d'autor.
	/* Del full d'estil de l'usuari */
	P { text-indent: 1em ! important }
	P { font-style: italic ! important }
	P { font-size: 18pt }

	/* Del full d'estil de l'autor */
	P { text-indent: 1.5em !important }
	P { font: 12pt sans-serif !important }
	P { font-size: 24pt }
4.3. Calcular l'especificitat d'un selector
L'especificitat d'un selector es calcula tal com segueix:

  1. es compta el nombre d'atributs ID en el selector (=a)
  2. es compta el nombre d'altres atributs i pseudo-classes en el selector (= b)
  3. es compta el nombre de noms d'elements en el selector (= c)
  4. s'ignoren els pseudo-elements.

Si es concatenen els tres nombres a-b-c (en un sistema numèric de base gran) en resulta l'especificitat.

Alguns exemples:
	* {}              /* a=0 b=0 c=0 -> especificitat = 0 */
	LI {}             /* a=0 b=0 c=1 -> especificitat = 1 */
	UL LI {}          /* a=0 b=0 c=2 -> especificitat = 2 */
	UL OL+LI {}       /* a=0 b=0 c=3 -> especificitat = 3 */
	H1 + *[REL=up] {} /* a=0 b=1 c=1 -> especificitat = 11 */
	UL OL LI.red {}   /* a=0 b=1 c=3 -> especificitat = 13 */ 
	LI.red.level {}   /* a=0 b=2 c=1 -> especificitat = 21 */
	#x34y {}          /* a=1 b=0 c=0 -> especificitat = 100 */ 
En HTML, els valors de l'atribut "style" d'un element són regles de full d'estil. Aquestes regles no tenen selectors, però pel propòsit del pas 3 de l'algorisme de l'efecte cascada, es considera que tenen un selector ID (especificitat: a=1, b=0, c=0). Pel propòsit del pas 4, es considera que es troben després de totes les altres regles.

Exemple:

   <HEAD>
   <STYLE type="text/css">
      #x98z { color: blue }
   </STYLE>
   </HEAD>
   <BODY>
      <P ID=x98z style="color: red">
   </BODY>
Aquí, el color de l'element P seria vermell. Encara que l'especificitat és la mateixa per a ambdues declaracions, la declaració que conté l'atribut "style" sobreescriurà la que conté l'element STYLE a causa de la regla 4 de l'efecte cascada.
4.4. Precedència d'indicacions presentacionals no-CSS
L'agent d'usuari és possible que trïi respectar les indicacions presentacionals des d'altres recursos que no siguin els fulls d'estil, per exemple, l'element FONT o l'atribut "align" de l'HTML. Si és el cas, les indicacions presentacionals no-CSS han de ser traduïdes a les corresponents regles CSS amb especificitat igual a zero. S'assumeix que les regles estan al principi del full d'estil de l'autor i poden ser sobreescrites per subseqüents regles del full d'estil.

Nota. En una fase de transició, aquesta política facilitarà la coexistència d'atributs estilístics amb els fulls d'estil.

Nota. En CSS1 a les indicacions presentacionals no-CSS se'ls donava una especificitat igual a 1, no 0. El canvi es deu a la introducció del selector universal, el qual té una especificitat de 0.
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos