Secció 3: Propietats
3. Propietats relacionades amb el text
3.4. font-size
La propietat font-size estableix la mida de la font.
Hi ha diferents maneres d'especificar-ne el valor:
- Mida absoluta. Hi ha set valors absoluts fixats pel navegador: xx-small, x-small, small, medium, large, x-large i xx-large. Si comparem amb HTML, és semblant a l'atribut size de l'element <FONT>, però utilitzant les paraules clau anteriors en lloc dels valors numèrics 1 a 7.
- Mida relativa. Els valors larger (més gran) i smaller (més petit) fan referència a la mida de l'element pare. Son similars als valors '-1' i '+1' de <FONT size=···>.
- Longitud. Les unitats em i ex es refereixen al valor de font-size de l'element pare. Això és una excepció; recorda que normalment faran referència a la mida de la font del propi element, cosa que aquí no tindria sentit.
- Percentatge. Com en el cas de em i ex, el percentatge és relatiu a la mida de l'element pare. Els valors de longitud i percentatge els vàrem veure amb detall a l'apartat 1: 'Conceptes generals'.
BODY { font-size: 15pt; }
SPAN.nota { font-size: 80%; }
SPAN.comentari { font-size: .8em; }
H1 { font-size: large; }
H1 SPAN.especial { font-size: larger; }
Analitzem una mica l'exemple anterior. Les declaracions 2 i 3 són equivalents, ja que totes dues es refereixen al valor de l'element pare (BODY), i es tradueixen en una mida de 12pt (15 * 0.8). La següent declaració afecta als H1, i els assigna una mida large (independentment del valor de font-size al BODY). La darrera declaració, que afecta als SPAN de classe 'especial' inclosos a un H1, pren el valor x-large, ja que s'incrementa el valor heretat de l'element pare, que en aquest cas és H1.
Nota: una propietat relacionada amb font-size és font-size-adjust ( CSS2 ), però no la veurem per ser molt específica. Pots trobar-ne informació a l'especificació CSS2 del W3C.
Pregunta
Quin valor (en pt) tindrà l'SPAN de classe 'comentari' en el següent fragment HTLM, si utilitzem la CSS de l'exemple anterior?
<BODY>
<H1>Exemple amb <SPAN class="especial">font-size</SPAN></H1>
<P>Aquest paragraf conté un <SPAN class="nota">SPAN que conté una <SPAN class="comentari">paraula</SPAN> marcada.</SPAN></P>
</BODY>
Reproduim el càlcul que efectua el navegador. Primer assigna una mida de 15pt a l'element BODY, i per herència a tots els seus descendents. L'SPAN de classe 'nota' té un valor per font-size de 80%, que aplicat als 15pt del BODY resulta 12pt. L'SPAN de classe 'comentari' té el valor .8em, que s'ha d'aplicar al valor del seu element pare. Aquest no és BODY, sinó l'altre SPAN, que tenia una mida de 12pt. L'operació (12 * 0.8) torna el valor 9.6, que redondejat ens dona els 10pt.
Com demostra la 'Pregunta' anterior, la propietat font-size s'hereta, però en el cas d'utilitzar longituds relatives o percentatges, el que s'hereta és el valor computat (vàrem veure'n un exemple en explicar els percentatges).
3. Propietats relacionades amb el text: font-variant
