I fogli stile "a cascata" (CSS = Cascading Style Sheet) sono mezzi per controllare il modo in cui sono formattati i tags html; sono stati introdotti da Microsoft nella terza versione di Internet Explorer, e sono parzialmente supportati da Netscape nella sua quarta versione. Essi rispondono all'esigenza di un maggiore controllo sullo stile di un documento, e di una gestione più facile di siti con molte pagine html, come si comprenderà meglio nel corso di questa esposizione.
L'html pone infatti essenzialmente due problemi.
Si riscontrano alcuni limiti nel controllo della formattazione, anche se questi forse non si rivelano immediatamente ai principianti: per es. posizionare un'immagine, creare una banda laterale, giustificare del testo in HTML sono problemi difficilmente risolvibili e per i quali si adottano di solito strumenti nati per tutt'altro scopo, quali le tabelle. Anche il controllo di alcuni aspetti tradizionali della progettazione grafica, come internlinea, stile, dimensione, ecc. è insufficiente.
Soprattutto, l'HTML è stato progettato per gestire singole pagine, e risulta molto pesante applicarlo a siti anche solo con una decina di pagine, in quanto lo stile va ridefinito per intero in ogni singolo documento.
Ci occuperemo a questo proposito solo dei fogli di stile incorporati e dei fogli di stile esterni, tralasciando i fogli di stile in linea, che hanno un interesse minore (e per i quali rimando comunque alla guida di html.it).
Per quanto concerne i problemi di visualizzazione di siti formattati con i CSS, citeremo la guida ai CSS di html.it: "Non siamo d'accordo con quanti ritengono questo limite insormontabile e rifiutano l'adozione dei CSS. Riteniamo che allo sviluppo del Web debba coincidere un costante aggiornamento del software da parte dei navigatori, soprattutto oggi che i due maggiori browser sono gratuiti (addirittura di pubblico dominio il sorgente di Netscape). Rammentiamo, infine, che i fogli di stile sono compatibile con: MS Internet Explorer 3 (parzialmente); MS Internet Explorer 4; MS Internet Explorer 5; Netscape navigator 4 (parzialmente)."
Osserviamo preliminarmente la diversa sintassi che regge gli attributi css rispetto a quelli dell'HTML classico:
– gli attributi sono inseriti tra parentesi graffe { }
– al posto del segno = vengono usati i due punti :
– gli argomenti consecutivi sono separati dal segno ; invece che dalla virgola ,
– gli attributi composti da piu' termini sono separati da un trattino -
La peculiarità di questi strumenti di formattazione è il fatto che essi vengono assegnati all'intero documento e non a singole istanze come nel caso dei tags html.
Per far ciò le istruzioni vengono inserite nella "head" del documento, all'interno di questi tag:
Eccone un esempio:
<HTML>
<HEAD>
<style type="text/css">
<!--
P {font-size:17px; font-family:verdana; color:green }
H1 {font-size:18px; font-family:arial; color:red }
TABLE {font-size: 20px;}
-->
</style>
</HEAD>
ecc.
Il tag <!-- --> serve, anche all'interno del "body", per inserire commenti che non verranno poi visualizzati nella pagina finale. Se per es. inserisco in un punto qualsiasi del body il tag <!--controlla tutte le andate a capo>, questo potrà essere utile a me come editor senza che vada ad interferire in alcun modo sulla visualizzazione finale. Le indicazioni di stile, dunque, sono introdotte in questo tag in modo che, se un browser non dovesse supportarle, queste non avrebbero alcun effetto e perciò non creerebbero alcun danno alla formattazione.
Per un'applicazione molto semplice, clicca qui.
Un discorso a parte meritano le classi.
Come si è visto, con i CSS incorporati posso formattare d'un colpo tutti i paragrafi, tutti i titoli H1, e così via.
Se tuttavia desiderassi che una sottoclasse dei paragrafi, o che un solo paragrafo o sottoparagrafo venisse formattato diversamente, dovrei:
1) marcarlo, all'interno del corpo del documento, con l'attributo "class" (che si pu8ò applicare a più paragrafi) o "id" (riferito a un solo paragrafo), per esempio in questo modo:
2) segnalare poi il tipo di formattazione desiderato all'interno del tag <style type="text/css">...</STYLE>, nel modo seguente:
<style type="text/css">
P.red {font-size: pixels; font-family:Verdana | Arial | times new roman ; color:nome del colore in inglese; background-color: nome del colore in inglese)}
#finale {text-align: right | left | center | justify; font-size: pixels; font-family: nome del carattere; color: nome del colore}
ecc.
</STYLE>
Ricordo qui che il valore dei colori (del testo, o del suo background) possono essere inseriti con 3 tipi di notazioni.
1) Si possono utilizzare i nomi inglesi dei colori: "red", "green", "blue" ecc.;
Eccovi qui una lista dei nomi inglesi dei colori; tra parentesi, la loro traduzione in codice esadecimale.
|
Black (#000000) | |
Green (#008000) |
|
Silver (#C0C0C0) | |
Lime (#00FF00) |
|
Gray (#808080) | |
Olive (#808000) |
|
White (#FFFFFF) | |
Yellow (#FFFF00) |
|
Maroon (#800000) | |
Navy (#000080) |
|
Red (#FF0000) | |
Blue (#0000FF) |
|
Purple (#800080) | |
Teal (#008080) |
|
Fuchsia (#FF00FF) | |
Aqua (#00FFFF) |
(Lista completa al sito http://html.miningco.com/library/bl_namedcolors.htm)
Quindi, nei fogli di stile scriveremo in alternativa:
{color: blue}
{color: #0000FF}
{color: rgb (0,0,255)}
I fogli di stile esterni sono particolarmente comodi nella creazione di siti con parecchie pagine a cui si voglia dare uno stile uniforme. Con questo sistema infatti le istruzioni per lo stile dei singoli marcatori vengono raggruppate in un documento indipendente, che verrà salvato con estensione CSS, la qual cosa 1) permette di risparmiare tempo in fase di creazione del sito; 2) rende agevoli eventuali modificazioni successive da portare allo stile di tutto il sito.
Immaginiamo, per esempio, di voler modificare leggermente il background di un sito con mille pagine: al posto di modificare le impostazioni di tutte le pagine del sito, con i fogli di stile esterni basta apportare solo una modifica al file esterno css.
L'utilizzo di file esterni, poi, non impedisce l'uso contemporaneo dei fogli di stile incorporati, che possono continuare ad essere usati qualora si voglia dare una formattazione leggermente diversa a una singola pagina o a qualche elemento di essa. Le istruzioni date nei fogli di stile incorporati, in questo caso, "prevarranno" su quelle incluse nei css esterni, con un effetto, appunto, a "cascata".
Il file dei fogli di stile esterni può essere creato semplicemente con il Blocco Note di Win95-98, non necessita di alcuna intestazione html, e conterrà le indicazioni di stile secondo la stessa sintassi vista sopra per i fogli di stile incorporati.
Per es.:
A questo punto occorre salvare il file con un'estensione .css, e con un nome a piacere, inserendolo possibilmente nella stessa cartella che contiene le altre pagine del documento.
Si è creato così un documento con delle indicazione di stile per i titoli dei due livelli 1 e 2.
Perché questo sia attivo, occorre poi ovviamente collegarlo alle altre pagine del sito, inserendo tra i tag <HEAD>...</HEAD> di tutte le pagine il seguente codice:
Href è connesso semplicemente con il nome del file – in questo caso, style.css – in quanto nell'esempio si intende che il file css sia stato salvato nella stessa cartella dei documenti del sito.
Altrimenti, come si è già ripetuto sopra a proposito di tutti i file connessi a un sito, occorrerebbe specificare il percorso completo che porta al documento CSS in questione.
Per avere due esempi, di diversa complessità, dell'uso dei file esterni css, potete cliccare su
1) Il file css della guida CLR del sito www.bmanuel.org (vi segnale che per creare questo rimando è stato necessario salvare il file con un'estensione txt al posto che css).
2) Il file css di questo insieme di pagine.
***************************************************************************************
| (0) | Presentazione. | ||||||||
| (1) | Nozioni introduttive di HTML. | ||||||||
| (2) | Tabelle, immagini, links. | ||||||||
| (3) | Introduzione ai fogli di stile CSS. | ||||||||
| (4) | Modelli scaricabili. | ||||||||
| (5) | Riferimenti. | ||||||||