Corso di CSS / Sintassi CSS: selettori, dichiarazioni, commenti ed errori

Una regola CSS combina un selettore con dichiarazioni scritte come proprietà: valore; all'interno delle parentesi graffe. Una sintassi corretta aiuta il browser ad applicare gli stili desiderati, ma una dichiarazione malformata può essere ignorata mentre altre dichiarazioni valide continuano a funzionare.

Leggi le parti di una regola CSS

.notice {
  color: #087f5b;
  padding: 16px;
}

Ogni proprietà consente valori diversi. Inserisci il valore del colore in color e il valore della lunghezza in padding. padding: blue; non è un valore valido per il padding, cioè la spaziatura interna, anche se blue è un colore scritto correttamente. 16px è scritto con numeri e unità. Se usi spazi come 16 px, non sarà letto come un singolo valore di lunghezza.

Usa parentesi graffe, due punti, punti e virgola e spazi bianchi

Le interruzioni di linea e l'indentazione aiutano a rendere il codice più facile da leggere per gli esseri umani. Le due regole seguenti si applicano allo stesso modo perché hanno lo stesso selettore e la stessa dichiarazione. Quando si sta imparando, è più facile trovare simboli mancanti se si suddividono le dichiarazioni riga per riga. La scelta del selettore in base agli elementi da formattare è spiegata in Selettori CSS di base: Tipo, Classe, ID e Attributi.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Anche se la dichiarazione finale può omettere il punto e virgola, scriverla in modo coerente rende le aggiunte successive più sicure. Gli spazi bianchi nei selettori possono cambiare il significato: .notice.urgent corrisponde a un elemento con entrambe le classi, mentre .notice .urgent corrisponde a un elemento con classe urgent discendente di un elemento con classe notice. Rimuovere quello spazio cambia il selettore. Vedi MDN: Introduzione.

Raggruppa i selettori e scrivi commenti

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

Una virgola collega più selettori allo stesso blocco di dichiarazioni. h1, h2 seleziona h1 e h2 rispettivamente, e h1 h2 è un altro selettore che trova h2 all'interno di h1. Una virgola è appropriata per lo scopo di applicare lo stesso colore.

I commenti CSS iniziano con /* e terminano con */. Le istruzioni all’interno dei commenti non vengono applicate come regole CSS. Può essere usato per scrivere una spiegazione o per escludere temporaneamente una regola, ma se il simbolo di chiusura viene omesso, il codice dietro di esso può essere trattato come un commento. Nel CSS normale, // di JavaScript non viene usato come notazione per commenti su una singola riga.

Confronta errori di dichiarazione ed errori di selettore

Quando un browser incontra un errore nei CSS, ignora la parte non valida e continua a elaborare le regole possibili. Questo non significa sempre "ignorare una riga sbagliata". Delimitatori mancanti o errori nei selettori possono avere un grande impatto.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Solo padding: blue è invalido qui. A meno che non ci siano altre regole, il colore del testo e il colore di sfondo vengono applicati, e il padding non viene modificato da questa dichiarazione. Anche se la proprietà è scritta in modo errato, come colro, la dichiarazione non verrà riconosciuta.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

Questo blocco manca di un punto e virgola dopo la prima dichiarazione. Il browser legge blue background-color: #e9f7ef come il valore di color, il che non è valido. Né il colore previsto né la dichiarazione di sfondo prevista si applicano, ma padding: 16px; si applica ancora. Aggiungi il punto e virgola mancante dopo blue.

h1, .notice:made-up-state {
  color: blue;
}

Una pseudo-classe sconosciuta rende questa lista ordinaria di selettori separati da virgola non valida, quindi la regola non si applica nemmeno a h1. Alcune liste speciali di selettori utilizzano un parsing permissivo. Questo esempio quindi non descrive il comportamento di ogni contesto di lista di selettori. Vedi MDN: Gestione degli errori.

Esegui l'esempio completo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Se salvi l'intero codice come index.html e lo apri, h1 e h2 sono dello stesso verde, e l'avviso ha uno sfondo chiaro, padding di 16px e bordo di 1px. Le frasi descrittive appaiono a 18px. font-size è la proprietà che imposta la dimensione del font, line-height è l'altezza della riga e border è il bordo. Qui viene utilizzata come proprietà ausiliaria per collegare sintassi e risultati.

Trova e correggi gli errori di sintassi

Sostituisci il blocco .notice in tutto l'esempio con il codice sottostante. L'obiettivo è correggere due errori di sintassi e ottenere "testo blu, sfondo verde chiaro, padding di 16px." Puoi facilmente ripristinare copiando il file originale con un nome diverso prima di modificarlo.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Cambia colro in color e aggiungi due punti dopo background-color. Salva e aggiorna: l'avviso dovrebbe avere testo blu, sfondo verde chiaro e padding di 16px. Il padding era già valido, quindi un po' di spazio può rimanere anche prima che gli errori di sintassi vengano corretti.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

Se la tua modifica non cambia la pagina, prima verifica di aver aperto il file corretto. Poi Esaminare CSS con DevTools: Styles e Computed per vedere quali valori si applicano effettivamente. Distingui errori di sintassi, selettori che corrispondono all'elemento sbagliato e conflitti tra regole prima di modificare altri valori.