Selettori di base

4.1 Selettori per tipo

I selettori in CSS sono utilizzati per determinare gli elementi a cui saranno applicati gli stili. I selettori di base includono selettori per tipo, classe, identificatore e selettori universali. Ognuno di questi selettori ha le sue caratteristiche e applicazioni.

Selettori per tipo (Type Selectors)

I selettori per tipo applicano stili a tutti gli elementi di un determinato tipo. Ad esempio, puoi applicare stili a tutti i paragrafi (<p>), intestazioni (<h1>, <h2> ecc.) o altri tag HTML.

    
      tagname {
        proprietà: valore;
        proprietà: valore;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Questo selettore applicherà stili a tutti gli elementi <p> nel documento.

Caratteristiche:

• Applicato a tutti gli elementi del tipo specificato
• Utile per stili globali che devono essere applicati a tutti gli elementi di un determinato tipo

4.2 Selettori per classe

I selettori per classe permettono di applicare stili a uno o più elementi che hanno una determinata classe. Le classi vengono definite tramite l'attributo class in HTML e sono indicate con un punto (.) in CSS.

Sintassi:

    
      .classname {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Questo selettore applicherà stili a tutti gli elementi che hanno la classe button.

Caratteristiche:

• È possibile utilizzare la stessa classe per più elementi
• Permette di applicare facilmente gli stessi stili a elementi diversi

4.3 Selettori per identificatore

I selettori per identificatore applicano stili a un elemento con un identificatore unico. Gli identificatori vengono definiti con l'attributo id in HTML e sono indicati con il simbolo cancelletto (#) in CSS.

Sintassi:

    
      #uniq-id {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

Questo selettore applicherà stili all'elemento con l'identificatore main.

    
      /* Seleziona l'elemento con l'identificatore #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Questo elemento avrà una larghezza di 800px.</div>
      <div>Questo elemento non sarà stilizzato.</div>
    
  

Caratteristiche:

• L'identificatore deve essere unico nella pagina
• Utilizzato per la stilizzazione di elementi unici, come il titolo o il contenuto principale

4.4 Selettori di gruppo

I selettori di gruppo permettono di applicare la stessa regola a più elementi. Riducendo la quantità di codice e semplificando la gestione degli stili.

Sintassi:

    
      selettore, selettore, … {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

    
      /* Seleziona tutti gli elementi h1, h2 e h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Intestazione 1</h1>
      <h2>Intestazione 2</h2>
      <h3>Intestazione 3</h3>
      <p>Questo testo non sarà stilizzato da questa regola.</p>
    
  

4.5 Selettori universali

I selettori universali applicano stili a tutti gli elementi della pagina. Sono indicati con un asterisco (*) e possono essere utili per il reset degli stili o per l'applicazione di stili comuni a tutti gli elementi.

Sintassi:

    
      * {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio:

Questo selettore applicherà stili a tutti gli elementi della pagina, resettando i loro margini e impostando il box model.

    
      <div>Paragrafo 1</div>
      <div>Paragrafo 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Caratteristiche:

• Applicato a tutti gli elementi della pagina
• Utile per il reset globale degli stili o per l'applicazione di stili di base a tutti gli elementi