CSS/Regole e sintassi

Wikibooks, manuali e libri di testo liberi.

< CSS

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 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>
  <title>Inserire i fogli di stile in un documento</title>
 <link rel="stylesheet" type="text/css" href="stile.css">
 </head>
<body>...

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

<html>
 <head>
  <title>Inserire i fogli di stile in un documento</title>
   <style type="text/css">
    ...codice...
   </style>
  </head>
<body>...

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

[modifica] Style

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 è 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

[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:

<style>
  p { font-size: 12px; }
 </style>

è un foglio di stile con una sintassi valida. In particolare, il valore per la proprietà font-size sarà 12px.

[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
Ricavato da "http://it.wikibooks.org/wiki/CSS/Regole_e_sintassi"
Strumenti personali
Altre lingue