CSS: I Selettori di Base

Scritto da ambrix on 07/05/2019. Postato in Corsi Programmazione, NotInHome

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>

Type Selector

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>

Class Selector

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

Qual è la differenza tra ID e CLASS? Quando usare una classe e quando invece usare un id? L’attributo id è usato per identificare in modo univoco un elemento. In pratica, se si assegna ad un paragrafo l’id #generic-id, non potrò più usare questo “aggancio” nel resto della pagina. Di conseguenza, l’id #generic-id dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una classe non è univoca. È possibile assegnare ad un elemento più classi così come è possibile assegnare una classe a più elementi della stessa pagina.

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