4 Creare contenuti per il web - Andrea Giachetti

Selettore
Proprietà
Creare contenuti per il web: (X)HTML e CSS in dettaglio 81
Valore Proprietà Valore
h1 {color: red; background: yellow }
Dichiarazione
Figura 39: Esempio di regola di stile
formattazione a tali parti.
Le proprietà che si possono stabilire con queste regole sono moltissime, abbiamo detto che con i
CSS sono infatti state anche date molte più libertà di variare la rappresentazione grafica del
documento rispetto all'HTML semplice. Non è interesse di questo testo vederle tutte,
rimandiamo a un manuale o alle specifiche W3C per il dettaglio, ricordiamo come esempio le
più comunemente utilizzate: background (colore sfondo), border (bordo), color (colore testo),
margin, padding, text-align, le proprietà relative ai caratteri (font-family, font-size, fontweight),
ecc. Ogni attributo, come per gli attributi dei tag HTML, ha definito il tipo di valori
che può assumere (numeri, percentuali o stringhe di caratteri predefinite).
I selettori possono selezionare una semplice classe di elementi tra quelli che abbiamo visto. E'
possibile selezionare le varie parti dei documenti con grande libertà. Vediamo qualche esempio.
In primo luogo si possono selezionare tipi di elementi: ad esempio h1{color:red;}
farà sì che tutti gli elementi h1 avranno testo di colore rosso. Se si vogliono assegnare le stesse
regole a più tipi di elemento con un unica regola, si possono raggruppare i nomi in un unico
selettore mediante la virgola. Ad esempio h1, h2, h3 {color:red;} farà sì che tutti
gli elementi di tipo h1, h2 e h3 abbiano colore di testo rosso. Un altro tipo di selettore può
essere quello riferito a una pseudoclasse di elementi, cioè classi di elementi che hanno una
determinata proprietà: se, ad esempio, consideriamo l'elemento per le àncore dei
collegamenti ipertestuali, possiamo distinguere tra collegamenti visitati, non visitati, àncore su
cui si trova il cursore, attivate, ecc. Nel linguaggio dei CSS si possono specificare questi stati
con il simbolo : e la proprietà. Quindi, se nel mio foglio di stile scrivo:
a:link {color:red}, a:visited {color:yellow},
a:hover {color:green} ,a:active {color:blue}
renderò rispettivamente rossi i colori dei link non visitati, gialli i colori dei link già visitati,
verdi i colori dei link su cui passa il cursore, blu i colori dei link attivati.
Per applicare regole a gruppi di elementi di un certo tipo, si può usare la selezione di classi di
elementi. Basta assegnare la classe agli elementi con l'attributo class=”nomeclasse” e
selezionare poi la classe “nomeclasse” con l'apposito selettore, es:
.nomeclasse {background=yellow; color=red;}
assegnerà colore rosso e sfondo bianco a tutti gli elementi in cui sarà indicato l'attributo class
con valore nome, es:
Il linguaggio XHTML