CSS: I Selettori di Base

Lezione 02 I Selettori di base nei CSS . I fogli di stile, sono fondati su delle regole, ossia su costrutti sintattici attraverso cui si definiscono gli stili da applicare agli elementi di una pagina web.
Ma cosa sono i selettori di base per i css? Ogni regola è formata da un selettore, costituito da un insieme di proprietà che identificano la regola.
selettore { proprietà: valore; proprietà: valore; … }
Possiamo lavorare con i selettori seguendo più strade.
1. Tipo Elemento HTML (Type Selector): indica direttamente l’elemento HTML a cui applicare la regola (per esempio p, div, span e così via).
<div style="background-color: #d3d3d3; color: blue">Type Selector</div>
2. Tipo Selettore di Classe (Class Selector): inizia con il carattere punto (.), e indica una regola da applicare a qualsiasi elemento HTML dotato di un particolare attributo class :
/* file styles.css */ .miaclasse { color="white"; background-color="red"; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="miaclasse">Class Selector</div> </body> </html>
In questo modo, scegliendo la classe .miaclasse , stiamo applicando al testo Class Selector un colore bianco, uno sfondo rosso e un font arial di 20 pixel.
3. Tipo ID (ID Selector): inizia con il carattere di cancelletto (#) e indica regola da applicare all’elemento HTML dotato di un particolare attributo id:
/* file styles.css */ #bord-001 { font-size: 24px; border-style: solid; border-size: 1.5em; border-color: red; }
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p id="bord-001">ID Selector</p> </body> </html>
ID Selector
4. Tipo Universale: scritto con il solo carattere asterisco (*), indica una regola da applicare a tutti gli elementi HTML del documento. Può anche essere applicato ad una classe o ad un id: in questi casi il selettore si applica a tutti gli elementi HTML di quella specifica classe o dello specifico id. In poche parole è il seleziona tutto che ben conosciamo e che implicitamente utilizziamo quando selezioniamo tutte le parti di un documento. Parleremo più in dettaglio dei selettori universali nella lezione 6.
Ritorna alla precedente <– []–> Vai alla successiva