4 Creare contenuti per il web - Andrea Giachetti

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