Sintassi CSS con le sue 3 parti e i commenti CSS

La sintassi CSS è l'insieme di regole che indica al browser come applicare lo stile all'HTML. Ogni regola CSS segue lo stesso schema, quindi una volta appreso il formato di una regola è possibile leggere tutte le altre. Questo capitolo analizza tale schema nei suoi tre componenti, mostra un esempio funzionante e spiega come scrivere i commenti.

Se sei alle prime armi con CSS, leggi prima l'introduzione a CSS per vedere come i fogli di stile si collegano a una pagina.

L'anatomia di una regola CSS

Una regola CSS (chiamata anche ruleset) è composta da due parti: un selettore e un blocco di dichiarazione. All'interno del blocco di dichiarazione, ogni dichiarazione è una coppia proprietà: valore.

selector {
  property: value;
}

Nel complesso, una regola è formata da tre elementi fondamentali:

Selettore — quali elementi stilizzare.
Proprietà — quale aspetto modificare.
Valore — l'impostazione da applicare.

Selettore

Il selettore individua l'elemento HTML che si desidera stilizzare. Può essere qualsiasi tag come <h1> o <p>, una classe o un ID. Un singolo selettore può contenere una o più dichiarazioni. I selettori sono un argomento a sé — consulta i selettori CSS per l'elenco completo.

Proprietà

La proprietà è la caratteristica specifica che si desidera modificare, come color, border o font-size. Ogni proprietà accetta un particolare tipo di valore e deve essere sempre associata a uno.

Valore

Il valore è ciò che si assegna alla proprietà. Ad esempio, il valore della proprietà color può essere una parola chiave come red o un codice esadecimale come #f1f1f1.

Regole sintattiche da ricordare

I due punti (:) separano una proprietà dal suo valore.
Il punto e virgola (;) termina ogni dichiarazione e la separa dalla successiva.
L'intero blocco di dichiarazione è racchiuso tra parentesi graffe ({ }).
CSS ignora gli spazi bianchi e le interruzioni di riga aggiuntive tra selettori, proprietà e valori, quindi è possibile formattare le regole per una migliore leggibilità.

Un selettore può avere più di una dichiarazione, ciascuna separata da un punto e virgola:

p {
  color: #1c87c9;
  font-size: 16px;
  line-height: 1.5;
}

Esempio di sintassi CSS

Esempio di sintassi CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a>The color of this link is #1c87c9.</a>
  </body>
</html>

Provalo tu stesso »

Risultato

Nell'esempio precedente, il tag <a> è il selettore, color è la proprietà e #1c87c9 è il valore. La proprietà e il suo valore si trovano all'interno delle parentesi graffe, separati da due punti e chiusi con un punto e virgola.

Commenti CSS

I commenti consentono di aggiungere spiegazioni o note al foglio di stile. I browser li ignorano, quindi non influenzano mai la pagina. Sono utili per documentare il motivo per cui esiste una regola, per etichettare sezioni o per disabilitare temporaneamente una dichiarazione durante il debug.

Un commento CSS inizia con /* e termina con */:

Esempio di commenti in CSS

/* This is a comment */

I commenti possono anche estendersi su più righe, il che è utile per disabilitare più dichiarazioni contemporaneamente:

/*
  This whole block is ignored by the browser.
  color: red;
  font-size: 20px;
*/

Tieni presente che i commenti CSS non possono essere annidati — una volta aperto /*, il primo */ termina il commento. Ricorda inoltre che // non è un commento CSS valido; funziona in alcuni preprocessori come Sass, ma non in CSS standard.

Esempio di commenti CSS

Esempi di commenti CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        padding-left: 10px;
        font-size: 26px;
        line-height: 30px;
        /*color:red;*/
      }
      p {
        color: #1c87c9;
        /*font-size:25px;
        border:1px solid red;
        */
        padding: 10px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>CSS Comments</h1>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Provalo tu stesso »

Riepilogo

Una regola CSS è composta da un selettore e un blocco di dichiarazione racchiuso tra parentesi graffe.
Ogni dichiarazione è una coppia proprietà: valore, terminata da un punto e virgola.
Gli spazi bianchi vengono ignorati, quindi è possibile formattare le regole nel modo più leggibile.
I commenti si scrivono con /* ... */ e possono estendersi su più righe, ma non possono essere annidati.

Successivamente, scopri come collegare queste regole a una pagina in stili HTML, quindi esplora i selettori CSS per selezionare esattamente gli elementi desiderati.

Esercitazione

Pratica

Quale delle seguenti opzioni descrive correttamente la sintassi CSS?

Una dichiarazione CSS è composta da una proprietà e dal suo valore, separati da due punti.Un blocco CSS è racchiuso tra parentesi quadre.Le proprietà e i valori in una dichiarazione CSS sono separati da un punto e virgola.I ruleset CSS sono composti da un selettore seguito da un blocco di dichiarazione tra parentesi graffe.I ruleset CSS sono composti da un selettore seguito da un blocco di dichiarazione tra parentesi tonde.