Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

I selettori

18 giugno 2011, Scritto da , category css

icona css
Nel corso HTML abbiamo visto che esistono i tag per gestire la struttura di una pagina.

L’equivalente del tag, con i css, è il selettore.

Quindi, se <p> è un tag HTML, p{} è il selettore css. E così via.

Tra i selettori ne esiste uno particolare, l’*, che si riferisce a tutti gli elementi di un documento.

Selettori discendenti

Avendo chiara la struttura di una pagina HTML è facile capire come utilizzare i selettori per riferirsi, e personalizzare, gli elementi della pagina.
Definiti gli elementi, e capita la gerarchia che li determina, chiamiamo discendenti i selettori figli di un altro elemento (genitore).
Nell’esempio:

<div>
 <p>Il mio paragrafo</p>
</div>

Con i css, per riferirmi all’elemento <p> del paragrafo e, per esempio, personalizzare il testo colorandolo di rosso, dovrò scrivere quanto segue:

div p {color:red}

P è l’elemento contenuto nel DIV e, come tale, è detto discendente.

I selettori discendenti si leggono da destra verso sinistra dunque l’elemento più interno, P in questo caso, è quello che viene referenziato e stilato tramite la definizione delle regole di stile color: red.

Tra i selettori ne esistono alcuni particolari: gli id e le classi.

Le classi

La classe è, sostanzialmente, un insieme di regole css e si richiama, all’interno di una pagina HTML, grazie ad un attributo, detto class, posto all’interno di un qualsiasi tag.

La scrittura:

.classifica {color:blue;background-color:white;border: 1px solid gray}

è la definizione di una classe, detta “classifica”, il cui testo verrà scritto in blu, il colore di sfondo sarà bianco ed il bordo sarà spesso un 1px e grigio.

Come avrete notato, il nome della classe, “classifica”, è preceduto da un “.” che ne definisce il tipo di costrutto.

Per utilizzare questa classe all’interno di un particolare elemento HTML basterà utilizzare, come detto, l’attributo class, in questa maniera:

<table class="classifica">...</table>

Caratteristica delle classi è che si possono applicare a più elementi della stessa pagina. Su tali elementi, pertanto, si applicheranno tutte le regole di stile definite nella classe assegnata.
Un caso tipico è quello delle immagini in vetrina per un sito. Per dare ad esse un aspetto particolare, magari diverso dalle immagini presenti nella gallery, si potrebbe creare una classe “vetrina” da assegnare ad esse.

.vetrina {border: 3px solid silver; background-color:white; padding:5px; margin:3px;}

e poi applicare la classe al codice html

<body>
 <img class="vetrina" src="new-iphone.jpeg">
 <img class="vetrina" src="new-android.jpeg">
 <img class="vetrina" src="new-windows-phone.jpeg">
...
</body>

In questo esempio le tre  immagini verranno evidenziate dal resto con un bordo grigio di 3px di spessore, verranno spaziate tra loro di 3px etc etc…

Le pseudo classi

Oltre alle classi esistono anche dei selettori particolari, detti pseudo classi.

La pseudo classe imposta lo stile all’elemento soltanto al verificarsi di certe condizioni (tipicamente a seguito di azioni del mouse).

Le pseudo classi, al contrario delle classi, non possono esistere ed essere definite da sole ma solo abbinate ad un elemento/selettore specifico.

Es:

a:link {color:#c1c1c1}
a:visited {color:purple}
a:hover{color:red}

Questa scrittura definisce tre pseudo classi, entrambe valide per l’elemento anchor <a>, e determinano il colore che deve avere il collegamento ipertestuale nel caso in cui il link non sia ancora stato visitato (pseudoclasse :link), nel caso in cui sia stato visitato (con :visited) e nel caso in cui ci si passi sopra con il mouse ( :hover)

Gli identificatori (ID)

Lo scopo e l’utilizzo degli identificatori, detti ID, è, sostanzialmente, lo stesso delle classi. L’unica differenza di tipo funzionale sta nel fatto che l’ID identifica univocamente un elemento quindi tale regola dovrà valere solo per un elemento specifico e non per un insieme (questo concetto sarà molto più comprensibile quando si utilizza javascript) mentre l’unica differenza di tipo sintattico sta nella scelta dell’indicatore del selettore: la classe, come già visto, si specifica anteponendo un “.” al nome della classe mentre l’id viene preceduto da un “#” mentre nell’html si utilizza l’attributo id invece di class.

La sintassi CSS, dunque, è molto semplice:

#idContainer {width:800px; margin:auto; border: 1px solid red;}
/* la scrittura sopra riportata definisce le regole di stile per un identificatore
utilizzato per il Container della pagina*/

Anche la sintassi HTML è molto semplice:

<div id="container">
...
</div>