Primi passi

Abbiamo a disposizione essenzialmente tre tipi di collocazione degli stili, adatti alle varie esigenze:

  • in linea, ossia posti all'interno del tag HTML da interessare
  • incorporati al documento HTML
  • ed esterni, collocati cioe' in file esterno e richiamati tramite un apposito link

  I fogli di stile in linea  

Ecco un tipico esempio di collocazione in linea, ossia all'interno del tag HTML. Questa soluzione e' utile quando si intendere limitare la loro azione ad un singolo elemento, lasciando inalterate tutte le altre proprieta' della pagina.

Testo sottolineato 

<FONT STYLE="text-decoration: underline">Testo sottolineato</FONT>

  I fogli di stile incorporati  

I fogli di stile incorporati nel documento ampliano la loro influenza a tutti i tag della pagina designati. Vanno posti all'interno dei tag <HEAD></HEAD> specificando appunto le parti da interessare. Ecco la sintassi: 


<HEAD>
<STYLE TYPE="text/css">
FONT {text-decoration: underline}
</STYLE>
</HEAD>

In questo caso tutto il testo della pagina verra' sottolineato. A questo punto e' doveroso precisare che la loro azione puo' essere limitata creando opportune classi, parleremo in seguito di questa importante caratteristica.

  Stili esterni  

I CSS contenuti in un file esterno assolvono appieno il compito per cui sono stati creati. La spiegazione e' semplice: si immagini un sito di grandi dimensioni, composto magari da 300 o piu' pagine. Se un bel giorno si rivelasse la necessita' di cambire il tipo di font, con HTML classico occorrerebbe agire su ogni singolo tag. Una operazione sicuramente estenuante. Adottando un foglio di stile esterno sarebbe sufficente cambiare una o al massimo poche righe di codice, con conseguente risparmio di tempo.

Ecco la sintassi per collegare la pagina al file esterno, da porsi anch'essa tra i tag <HEAD></HEAD>: 


<LINK HREF="stile.css" TYPE="text/css" REL="stylesheet">

La sintassi da usarsi nel file esterno e' simile a quella degli stili incorporati, con la differenza che deve contenere il solo codice di stile, senza i tag <STYLE> e riferirsi al tag BODY: 


BODY {font-family: verdana,arial,tahoma}

Occorre precisare che uno stile esterno altro non e' che un semplice file di testo, solitamente salvato con estensione .css. Per compiere questa operazione e' sufficente un editor di testo puro come Blocco Note.

Ovviamente anche la sintassi CSS prevede di 'nascondere' al browser eventuali spezzoni di codice che si indende non utilizzare. Cosi' pure gli eventuali commenti che si desidera inserire: 


/* FONT {font-family: verdana,arial,tahoma} */ 

/* lo spezzone di codice sopra e' nascosto, e anche questo commento */

Prossimo capitolo

© 2002 Poletti Stefano