Stili
Nonostante i molti concetti esposti nella prima parte, il risultato visibile nella pagina di riassunto finale non e' molto esaltante. Probabilmente il testo risultera' di difficile lettura, soprattutto se si usa un monitor ad alta risoluzione con la finestra del browser aperta al massimo.
Con i tag base non si puo' in effetti fare molto di piu'. L'HTML 4
prevedeva una valanga di tag appositi per impostare i colori e gli
attributi del testo, tag che, come gia' detto, hanno portato a codici
intricatissimi (spesso sbagliati e impossiili da gestire o correggere
a mano). L'XHTML 1.0 strict DTD fa piazza pulita di questi tag,
e richiede invece l'uso dei fogli di stile
, i famosi CSS
(Cascading Style Sheets).
Ogni caratteristica visuale come la dimensione del font, il colore, i margini ecc... va definita in un'apposita sezione style all'interno della sezione head (ma puo' anche essere posta in un file esterno che viene caricato assieme alla pagina)
Per un corretto uso dei CSS e' conveniente pensare subito alla
pagina come formata da tante sezioni rettangolari, sezioni che nel codice
sono racchiuse tra appositi tag contenitore
. Un tipico contenitore
e' il tag p
. Questo non solo identifica (marca) l'inizio e la fine di
un paragrafo, ma puo' essere anche idealmente visto come il delimitatore
di una sezione rettangolare visibile a video entro cui verra' mostrato il
testo stesso.
Questa area rettangolare, normalmente invisibile, puo' invece disporre di numerosi attributi visivi, per esempio un bordo, o un'immagine di sfondo, o dei margini trasparenti che la distanziano delle altre aree, o ancora puo' avere una larghezza o una posizione ben determinata sullo schermo. Tutte queste cose si possono impostare facilmente attraverso gli attributi di stile.
DIV
Il tag div
(divisione) rappresenta il contenitore per eccellenza, serve
solo per questo, per contenere testo o altri contenitori. Una qualsiasi
sezione di testo puo' essere racchiusa tra <div> e </div>, e
tramite gli stili si puo' regolare il suo aspetto. Esempio:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova CSS</title>
<style type="text/css">
.quadro {border:2px dotted black; padding:10px; width:400px;
font-family:arial,sans-serif; font size:14px;
background-color:#e8e8e8; margin:10px; color:navy}
</style>
</head>
<body>
<div>
Questa area rettangolare, normalmente invisibile, puo' invece disporre
di numerosi attributi visivi, per esempio un bordo, o un'immagine di
sfondo, o dei margini trasparenti che la distanziano delle altre aree,
o ancora puo' avere una larghezza o una posizione ben determinata
sullo schermo. Tutte queste cose si possono impostare facilmente attraverso
gli attributi di stile.
</div>
<div class="quadro">
Questa area rettangolare, normalmente invisibile, puo' invece disporre
di numerosi attributi visivi, per esempio un bordo, o un'immagine di
sfondo, o dei margini trasparenti che la distanziano delle altre aree,
o ancora puo' avere una larghezza o una posizione ben determinata
sullo schermo. Tutte queste cose si possono impostare facilmente attraverso
gli attributi di stile.
</div>
</body>
Visualizza la pagina prodotta da questo codice...
Guardando il codice (di cui sono riportate le sole sezioni head e body)
si puo' vedere subito la nuova sezione style
all'interno della head.
Viene definito un nome, quadro (piu' correttamente una classe
), associato
ad una serie di attributi (border, padding width ecc...). Nel body ci sono
due testi uguali racchiusi tra due divisioni, la prima pura e
semplice, la seconda invece con specificata la classe di appartenenza (quadro).
Questo fa si che la prima div si comporta da puro contenitore
di testo (che viene percio' visualizzato con le impostazioni di default del
browser), mentre la seconda assume invece le caratteristiche visive specificate
nella classe quadro. Il risultato, che vale piu' di mille parole,
e' visibile cliccando sul link sotto l'esempio.
La potenza di questo sistema a forse non e' ancora del tutto evidente, ma pensiamo di volere diverse sezioni di testo di aspetto omogeneo... e' semplice, basta assegnare sempre la stessa classe a tutte le div che ci interessano. E poi si possono creare quante classi si vogliono per ogni necessita' di visualizzazione, una classe per la testata della pagina, una per il testo generale, una per le citazioni ecc... Inoltre, spostando la definizione degli stili in un file esterno, piu' pagine possono usare lo stesso file ed avere quindi un aspetto omogeneo. In questo caso basta cambiare gli attributi di una classe in questo unico file per variare l'aspetto di tutte le pagine.
Si vede anche quale livello di pulizia
del codice si e' in grado
di ottenere in questo modo. Una volta, con l'HTML 4, in mezzo al testo si
dovevano aggiungere un sacco di tag (che potevano contribuire per il 50%
alla lunghezza del file), con i CSS basta racchiudere il testo in una div e
assegnare una classe, per di piu' riutilizzabile da altre div e da altre
pagine.
CSS esterni (collegati)
La definizione degli stili dell'esempio riportato e' detta incorporata
,
in quanto e' posta all'interno della sezione head della pagina stessa.
Se invece volessimo modificare l'esempio precedente per includere le
informazioni di stile da un file esterno basterebbe sostituire
l'intera sezione style con:
<link rel="stylesheet" type="text/css" href="nomefile.css" />E nel file esterno basterebbe spostare le definizioni delle classi:
.quadro {border:2px dotted black; padding:10px; width:400px;
font-family:arial,sans-serif; font size:14px;
background-color:#e8e8e8; margin:10px; color:navy}
CSS inline
La terza forma per inserire delle informazioni di stile e' detta inline
,
cioe' interna alla linea (o meglio al tag) a cui lo stile va applicato. Per
esempio e' lecito definire direttamente uno stile cosi':
<div style="color:green;font-size:24px">Testo verde grande</div>Risultato:
C'e' da dire che questa forma assomiglia molto ai famosi tag dell'HTML 4 mescolati con il testo, percio' il suo uso andrebbe ridotto il piu' possibile, e applicato solo a grandi sezioni della pagina, non a piccoli frammenti del testo.
Ci si puo' chiedere come si comporta il browser se si trova di fronte a
stili definiti in piu' di un modo, magari in tutti e tre. In questo caso gli
stili inline hanno la priorita' sugli altri, segue lo stile incorporato e poi
quello esterno a priorita' minore, da qui il nome fogli di
stile in cascata
Stili applicati globalmente ai tag
Si e' visto che e' possibile assegnare una classe di appartenenza ad una divisione. La stessa cosa si puo' fare con qualsiasi tag, ma e' anche possibile stabilire una volta per tutte come deve apparire l'area racchiusa da quel tag ogni volta che lo si incontra nella pagina.
Per esempio e' possibile assegnare uno stile al tag p, e anche al body, il
tag body va infatti considerato come la scatolona principale
che contiene
tutto il resto, e come ogni altro contenitore/sezione rettangolare puo' avere
degli attributi visuali. Questi stili hanno effetto su tutta la pagina senza
bisogno di dichiarare nient'altro all'interno dei tag:
<style type="text/css">
body {background-color:white; color:black}
p {text-indent:1.5em}
</style>
Vediamo ad esempio come si potrebbe modificare la pagina di riassunto aggiungendo una div e un po'di stili incorporati nella head.
Visualizza la pagina riassunto modificata con i CSS...La pagina non e' comunque chissa' cosa, ma in ogni caso risulta molto piu' leggibile. Le uniche modifiche sono l'aggiunta della sezione style nella head, e l'aggiunta di una grossa divisione associata alla classe container, che contiene tutto il documento e serve per stabilirne una larghezza fissa di 700 pixel e a centrarlo nella pagina. Sono anche stati tolti i tag big dal testo preformattato, in quanto adesso e' possibile controllarne direttamente la grandezza tramite gli stili impostati sul tag pre.
SPAN
Il tag span
e' un po' quello che tt
e' rispetto a pre
.
Come pre definisce un intero paragrafo preformattato con font a larghezza
fissa, mentre tt serve allo stesso scopo ma per poche parole,
cosi' div definisce un'intera sezione mentre span racchiude una o poche parole.
Per esempio si puo' assegnare uno stile particolare ad un frammento di testo.
Definiamo la classe .evi
:
<style type="text/css">
.evi {background-color:yellow}
</style>
Possiamo assegnarla ad alcune parole con il tag span:
Questo testo <span class="evi">contiene delle parole</span> evidenziate.Risultato:
Stili logici
Per facilitare il compito di marcatura
di piccole porzioni del testo
esistono anche altri tag, che consentono di ridurre il numero di caratteri
da scrivere ogni volta che si deve usare quello stile. I principali
sono:
| <em> </em> | Enfatizzato, per default testo obliquo. |
| <strong> </strong> | Per default testo in grassetto come tag b |
| <code> </code> | Testo a spaziatura fissa. |
| <cite> </cite> | Citazione, per default testo obliquo |
E'evidente che a ciascuno di questi tag puo' essere assegnato uno stile diverso da quello di default e visivamente molto piu' ricco. Ad esempio invece di usare <span class="evi"> come nell'esempio precedente si potrebbe assegnare lo sfondo giallo al tag em:
<style type="text/css">
em {background-color:yellow}
</style>
Ed usarlo per evidenziare le parole volute:
Questo testo <em>contiene delle parole</em> evidenziate.Risultato:
Eredita' degli Stili
Abbiamo detto che gli stili influenzano una regione rettangolare dello schermo marcata da appositi tag nel codice. Abbiamo visto che il tag div funziona da contenitore e puo' essere associato ad una classe che ne stabilisce l'aspetto grafico. Abbiamo visto anche che lo stesso body puo' essere pensato come un grande supercontenitore che contiene tutto il resto.
Cosa succede allora se definiamo alcuni stili per il body e altri (o
magari anche gli stessi) per un div? Semplice, i contenitori interni
ereditano
gli stili del contenitore esterno, a meno che non siano
ridefiniti anche in quello interno. Sembra un giro di parole, ma significa
questo: se nel body definisco il colore del testo verde, tutti i contenitori
ereditano il colore verde, a meno che in uno di questi non si specifichi
un colore diverso. Questo e' un altro modo di intendere stili a cascata
.
Pertanto e' possibile definire nel contenitore piu' esterno le caratteristiche comuni, per esempio il colore o l'immagine di sfondo della pagina, e definire (o ridefinire) negli stili dei contenitori piu' interni le caratteristiche specifiche per quelle sezioni.
Breve panoramica sugli attributi di stile principali
si e' visto che gli attributi di stile possono essere applicati
ad un qualsiasi tag della sezione body (compreso il body), e che definiscono
l'aspetto visivo di una certa area rettangolare sullo schermo.
L'apparenza di quest'area rettangolare si regola principalmente
con i parametri margin, border, padding, width, height, background.
| Parametro | Esempi |
| margin | margin:12px; margin-top:8px; |
| border | border:1px solid red; border-bottom:2px dotted black; |
| padding | padding:8px; padding-right:16px; |
| width | width:700px; |
| height | height:120px; |
| background | background-color:#e0e0e0; background-color:yellow; background-image:url("nomefile.gif"); |
La barra in fondo a questa pagina per esempio e' definita con:
margin-top:12px; margin-bottom:12px; border-top:1px solid gray; border-bottom:1px solid gray; padding:2px; background-color:rgb(255,204,0);
Le caratteristiche del testo contenuto si impostano invece con i prametri text, font e color.
| Parametro | Esempi |
| text | text-align:left text-align:center; text-align:justify; text-decoration:underline; text-indent:2em; |
| font | font-family:arial,sans-serif; font-family:times new roman,serif; font-family:courier new,monospace; font-size:14px; font-weight:bold font-style:italic; |
| color | color:red; |
Gli attributi del testo della barra in fondo a questa pagina per esempio sono definiti con:
text-align:center; font-family:verdana,arial,sans-serif; font-size:12px;
Alcuni link di risorse utili riguardo i CSS e la progettazione di pagine usando gli stili.
| URL | Descrizione |
| www.constile.org/tutorial/introduzione_ai_css | Introduzione ai CSS |
| www.constile.org | Progettare siti con i CSS |
| http://www.html.it/css | Tutorial CSS |
| www.web-link.it/css/css.htm | Tutorial CSS |
| www.meyerweb.com/eric/css/edge | Cosa si puo' fare con i CSS (inglese) |
| http://jigsaw.w3.org/css-validator | Il validatore CSS del W3C (inglese) |
