4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
82<br />
Con questa sintassi le classi sono generiche, cioè applicab<strong>il</strong>i a tutti i tipi di elemento, comunque<br />
le regole possono essere create anche <strong>per</strong> un tipo particolare mettendo prima del punto <strong>il</strong> tipo,<br />
es:<br />
h1.nomeclasse {background=yellow; color=red;}<br />
In tal caso, se provassimo a inserire <strong>il</strong> nome “nome” a un elemento di tipo differente, <strong>per</strong> es:<br />
non funziona <br />
la regola non sarebbe applicata.<br />
Sim<strong>il</strong>e a quello delle classi di elementi è l'uso del selettore di identificativo, che si ottiene<br />
appunto inserendo un identificativo univoco a un elemento con l'attributo id=”nomeid”, es<br />
se nel f<strong>il</strong>e .css:<br />
#frasecelebre {background=yellow; color=red;}<br />
sarebbe interessato l'elemento così marcato, che sarà unico:<br />
Chi tardi arriva<br />
male alloggia <br />
Anche qui è possib<strong>il</strong>e specificare nella regola <strong>il</strong> tipo di elemento in cui deve essere inserito l'id,<br />
ad esempio:<br />
p#frasecelebre {background=yellow; color=red;}<br />
farà in modo che la regola valga solo <strong>per</strong> gli elementi p con id uguale a “frasecelebre”.<br />
La differenza rispetto a class è che l'id può essere applicato ad un solo elemento in tutta la<br />
pagina HTML e, quindi, non va bene se si vuole applicare la stessa regola a diversi elementi.<br />
Per questo vengono in genere ut<strong>il</strong>izzati <strong>per</strong> riferirsi a sezioni ben definite di un modello di<br />
pagina: ad esempio, nei modelli classici dei Content Management Systems abbiamo sezioni<br />
caratterizzate da id come div#page, che indica <strong>il</strong> box che contiene l' intera pagina html,<br />
div#header che indica <strong>il</strong> box che contiene la testata, div#navbar che identifica la barra di<br />
navigazione e così via.<br />
Esistono poi svariate altre modalità di selezione. Ad esempio si possono concatenare i selettori:<br />
se scriviamo:<br />
selettore1 selettore2 { regola },<br />
la regola si applicherà agli elementi selezionati da selettore2 solo se <strong>contenuti</strong> in un elemento di<br />
tipo selettore1.<br />
Ad esempio:<br />
p em {background=yellow; color=red;}