Introduzione ai CSS - HTML5 con CSS e JavaScript - page 70

Esempio 4.8 - HTML
<div id=" header ">
<p>Questa è l'intestazione</p>
</div>
Esempio 4.8 - CSS
# header {
color: black;
background: red;
}
In questo caso, il valore va fatto precedere dal carattere # , mentre restano valide tutte le
altre considerazioni già fatte negli altri casi.
Questo approccio è, in genere, utilizzato in presenza degli elementi strutturali della pa-
gina. Molto spesso, infatti, si tende a dare un ID a questi elementi, che rappresentano la
struttura portante della pagina, così da poterli manipolare più facilmente. Non sarebbe sba-
gliato, comunque, dare direttamente una classe a tali elementi, perché funzionerebbero allo
stesso modo. Tuttavia, specificare gli ID consente di fare in modo che il markup e il relati-
vo CSS siano più ordinati, grazie al fatto che si ha la certezza che quello stile sarà applicato
solo al tag a cui si riferisce. Nel corso del prossimo capitolo, impareremo l'importanza di
questo aspetto, quando parleremo di come comporre i layout utilizzando i CSS.
I selettori CSS
Comunemente, insieme ad altre varianti che introdurremo tra qualche istante, le sintassi
analizzate finora vanno a formare i cosiddetti selettori . Si tratta di una grammatica parti-
colare che viene utilizzata all'interno dei file CSS per definire regole, che possono essere
complesse. Include la possibilità di definire delle regole di stile che si applichino a stati
particolari degli elementi, piuttosto che alla gerarchia degli stessi all'interno del markup. I
selettori rivestono un ruolo importante, per cui buona parte di questo capitolo è dedicato a
questa caratteristica. Dove si tratti di una novità di CSS3, questa viene evidenziata, così da
agevolarvi qualora conosciate già le caratteristiche delle versioni precedenti.
Le pseudo-classi
Le specifiche relative ai CSS prevedono che si possano specificare delle regole ad hoc da
applicare a uno stile quando questo si trova in un particolare stato. Il caso più diffuso è