Word

I fogli di stile
a cura di Emanuele Lana
Prerequisiti:
per una piena comprensione:
9 conoscenza del linguaggio HTML
9 capacità di creare una pagina HTML, conoscendo anche i principali tag
HTML, i link e l'inserimento delle immagini
per una comprensione parziale:
9 interesse per la creazione di materiali da pubblicare su web
9 conoscenza minima dei tag HTML che vengono creati per noi da HTML
Editor (come NVU, FrontPage, Dreamweaver ecc.)
Obiettivi:
avere le informazioni minime per addentrarsi nel mondo sconfinato dei fogli di stile
Premessa
L'argomento CSS (se non sai ancora che cos'è, tra poco lo capirai...) è vastissimo e il web è ricco di
risorse in proposito: guide, manuali ecc. Molte sono in lingua inglese. In particolare uno dei siti che
preferisco per imparare in ambito informatico è http://www.w3schools.com. È un sito fatto apposta
per quelli che vogliono imparare il funzionamento di programmi legati in qualche modo a Internet e
al web. Chiaro, ben fatto, soprattutto consente di fare prove direttamente sul sito e vedere
immediatamente il risultato. Per esempio, riguardo ai CSS, posso provare a modificare uno stile e
vederne immediatamente il risultato via Internet, senza dover creare un file HTML, salvarlo,
pubblicarlo ecc).
Nota
Alcuni dei materiali che riporto in questa dispensa non sono miei: in tal caso sarà chiaramente
indicata la fonte: a ciascuno il suo!
Scopo di questo materiale
Lo scopo di questa risorsa didattica è solamente di fornire l'ABC per l'uso dei fogli di stile nella
creazione di pagine HTML. Non sono un maestro nell'uso dei CSS: ho ancora molto da imparare
anch'io. Tuttavia, penso di poter aiutare almeno un po' chi ha voglia di fare qualche tentativo per
migliorare le proprie pagine HTML.
Perché usare i CSS
Se abbiamo già creato pagine HTML e magari abbiamo anche un sito funzionante -perfino
potremmo esserne i webmaster- senza aver mai usato i fogli di stile (perché quando si parla di CSS
è poi questo che intendiamo. CSS è l'estensione del file che corrisponde al foglio di stile. E' un
acronimo che sta per Cascading Style Sheets), forse ci stiamo chiedendo perché non può bastare ciò
che già sappiamo fare, e che non è poco se il nostro sito funziona! Se dovessi rispondere in poche
parole direi: uso i fogli di stile per scrivere pagine HTML più ordinate e più facilmente gestibili
quando devo fare modifiche che riguardano non tanto il contenuto, quanto piuttosto quella che in
termini di Word chiameremmo formattazione: insomma l'aspetto estetico della nostra pagina
(dimensione, colore, sfondo, disposizione dei contenuti [i fogli di stile mi consentono di disporre il
contenuto della mia pagina senza dover necessariamente ricorrere a tabelle, con altre tabelle
all'interno e altre tabelle ancora e poi altre... e alla fine non si capisce più nemmeno come è costruita
la pagina per cui se devo modificarla diventa veramente difficile!). Aggiungerei anche che se voglio
creare materiali che rispondano ai criteri dell'accessibilità, l'uso dei fogli di stile è molto
importante. L'accessibilità è un altro discorso molto complesso. Rimanderei per una sintesi concisa
e ben fatta come punto di avvio a http://www.osservatoriotecnologico.it/internet (troverai un link
sulla sinistra "Accessibilità") e alle linee guida che trovi (in italiano) su
http://www.aib.it/aib/cwai/WAI-trad.htm e alle tecniche con cui realizzare siti accessibili su
http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505 (in inglese).
Vuoi saperne di più? L'accessibilità
Per sito accessibile, si intende un sito che è stato sviluppato pensando a un pubblico
molto vasto, costituito da individui che non sempre hanno tutti le stesse abilità (chi ha
problemi di vista, di udito, motori, più o meno accentuati, che in qualche misura possono
ridurre o annullare la capacità di navigare nel mio sito. Due esempi molto semplici:
1) se nel mio sito naviga qualcuno ipovedente o non vedente (può farlo utilizzando
appositi browser vocali o screen reader, che sono capaci di leggere il contenuto delle
pagine HTML), tutta la parte relativa ai colori non sarà 'visibile', perciò non posso
pensare di usare i colori come elemento connotativo di alcune parti della mia pagina.
Se nelle prime righe scrivo in colore rosso un avviso per chi naviga nel mio sito, tale
avviso non sarà percepito come tale da chi naviga nel mio sito e non vede. Devo
trovare un sistema alternativo per segnalarne l'importanza.
2) se il mio sito ha i link costituiti solo da immagini e chi naviga usa un browser testuale
(che non visualizza le immagini in alcun modo), come potrà muoversi tra le pagine
del mio sito? Devo usare un metodo alternativo che consenta la navigazione anche a
chi non visualizza le immagini nel browser.
viene visto da qualcuno quando si crea una pagina web sono importanti 3 cose
È importante capire che la nostra pagina HTML è costituita da 3 elementi:
9 contenuto: sono le parole, le immagini ecc.
9 struttura: è la gerarchia che esiste tra gli elementi all'interno della pagina (per
esempio ci può essere un titolo principale e un sottotitolo)
9 presentazione: si riferisce allo stile con cui il documento è visualizzato (dimensione
carattere, colore, tipo di carattere ecc.)
Di solito questi 3 elementi sono fusi insieme: il mio file HTML ha tutto insieme: la
presentazione è inserita dentro la pagina HTML
Esempio (tratto dal sito osservatoriotecnologico citato prima):
<body>
<p><font size="7"
face="Times New Roman, Times, serif">
La Divina Commedia
</font></p>
<p><font size="5">Inferno</font></p>
<p><font size="4"><strong>Canto 1</strong></font></p>
<p><font size="3">
Nel mezzo del cammin di nostra vita<br>
mi ritrovai per una selva oscura,<br>
ch&eacute; la diritta via era smarrita. </font>
</p>
<p><font size="5">Purgatorio</font></p>
<p><font size="4"><strong>Canto 1</strong></font></p>
<p><font size="5">Paradiso</font></p>
<p><font size="4"><strong>Canto 1</strong></font></p>
...
</body>
Su fondo bianco vedi i tag che riguardano la presentazione e che sono fusi insieme al
contenuto. I vari paragrafi sono differenziati tra loro solo grazie a dimensione e aspetto
diverso (grassetto: con il tag strong, simile al tag b, che forse conosci di più).
L'accessibilità mi richiede di arrivare a questo risultato, usando i fogli di stile:
<body>
<h1>La Divina Commedia</h1>
<h2>Inferno</h2>
<h3>Canto 1</h3>
<p class="testo">
Nel mezzo del cammin di nostra vita<br>
mi ritrovai per una selva oscura,<br>
ch&eacute; la diritta via era smarrita.</p>
<p class="testo">
Ahi quanto a dir qual era &egrave; cosa dura<br>
esta selva selvaggia e aspra e forte<br>
che nel pensier rinova la paura!</p>
<h2>Canto 2</h2>
<h3>Purgatorio</h3>
...
<h2>Canto 1</h2>
<h3>Paradiso</h3>
...
</body>
Su fondo bianco vedi che cos'è cambiato: per esempio vengono utilizzati i tag h1, h2, h3
che servono per dare indicazioni relative alla struttura del testo (h sta per heading, cioè
titolo: come in Word trovi Titolo1, Titolo2, Titolo3). Perciò H1 identifica il titolo principale,
H2 il titolo delle cantiche e H3 il titolo dei canti. L'uso dei livelli di struttura con il tag H1
ecc. invece che usando la dimensione variabile del testo (prima c'era font size="5", poi
font size="4" e poi font size="3") consente anche a chi non vede di avere indicazioni più
precise sulla struttura del nostro. se ci vedo è chiaro che un carattere più grande segnala
un livello più importante, ma se non vedo non mi serve a nulla. invece H1 mi dà
informazioni sulla struttura. L'informazione che compare nel tag p class="testo" è il cuore
dei fogli di stile. Lo imparerai tra pochissimo.
Introduzione ai CSS
Se sei arrivato fin qui, vuol dire che sei pronto ad affrontare un nuovo capitolo nella creazione dei
siti! Il materiale che ora leggerai è stato da me tradotto dal sito che indicato all'inizio,
w3schools.com. Se sai l'inglese, naturalmente potrai leggerlo direttamente sul sito: ti converrà
comunque andare a visitare le pagine, perché quando vedrai il link Try out potrai fare le tue prove
modificando codice e vedendo subito il risultato.
[Traduzione a cura di Emanuele Lana di http://www.w3schools.com/css/css_syntax.asp con alcuni
adattamenti relativi agli esempi utilizzati]
Consiglio: prima di leggere queste pagine puoi prepararti un esempio con cui lavorare.
Anche se non ti è chiaro ancora tutto, copia questo codice nel blocco note e poi salva il file con
nome provacss.html e infine apri il file con Internet Explorer per vedere se tutto funziona
<html>
<head>
<title>La mia pagina con fogli di stile!</title>
<link
rel="stylesheet"
type="text/css"
href="miostile.css" />
</head>
<body>
<h1>La Divina Commedia</h1>
<h2>Inferno</h2>
<h3>Canto 1</h3>
<p>
<span>Nel mezzo del cammin di nostra vita</span><br>
mi ritrovai per una selva oscura,<br>
ch&eacute; la diritta via era smarrita.</p>
<p>
Ahi quanto a dir qual era &egrave; cosa dura<br>
esta selva selvaggia e aspra e forte<br>
che nel pensier rinova la paura!</p>
</body>
</html>
Ora devi avere Internet Explorer aperto con la pagina sulla Divina Commedia.
Bene, senza chiudere Internet Explorer, apri il blocco note e salva il file (vuoto: sì, vuoto!) con
nome miostile.css. Attento che il file sia salvato nella stessa cartella in cui si trova
provacss.html
A questo hai aperta la finestra di Internet Explorer, il file nel blocco note, ancora tutto vuoto, e il
file con gli appunti che stai leggendo (se non te li sei stampati...!)
Sei pronto per imparare a creare il tuo foglio di stile: buon lavoro!
Sintassi
La sintassi CSS è fatta di tre parti: un selettore, una proprietà e un valore:
selettore {proprietà: valore}
Il selettore, solitamente, è il tag/elemento che vuoi definire; la proprietà è l'attributo che vuoi
cambiare; ogni proprietà può avere un valore. La proprietà e il valore sono separati dai due punti e
racchiusi tra parentesi graffe:
Nel file miostile.css scrivi
body {color: blue}
Vuoi saperne di più? Le parentesi graffe
Sulle tastiere italiane non c'è il tasto delle parentesi graffe. Perciò devi usare i codici
ASCII, che ottieni premendo il tasto ALT (non ALT Gr!) e tenendo premuto componi sul
tastierino numerico (attento! se non è accesa la luce del tastierino numerico non
funzionerà) 123. Così hai ottenuto una parentesi graffa aperta. Quella chiusa sarà fatta
così: tieni premuto ALT e poi digita sul tastierino numerico 125
Ora salva il file. Poi clicca sulla finestra di Internet Explorer, che visualizza la pagina
provacss.html e aggiorna premendo F5: dovresti vedere che tutto il testo è in blu. Perché?
Perché hai definito che il tag body abbia il colore del testo blu. E tutto questo senza usare nessun tag
<font ... color ecc.
Se il valore è costituito da più parole, devi racchiuderle tra doppie virgolette:
Nel file miostile.css scrivi
p {font-family: "tahoma"}
Ora salva il file. Poi clicca sulla finestra di Internet Explorer, che visualizza la pagina
provacss.html e aggiorna premendo F5
Se vuoi specificare più di una proprietà, devi separare ciascuna proprietà con un punto e virgola.
L'esempio mostra come definire un paragrafo con allineamento centrato, con testo colore rosso:
Nel file miostile.css scrivi
Nota bene: nel foglio di stile puoi avere una sola definizione per il tag p, perciò ti
conviene cancellare l'esempio precedente p {font-family: "tahoma"} e
sostituirlo con questo:
p {text-align:center;color:red}.
p {text-align:center;color:red}
Ora salva il file. Poi clicca sulla finestra di Internet Explorer, che visualizza la pagina
provacss.html e aggiorna premendo F5
[ora ti ricorderai penso che devi sempre salvare il file del foglio di stile e poi aggiornare la finestra
di Internet, quindi non te lo ripeto più]
Perché le definizioni degli stili siano più leggibili, conviene scrivere ogni proprietà su una riga
distinta e inserire una tabulazione prima della proprietà:
p
{
text-align: center;
color: black;
font-family: arial
}
Raggruppamento
Puoi raggruppare i selettori. Separa ogni selettore con la virgola. Nell'esempio abbiamo raggruppato
tutti gli elementi header, che saranno tutti scritti in verde:
h1,h2,h3,h4,h5,h6
{
color: green
}
Il selettore di classe
Con il selettore di classe puoi definire diversi stili per lo stesso tipo di elemento HTML.
Supponiamo che vogliamo due tipi di paragrafo: uno allineato a destra e uno centrato. Ecco come
puoi farlo usando gli stili:
p.right
{
text-align: right
}
p.center
{
text-align: center
}
Ora salva il file miostile.css
Nel documento HTML devi usare l'attributo class:
<p class="right">
Nel mezzo del cammin di nostra vita<br>
mi ritrovai per una selva oscura,<br>
ch&eacute; la diritta via era smarrita.</p>
<p>
Ora salva il file provacss.html
E finalmente aggiorna la finestra di Internet Explorer
Nota: Un solo attributo classe può essere specificato per un elemento HTML!
Questo esempio NON è valido!!
<p class="right" class="center">
Paragrafo.
</p>
Puoi anche omettere il nome del tag nel selettore, per definire uno stile che sarà usato da tutti gli
elementi HTML che hanno una certa classe specificata.
In questo esempio tutti gli elementi HTML con class="center" saranno centrati:
.center
{
text-align: center
}
Nel codice seguente l'elemento H1 e P hanno class="center". Ciò significa che entrambi gli
elementi useranno le definizioni del selettore ".center".
<h1 class="center">
Heading centrato
</h1><p class="center">
Paragrafo centrato
</p>
il nome di una classe NON può cominciare con una cifra, perché non funzionerà in Mozilla/Firefox
Il selettore id
Con il selettore id puoi definire lo stesso stile per diversi elementi HTML
Questa regola sarà applicata a tutti gli elementi che hanno un attributo id con valore "green":
#rosso
{
color: red
}
La regola si applica agli elementi H1 e P:
<h1 id="green">Testo</h1>
<p id="green">Testo</p>
Questa regola sarà applicata solo all'elemento SPAN che ha un attributo id con valore "rosso":
span#rosso
{
color: red
}
La regola seguente si applica all'elemento SPAN che ha un id con valore "rosso":
<span id="rosso">Nel mezzo del cammin di nostra vita</span>
Perciò NON funziona per l'elemento H1:
<h1 id="rosso">Some text</h1>
Nota bene: il nome di un ID NON può cominciare con una cifra, perché non funzionerà in
Mozilla/Firefox
Commenti nei fogli di stile
Puoi inserire commenti, che saranno ignorati dal browser. Un commento comincia con /* e finisce
con */
/* Questo è un commento */
p
{
text-align: center;
/* Un altro commento
color: black;
font-family: arial
}
*/
Ora che sappiamo come si crea un foglio di stile, dobbiamo imparare a collegare le nostre pagine
HTML con il foglio di stile.
[Traduzione a cura di Emanuele Lana di http://www.w3schools.com/css/css_howto.asp]
Come inserire un foglio di stile
Quando un browser legge un foglio di stile, formatta il documento secondo le definizioni in esso
presenti. Ci sono tre modalità per inserire un foglio di stile:
Foglio di stile esterno (consigliato)
E' ideale quando lo stile è applicato a molte pagine. Per cambiare l'aspetto del sito, è sufficiente
cambiare un solo file (il foglio di stile).Ogni pagina deve fare riferimento al fogli odi stile usando il
tag <link> che deve essere contenuto all'interno della sezione head:
<head>
<title>La mia pagina con fogli di stile!</title>
<link rel="stylesheet" type="text/css" href="miostile.css" />
<link >
</head>
Il foglio di stile esterno può essere scritto con il blocco note.
Il file non dovrebbe contenere tag html e dovrebbe essere salvato con estensione .css.
Esempio di foglio di stile:
hr
{
color: sienna
}
p
{
margin-left: 20px
}
body
{
background-image: url("images/back40.gif")
}
NON lasciare spazi tra il valore e le unità.
Se scrivi "margin-left: 20 px" invece di "margin-left: 20px"
funzionerà solo in Internet Explorer6, ma non funzionerà in Mozilla/Firefox o Netscape.
Foglio di stile interno
Dovrebbe essere usato quando un singolo documento ha un suo stile particolare. Gli stili interni
vanno definiti nella sezione head usando il tag <style>:
<head>
<title>La mia pagina con fogli di stile!</title>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Nota: un browser ignora tag sconosciuti. Un browser vecchio, che non supporta i fogli di stile, non
li utilizza, ma li visualizza sulla pagina. Per evitare questo problema conviene nascondere il foglio
di stile:
<head>
<title>La mia pagina con fogli di stile!</title>
<style type="text/css">
<!-hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
<!-- apre un commento in HTML (attento! nel foglio di stile un commento invece si apre con /*
--> chiude un commento in HTML (attento! nel foglio di stile un commento invece si chiude con
*/
Stili in linea
Non conviene usarlo spesso, perché si perde il vantaggio di avere un foglio di stile 'centralizzato'
modificando il quale si modifica tutto il sito. Andrebbe usato solo per una particolare situazione.
Per usare stili in linea, devi utilizzare l'attributo style per il tag. L'attributo style può contenere
qualunque proprietà CSS. L'esempio seguente mostra come cambiare colore e margine sinistro di
uno specifico paragrafo:
<p style="color: sienna; margin-left: 20px">
Testo del paragrafo
</p>
Validatori
Come abbiamo detto, quando una pagina viene interpretata dal browser, se ci sono errori nel codice
HTML o nel foglio di stile, non sempre ne abbiamo la percezione: certo, se ci sono errori
naturalmente non vedremo tutto come dovrebbe essere, ma ciò non aiuta a capire quale sia l'errore.
Esistono dei validatori, applicazioni create appositamente per verificare la validità del nostro foglio
di stile. Per validare un foglio di stile è necessario che sia salvato nel nostro sito. Poi raggiungiamo
l'indirizzo http://jigsaw.w3.org/css-validator/ dove sarà possibile digitare l'indirizzo del nostro
foglio di stile e verificare se tutto è ben fatto.