Secció 1: Primeres passes
6. Element pare, element fill i herència
Un dels conceptes importants relacionats amb CSS és el d'herència. Per entendre'l bé caldrà abans conèixer el significat dels termes element pare i element fill. En lloc d'una definició estricta he optat per mostrar aquests conceptes de forma més intuitiva, a partir d'un exemple senzill.
Un document HTML està format per un seguit d'elements que s'organitzen en forma d'arbre. A l'exemple següent, el document està format pels elements A, BODY, HEAD, HTML, IMG, P i TITLE, els quals s'organitzen en l'arbre que pots veure a la figura 1.
<HTML> <HEAD> <TITLE>Pàgina base</TITLE> </HEAD> <BODY> <H1>Exemple de pàgina base</H1> <IMG src="i1.gif"> <P>Paràgraf amb <A href="...">un</A> i <A href="...">dos</A> links</P> </BODY> </HTML>
Figura 1
Nota: sovint s'acostuma a representar les estructures d'arbre de forma invertida, amb l'arrel (en aquest cas l'element HTML) al nivell superior, i les branques estenent-se cap a baix.
L'element HTML (element arrel o root element) conté dos elements, HEAD i BODY. Direm que HEAD i BODY són els elements fill d'HTML, i de forma anàloga que HTML és l'element pare de HEAD i de BODY. Al seu torn, HEAD és l'element pare de TITLE, i aquest és fill de HEAD, però no és pare de cap altre element. Com pots comprovar, tots els elements llevat d'HTML tenen un únic element pare, i poden tenir 0, 1 o més fills.
Amb altres paraules, si tenim dos elements un dels quals està contingut en l'altre, direm que l'element contenidor és el pare i l'element contingut és el fill.
<X>L'element pare conté a <Y>l'element fill</Y>.</X>
Tornem a l'exemple. Fixa't en l'element P. És fill de BODY i alhora té dos fills, els dos elements A. És perfectament possible que un element tingui molts fills del mateix tipus. Pensa en una pàgina amb un títol i molts paràgrafs; l'element BODY tindrà un fill H1 i molts fills P.
Creus que els elements A són fills de BODY? Podríem pensar que sí, ja que són fills d'un fill de BODY. Però estrictament parlant no diem que són fills, sinó descendents. Tots els elements d'una pàgina web són descendents d'HTML. De forma similar direm que HTML és l'avantpassat (en anglès ancestor) de A. Els elements fills són també descendents, però no a l'inrevés, i el mateix passa amb pares i avantpassats.
Arribats a aquest punt és hora de parlar de l'herència a CSS. És un concepte força intuitiu, però val la pena entendre'l bé. La idea fonamental és que algunes propietats s'hereten. No sembla tan espectacular oi? Vegem què significa exactament la frase anterior. Que un element hereti una determinada propietat significa que pren el valor que tenia en l'element pare. Per exemple, suposem que assignem a l'element BODY la propietat 'color:blue'. Si aquesta propietat s'hereta, tots els seus fills tindran automàticament la propietat 'color' amb el valor 'blue' (blau), encara que no l'escrivim explícitament a l'style sheet. Ara bé, si en algun dels elements fills de BODY especifiquem un altre valor per la propietat 'color', se sobreescriurà el valor heretat. D'aquesta forma podríem decidir que un determinat element fill de BODY fos de color vermell assignant-li la propietat 'color:red'.
Si un element hereta una propietat del seu pare, els seus fills també l'hereten, i així successivament, sempre i quan no especifiquem un altre valor en algun dels elements. En aquest cas serà el nou valor el que heretin els fills d'aquest element.
Fins aquí no sembla gaire complicat, oi? I no ho és, el problema és que només algunes de les propietats s'hereten. Quan una propietat no s'hereta pren el seu valor per defecte, independentment de quin sigui el seu valor en l'element pare. Un exemple és la propietat 'border', que dibuixa les vores que envolten un element. Encara que l'element BODY tingui les vores vermelles, els seus fills no hereten aquest valor, sinó que prenen el valor per defecte, que en el cas de 'border' és 'sense vores'. Cada propietat té el seu corresponent valor per defecte.
A l'especificació CSS, la definició de cada propietat indica, a més del valor per defecte, si aquesta s'hereta o no. Ara bé, sovint ens podrem simplement guiar per la lògica; en l'exemple anterior, si a l'element BODY li assignem la propietat 'color:blue' volem dir que tot el text del document ha de mostrar-se amb color blau, mentre que la propietat 'border' sembla més raonable traduir-la per "les vores de BODY (és a dir, de tot el document) han de ser vermelles" que no pas per "les vores de BODY són vermelles, i també ho són les de cadascun dels elements fills de BODY". En aquest curs procuro especificar el comportament de l'herència per a la majoria de propietats, especialment en els casos més dubtosos.
Fins aquí la Secció 1. Has après de quins elements consta un style sheet, i com s'ha de fer per associar-lo a un document HTML. També has vist els conceptes d'herència i elements pare i fill. Encara no pots fer gaire coses, però. Si vols, pots mirar aquest exemple, on es posen en pràctica els conceptes que has vist fins ara en un style sheet real. No et preocupis massa si hi ha coses que no entens, tot es veurà més endavant.
La Secció 2 explica els diferents tipus de selectors. En general és de caire bastant teòric, i alguns dels apartats que es tracten són bastant especialitzats. Si no tens prou paciència, pots mirar només els apartats 1 i 2, i saltar directament a la Secció 3: 'Propietats'.
Secció 2: Selectors
