CSS/Regole e sintassi

CSS

Copertina

Tutti i moduli · Sviluppo

Versione in PDF

versione stampabile

Copertina

Modifica il sommario

CSS esterni e interni

Gli stili di una pagina possono essere definiti sia all'interno del file nel quale devono operare, sia in un file a parte.

Gli stili esterni solitamente vengono usati se si hanno molte pagine a cui applicare il medesimo stile. Questo permette di non fare confusione nel lavoro di modifica e revisione.
Gli stili interni vengono usati se le pagine sui cui operare sono veramente poche o se il sito è semplice (questo sistema è sconsigliato perché nasconde una delle potenzialità dei CSS, ovvero la possibilità di applicarli a più pagine contemporaneamente).

Si noti che i CSS vengono validati dal validatore W3C solamente se sono esterni.

Stili esterni

Per inserire un collegamento ad uno stile esterno alla pagina, usiamo il tag <link /> nell'intestazione della nostra pagina:

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="stile.css">
  </head>
  [...]

Il seguente sistema di importazione è invece più adatto a risolvere problemi di compatibilità tra vecchi e nuovi browser:

 [...]
 <style>
  @import url(stile.css);
 </style>
 [...]

Stili interni

Questo sistema permette di inserire dei CSS direttamente all'interno della pagina:

[...]
 <style type="text/css">
   ...codice...
 </style>
[...]

Si ricordi che questo sistema non permette la validazione da parte del W3C Validator

Stili inline

L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style applicabile ad ogni elemento HTML. Questo sistema, chiamato talvolta stile inline, è utilizzato all'interno degli elementi del codice HTML della pagina e può risultare utile se c'è bisogno di aggiungere uno stile unico per l'elemento.

<elemento style="regole_di_stile">

Se ad esempio si vuole formattare un elemento Fieldset in una pagina HTML, bisogna operare come segue:

 <fieldset style="color:red;font-size:14px">

In questo caso questo elemento, solo questo nella pagina, avrà il testo al suo interno rosso e grande 14px. Si ricorda che questa modalità è fortemente deprecata dalle più recenti versioni dell'HTML.

Sintassi fondamentale

Un foglio CSS è semplicemente un insieme di definizioni dello stile da applicare a determinati elementi della pagina. La loro sintassi è:

selettore { dichiarazioni }

Le dichiarazioni tra parentesi graffe racchiudono coppie di proprietà : valore separate da un punto e virgola. Ad esempio:

 p { font-size: 12px; }

è un foglio di stile con una sintassi valida. In particolare, il valore per la proprietà font-size sarà 12px. Per separare i valori di una stessa proprietà, vengono utilizzate le virgole:

 p { font-family: Arial, Helvetica, Sans Serif; }

Commenti

All'interno di un foglio di stile è possibile inserire dei commenti, ossia porzioni di testo che verranno ignorate dal browser, delimitati da /* e */, che si possono estendere su una o più righe.

Questo può risultare utile soprattutto nei casi di collaborazione a coloro che non hanno scritto di prima mano il codice; può però risultare utile anche all'autore stesso, ad esempio per poter riprendere il proprio codice tra le mani dopo un lungo periodo di tempo; inoltre può risultare comodo per eliminare temporaneamente porzioni di codice durante la fase di test delle proprie pagine web.

selettore {
 /* questo verrà ignorato*/
}

/* anche_questo_selettore {
   e_questa: proprietà
} */

/* *attenzione*: mai annidare i commenti
/* il browser farà come se questo testo non esistesse */ <-- qui si chiude il commento
   ma questo testo verrà letto
   */ <-- questo genera un errore