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.
Il selettore universale si indica con l'asterisco. Facciamo un esempio di utilizzo:
Da zero ad eroe
Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.
- ⏱️ 8 ore di corso registrato
- 🧩 Più di 50 algoritmi risolti passo passo
- 🎯 Livello base — da zero ad eroe
- 💻 100% online, fruibile quando vuoi
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:
body {
font-size:12px;
}
p {
font-size:1.5em;
text-align:left;
background:#ccc;
}
h1, h2, h3, h4, h5, h6 {
color: #252525;
line-height:1em;
}
h1{
font-size:4.5em;
}
h2{
font-size:4em;
}
h3{
font-size:3em;
}
h4{
font-size:2.5em;
}
h5{
font-size:2em;
}
h6{
font-size:1.3em;
}
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.
A quanto corrisponde 15. em?
1em corrisponde alla dimensione assegnata al documento, nel tag body, dunque 1em=12px. Allora 12 x 1.5=18 px.
Se non assegniamo a body la dimensione del font, di default 1em è pari a 16px.
Successivamente, per ogni tag del titolo, 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
Indice tutorial CSS3
Indice tutorial HTML
Fogli di stile interni, esterni ed in linea
Fogli di stile esterni
Selettori
Come impostare le pseudo-classi
Reset CSS
CSS responsive
Font nei CSS
CSS border – border width
Border style CSS
Border color CSS
