Selettori nei CSS

In questo articolo studieremo cosa sono i selettori nei CSS e come utilizzarli.

Abbiamo visto nella lezione precedente come creare un foglio di stile esterno, in questa lezione vedremo come inserire i vari elementi al suo interno e quindi partiremo proprio dai selettori nei CSS.

Cosa sono i selettori nei CSS e come utilizzarli

Come abbiamo già detto, per definire uno stile nei CSS vengono utilizzati i selettori.

I selettori servono infatti ad applicare un determinato stile ad uno o più elementi della pagina web. Vediamo quanti tipi di selettori esistono.

Selettore universale

Il selettore universale si indica con l’asterisco. Facciamo un esempio di utilizzo:

* { margin:0; padding:0 }

In questo esempio azzeriamo i margini e il padding di tutti gli elementi della pagina. Per intenderci il margin è la distanza tra il bordo di un elemento e gli elementi adiacenti mentre il padding è la distanza tra il testo e il bordo del contenitore dove è incluso. Più avanti farò alcuni esempi.

Selettore di tipo

Mediante questo selettore si applica lo stesso stile ai tag dello stesso tipo; ad esempio o a tutti i paragrafi o a tutti i titoli h1 o ancora a tutti i div.

Vediamo un esempio di utilizzo:

p {text-align:left; background:#ccc;}
h1, h2, h3, h4, h5, h6 {
color: #252525;
line-height:1.5em;
}
h1{font-size:54px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:32px;}
h5{font-size:24px;}
h6{font-size:16px;}

In questo esempio tutto quello che scriveremo all’interno di tutti i tag p presenti nel documento sarà allineato a sinistra e lo sfondo di tutti i paragrafi sarà di colore grigio chiaro.

Tutti i tag dei titoli avranno come colore #252525 che corrisponde al grigio scuro e la distanza tra le righe nel testo sarà di 1.5 em.

Poi per ogni tag dei titoli specifico la dimensione del carattere; chiaramente h1 è più grande di h2 che a sua volta è più grande di h3, ecc…

Selettore mediante l’uso delle classi

Le classi si definiscono all’interno dei vari tag html e permettono di applicare lo stile non a tutti i tag della stessa categoria ma solo a quelli desiderati.

Le classi si utilizzano anteponendo un punto davanti al nome. Il nome deve essere significativo al fine di poterlo richiamare intuitivamente all’occorrenza.

Ecco un esempio di selettore di nome blu che ipotizziamo di inserire nel nostro foglio di stile.

.blu {color:#0000ff; }

Inoltre nella pagina html dobbiamo inserire:

<p class="blu">Coding creativo...</p>

Così solo il paragrafo a cui è associato quella classe avrà il testo di colore blu.

Selettore mediante l’uso degli id

L’identificativo id ha la stessa funzione delle classi ma deve essere univoco.

Ogni elemento (tag) deve avere un solo id e più elementi non possono avere lo stesso tag id.

Ad esempio, inseriamo questi id differenti all’interno dei due paragrafi:

<p id="blu">Coding creativo...</p>
<p id="rosso">Coding creativo...</p>

Invece questo non è possibile:

<p id="blu">Coding creativo...</p>
<p id="blu">Coding creativo...</p>

Anche questo non è possibile:

<p id="blu" id="allineamento">Coding creativo...</p>

Gli id non si indicano con il punto ma con il simbolo # davanti al nome. Vediamo qualche esempio:

#blu {color:#0000ff;}
#allinemento { 
text-align:justify;
}

Quello che accomuna tutti i tipi di selettori è la sintassi:

selettore {

proprietà:valore;
}

Nel prossimo articolo studieremo le pseudo-classi e faremo degli esempi.

Alcuni link utili:

Tag semantici

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web


Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *