CSS/Regole e sintassi

Wikibooks, manuali e libri di testo liberi.
< CSS

CSS esterni e interni[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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