Il raggruppamento e' una tecnica aggiuntiva per rendere piu' funzionali i fogli di stile e consentire effetti altrimenti irrealizzabili. Il raggruppamento di stile riduce gli attributi e gli argomenti creando gruppi logici. Nel particolare tale funzione viene svolta in due modi:

Raggruppare TAG

Per comprendere questo argomento si pensi ad una pagina Web impostata con diversi stili, ognuno dei quali identificato dai seguenti marcatori:

<STYLE>
H1 { font-family:arial; font-size:14px; color:blue; }
H2 { font-family:arial; font-size:14px; color:blue; }
H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>

Per raggruppare gli stili e' sufficiente sintetizzare il codice in questa direzione:

<STYLE>
H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>

Un altro esempio nella sua forma non raggruppata e' il seguente:

<STYLE>
A:link { text-decoration: none } A:visited { text-decoration: none }
</STYLE>

Che, invece, seguendo le regole generali del raggruppamento di stili diventa: <STYLE>
A:link, A:visited { text-decoration: none }
</STYLE>

Raggruppare gli attributi

E' possibile dividere gli stili in base alle informazioni specifiche sulle famiglie. Con questo tipo di raggruppamento il seguente stile di testo:

<STYLE>
BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal; color:red}
</STYLE>

si trasforma in:

<STYLE>
BODY { font: bold normal 15px verdana red}
</STYLE>

E' stato enunciato l'attributo font e successivamente gli argomenti che lo compongono. L'ordine di enunciazione non va lasciato al caso ma impostato in base a precise regole gerarchiche. Nell'esempio, il peso, il tipo di carattere e la grandezza vanno posti prima della dimensione. Gli attributi non sono separati da virgole ma da semplici spazi.

Le stesse regole valgono per i margini. Rimandiamo al capitolo corrispondente per ulteriori approfondimenti.

Colori di sfondo        Assegnare classi