CSS/Regole e sintassi
Wikibooks, manuali e libri di testo liberi.
Indice |
[modifica] 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.
[modifica] Stili esterni
È il sistema più usato ed è compatibile con tutti i browser. 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> [...]
[modifica] 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
[modifica] 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.
[modifica] 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; }
[modifica] 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
