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