Sintassi di base di CSS

Sintassi CSS

Le regole CSS sono composte da due parti principali: il selettore e una o più dichiarazioni.

selector {declaration1; declaration2; ... declarationN }

Il selettore è generalmente l'elemento HTML che desideri modificare lo stile.

Ogni dichiarazione è composta da una proprietà e un valore.

Le proprietà (property) sono gli attributi di stile (style attribute) che desideri impostare. Ogni proprietà ha un valore. Le proprietà e i valori sono separati da due punti.

selector {property: value}

Questa riga di codice definisce il colore del testo degli elementi h1 come rosso e imposta la dimensione del font a 14 pixel.

In questo esempio, h1 è il selettore, color e font-size sono le proprietà, red e 14px sono i valori.

h1 {color:red; font-size:14px;}

La seguente illustrazione mostra la struttura del codice sopra:

Sintassi CSS

Suggerimento:Utilizza parentesi graffe per racchiudere le dichiarazioni.

Diversi modi di scrivere i valori e le unità

Oltre al termine inglese red, possiamo utilizzare il valore esadecimale #ff0000:

p { color: #ff0000; }

Per risparmiare byte, possiamo utilizzare la forma abbreviata del CSS:

p { color: #f00; }

Possiamo utilizzare valori RGB in due modi:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Attenzione, quando si utilizza RGB in percentuale, anche se il valore è 0, è necessario scrivere il simbolo di percentuale. Tuttavia, in altri casi non è necessario farlo. Ad esempio, quando la dimensione è 0 pixel, non è necessario utilizzare l'unità px dopo 0, perché 0 è 0 indipendentemente dall'unità.

Ricorda di scrivere le virgolette

Suggerimento:Se il valore è costituito da più parole, è necessario inserire virgolette intorno al valore:

p {font-family: "sans serif";}

Dichiarazioni multiple:

Suggerimento:Se si desidera definire più di una dichiarazione, è necessario separare ciascuna dichiarazione con un punto e virgola. Esempio: il seguente esempio mostra come definire un paragrafo centrato con testo rosso. L'ultima regola è che non è necessario aggiungere un punto e virgola, perché il punto e virgola in inglese è un simbolo di separazione, non di fine. Tuttavia, molti designer esperti aggiungono un punto e virgola alla fine di ogni dichiarazione, il che riduce al minimo la possibilità di errori quando si aggiungono o rimuovono dichiarazioni esistenti. Ecco come:

p {text-align:center}; color:red;}

Dovresti descrivere una proprietà per riga, in modo da migliorare la leggibilità della definizione di stile, come segue:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Spazi e maiuscole/minuscole

La maggior parte delle tabelle di stili contiene più di una regola, e la maggior parte delle regole contiene più di una dichiarazione. L'uso di dichiarazioni multiple e spazi rende le tabelle di stili più facili da modificare:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

L'inclusione di spazi non influisce sull'effetto del CSS nel browser, allo stesso modo, diversamente da XHTML, CSS non è sensibile alle maiuscole e minuscole. Tuttavia, c'è un'eccezione: se si lavora insieme a documenti HTML, i nomi delle classi e degli id sono sensibili alle maiuscole e minuscole.