Anatomia di una regola CSS

Descrizione dello schema

In alto abbiamo una semplice regola CSS, p {color: green}. Questa regola assegna un colore verde scuro al testo dei paragrafi di un documento (X)HTML. A seguire abbiamo un diagramma ad albero (o albero sintagmatico) così strutturato:

1. con R indichiamo l'intera regola
2. la regola è a sua volta costituita da un selettore (s) e da un blocco di dichiarazioni (b)
3. il selettore in questo caso è costituito da un singolo selettore di tipo (E)
4. il blocco di dichiarazioni è costituito da una parentesi graffa di apertura, da una proprietà (P), dai due punti dopo il nome della proprietà, da un valore (V) e dalla corrispondente parentesi graffa di chiusura
5. trattandosi di una regola costituita da una sola dichiarazione, il punto e virgola alla fine della dichiarazione è facoltativo
6. lo schema si conclude con la scomposizione in costituenti:
   • R → s + b
   • s → E
   • b → { + P + : + V + }
   la freccia va letta come "è costituito da".

I token

Formalmente parlando, ogni costituente di una regola CSS viene detto token. Il token s è un pattern che può essere formato da uno o più selettori separati da combinatori (come + o >). Alcuni esempi:

• E₁ + E₂
• E₁ > E₂

Il token spazio bianco (indicato con S nelle specifiche) ha un valore contestuale, ossia può svolgere una funzione diversa in base alla presenza di determinate combinazioni di token o venire del tutto ignorato dal parser. Nello schema della regola da noi usata come esempio lo spazio bianco viene ignorato. Esempi in cui invece svolge una funzione sono:

• E₁ S E₂
• E { P: V₁ S V₂ }

Nel primo caso lo spazio bianco svolge la funzione di combinatore tra due elementi, andando a formare il pattern del selettore discendente. Nel secondo caso funge da separatore tra due valori di una proprietà.

Torna alla diapositiva