manuale css guida css « Progettista Multimediale Davide Spallacci

Gestire la spaziatura, la distanza e l’allineamento del testo e dei link ipertestuali. Cambiamento del colore, della grandezza e gestione della sottolineatura Pag. 31

Introduzione ai fogli di stile

HTML soffre di limiti propri di un sistema di contrassegno ideato per scopi molto lontani da quelli attualmente richiesti dal Web design. Se questi limiti appaiono marginali agli occhi dei neofiti, risultano fastidiosi, e molto spesso immobilizzanti, per i professionisti formatisi nella grafica tradizionale. Posizionare un’immagine, creare una banda laterale, giustificare del testo in HTML diventa un problema risolvibile esclusivamente con strumenti nati per tutt’altro scopo (le tabelle, per esempio, nel 90% dei casi vengono utilizzate per posizionare elementi nella pagina, invece che per ordinare dati).
Il problema, in termini minimamente più tecnici, riguarda la classica separazione SGML tra stile, contenuti e struttura. HTML “tradizionale” non soddisfa questa condizione, ma anzi, ne esaspera la confusione.
Ma cosa significa separare lo stile dai contenuti? Consideriamo un sito Web mediamente complesso, con un numero di pagine HTML pari a 100. Poniamo che il testo adottato per l’esposizione degli argomenti sia un “arial” corsivo. Con gli strumenti classici di HTML il codice per ottenere questo risultato e’:

<FONT FACE=”ARIAL”><I>Testo della pagina</I></FONT>

ripetuto in tutte le 100 pagine del sito, a chiusura e apertura del testo da formattare. Semplice, ovvio e per molti versi banale. Ma cosa succede nel momento in cui scegliamo di modificare il tipo di carattere a tutte le pagine? Non c’e’ altra soluzione che aprire le 100 pagine e procedere ad altrettante modifiche, che sostituiscano il nome “arial” con il nuovo font scelto. Un webmaster di medie capacita’ puo’ impiegare solo qualche decina di minuti, che diventano ore per siti di grandi dimensioni. Bene, questa perdita di tempo e’ diretta conseguenza della promiscuita’ tra stile e contenuto, laddove il primo (il tag FONT) non e’ separato dal secondo (il testo della pagina).
Viene da se’ che la soluzione a questo problema e’ nella separazione tra i due elementi sopracitati, che nella pratica si risolve adottando i Cascading Style Sheets. D’ora in poi ci serviremo dell’acronimo CSS per richiamare questi “fogli di stile a cascata” che da tempo sono stati introdotti nel Web publishing, ma che solo negli ultimi mesi hanno conosciuto una grande diffusione.
Il termine “a cascata” (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e’ possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull’altro.
I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer, e parzialmente supportati da Netscape soltanto dalla quarta versione dell’omonimo browser. Chi accede con un browser obsoleto ad un documento formattato con fogli CSS, si trovera’ di fronte una pagina gestita dalle opzioni di default del browser (lo sfondo, per esempio, sarà grigio; il tipo di testo “times new romans” ecc).
I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni “CSS1″ prima, e “CSS2″ poi. Si rimanda a questi documenti ufficiali per ulteriori approfondimenti.
La presente guida non puo’ prescindere da tematiche squisitamente “filosofiche” sulle quali si basa l’intera struttura dei CSS, ma pone particolare attenzione all’uso pratico che di questi strumenti si fa nel Web publishing. In altre parole questo tutorial vuole fornire da subito gli strumenti per usare i CSS all’interno di Website, senza troppo dilungarsi su dissertazioni teoriche.
Un’ultima nota in conclusione riguarda i dubbi sull’adozione di un sistema, i fogli di stile, riconosciuti solo dalle ultime versioni dei browser e che quindi rischiano di tagliare fuori parte dei visitatori. 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)

Torna a indice

Fogli di stile in linea

I fogli di stile in linea sono concettualmente molto vicini alle regole dell’HTML classico, in quanto agiscono su singole istanze all’interno della pagina. Semplificando il concetto, i fogli di stile in linea agiscono su singole parti del documento, senza influenzare il resto della pagina. Se per esempio si vuole che una sola parte del testo di un documento abbia un certo carattere o una certa formattazione, si useranno campi standard di HTML, quali <SPAN> o <DIV>, per assegnare quello stile. Eccone un esempio:

<DIV STYLE=”font-size:18px; font-family:arial; color:red”>
Questo testo ha colore blue
</DIV>

In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag <DIV> e non per tutto il documento. In particolare abbiamo indicato come grandezza del carattere (font-size) 18 pixel; come tipo di carattere (font-family) il classico arial e come colore (color) il rosso. Il risultato che otteniamo e’ il seguente:

Questo testo ha colore rosso

La marcatura usata per ottenere questo effetto e’ <DIV> o in alternativa <SPAN>. L’uso dell’una o dell’altra e’ lasciato alla discrezionalita’ del progettista, anche se la prima marcatura e’ consigliata per lunghi blocchi di testo, mentre <SPAN> e’ consigliata per brevi frasi, proprio come quella dell’esempio.

Un siffatto sistema di stile e’ certamente funzionante ma non rispondente alle peculiarita’ tipiche dei CSS. Assegnare stili alle singole marcature, infatti, non risponde ai criteri di separazione tra stile e contenuti dei quali i CSS si fanno portatori. I fogli di stile in linea in un certo senso negano la vera natura di questi strumenti, nati per assegnare stili a intere pagine o addirittura a gruppi di documenti. Il nostro consiglio e’ di servirsi dei fogli di stile in linea esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website.

Torna a indice

Fogli di stile incorporati

Prima di passare alla trattazione dei fogli di stile incorporati, ci preme sottolineare la diversa sintassi che regge questi attributi (e anche i successivi “css esterni”) rispetto ad 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 -

 Quando un attributo e’ considerato proprieta’ di un oggetto i trattini si eliminano e le iniziali dei termini diventano maiuscole (per esempio: font-style diventa FontStyle).

Premesso questo passiamo a trattare approfonditamente i fogli di stile incorporati. Banalizzando, si tratta di stili a meta’ strada tra i gia’ esaminati CSS in linea e i successivi CSS esterni. La peculiarita’ fondamentale di questi attributi di stile e’ di venire assegnati all’intero documento e non a singole istanze come l’HTML classico. Si tratta, dunque, di un insieme di definizioni di stile inserite tra marcature <STYLE> e posizionate tra i tag <HEAD> del documento e il <BODY> dello stesso.

Un esempio di foglio di stile incorporato e’ il seguente:

<style type=”text/css”>

H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }

</style>

</HEAD>
<BODY>

<H1>Questo testo e’ di colore verde, impostato su verdana di 17 pixel</H1>
<H2>Questo testo e’ di colore rosso, impostato su arial di 18 pixel</H2>

</BODY>

</HTML>

In questo esempio abbiamo impostato un foglio di stile incorporato tra i tag <HEAD> del documento, stabilendo due diversi tipi di carattere:

 verdana verde di 17 pixel per il primo identificato dal marcatore <H1>

 arial rosso di 18 pixel per il secondo, identificato dal marcatore <H2>
I marcatori H1 e Hx in generale possono sostituirsi con altri marcatori di paragrafo quali <P>. Impostato il CSS incorporato all’interno del documento gli stessi stili vengono assegnati raccogliendo porzioni di testo tra marcatori <H1></H1> e <H2></H2>.
In questo modo cambiando i valori dei soli attributi impostati nel foglio di stile (aumentando la grandezza o modificando il colore, per esempio), il testo del documento marcato da <H1> e <H2> viene automaticamente aggiornato al nuovo stile.
L’attributo TYPE del tag <STYLE> definisce il linguaggio in formato MIME del foglio di stile. In altre parole questo attributo indica al browser il tipo di foglio di stile supportato, altrimenti ignorato. Ms Internet Explorer supporta i CSS solo in formato MIME, ma esistono i CSS in formato text/jass, cioe’ accessibili in javascript.
Se l’attributo TYPE viene omesso, il browser lo identifica di default con text/css.
Anche Netscape communicator supporta questo attributo.
Rispetto ai fogli di stile in linea i CSS incorporati consentono il controllo di un intero documento, ma per interi siti non sono sufficienti a fornire il supporto tecnico necessario. Se per esempio per il testo del documento e’ stato usato un certo font e improvvisamente si decide di modificarlo, sara’ necessario agire su tutti i documenti del sito perche’ le modifiche si estendano all’intero Website.

Torna a indice

Fogli di stile esterni

I fogli di stile esterni (o collegati) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarita’ dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo. Sulla scorta di quanto finora esposto si presentano tre casi:

 il sito e’ costruito in HTML classico, per cui sara’ necessario agire su ogni singola marcatura di ognuna delle 1000 pagine;

 il sito e’ costruito adottando fogli di stile in linea, per cui anche in questo caso sara’ necessario agire su tutte le singole marcatura di ognuna delle 1000 pagine;

 il sito e’ costruito con i fogli di stile incorporati, per cui si dovra’ comunque modificare l’intestazione di stile di 1000 documenti, anche se non si dovra’ agire sui singoli attributi della pagina che rimangono identici. Seppure l’ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti.
La soluzione a questo problema e’ che gli stili dei singoli marcatori vengano raggruppati in un documento indipendente dal resto delle pagine, e da queste semplicemente richiamati con una semplice riga di codice. In questo modo una modifica sul file “centralizzato” genera automaticamente la stessa modifica su tutti i documenti che lo richiamano. Sulla scorta di questa ovvia considerazione si basano i fogli di stile esterni esaminati in questa lezione.

Creare un foglio di stile esterno e richiamarlo all’interno delle pagine HTML e’ semplice e consta di 5 fasi:

 apri una pagina senza alcuna intestazione HTML con blocco notes di Win95-98 o il tuo editor HTML e inserisci al suo interno il seguente codice:

H1 { font-size:17px; font-family:verdana; color:green }
H2 { font-size:18px; font-family:arial; color:red }

 Se stai usando blocco notes di Win95-98 vai su FILE/SALVA CON NOME nella prima voce di menu in alto a sinistra. A questo punto si apre una finestra di salvataggio con due campi da riempire: nome file e salva come. Nel primo campo inserisci il nome style.css e nel secondo imposta come “tutti i file” e finalmente premi il tasto “salva“.

 Creato il file style.css (.css e’ l’estensione assegnata ai file di stile esterni, mentre il nome “style” puo’ essere modificato a proprio piacimento) copialo nella cartella principale del tuo sito Web.

 Apri i documenti HTML del tuo sito e inserisci al loro interno, tra i tag <HEAD> il seguente codice:

<link rel=stylesheet href=”style.css” type=”text/css”>

La marcatura link identifica un file esterno al documento HTML che comunque lo riguarda direttamente. L’attributo rel indica che il file collegato e’ un foglio di stile (stylesheet). href richiama il percorso del file .css esterno (in questo caso il file si intende depositato nella stessa cartella in cui e’ presente il documento HTML; se cosi’ non fosse andrebbe inserito il percorso del file, per es.: href=”css/style.css”). L’attributo type ha la funzione vista in precedenza per i fogli di stile incorporati.

 All’interno del documento identifica gli stili da assegnare usando i marcatori <H1> e <H2>. Per esempio i titoli potrebbero essere stabiliti da <H1> e il testo delle pagine da <H2>, in questo modo:

<H1>Titolo della pagina</H1>

<H2>Testo della pagina di prova, Testo della pagina di prova, Testo della pagina di prova, </H2>

Il risultato di questo esempio e’ di stabilire per tutte le pagine del sito uno stile comune per i marcatori <H1> e <H2>, in modo tale che modificando il solo file esterno tutti i documenti HTML collegati saranno contestualmente aggiornati. Nell’esempio del sito di 1000 pagine, se l’esigenza fosse quella di modificare grandezza e stile dei titoli di pagina, sarebbe sufficiente agire sul marcatore <H1> del file esterno style.css.

In chiusura di questa disamina ci preme sottolineare la grandissima utilita’ dei fogli di stile esterni che consigliamo di usare il piu’ possibile. A fronte di una impostazione iniziale piu’ complessa degli altri stili, nel lungo periodo e per siti di grandi dimensioni ripagano ampiamente gli sforzi, oltre a consentire un inedito controllo di pagina e di stile.

Attributi di stile per il testo

Negli esempi a completamento di questo articolo, non a caso abbiamo usato l’attributo BODY. I fogli di stile, infatti, riconoscono questo attributo come valore di default di tutto il documento. Un po’ come accade per il tag <BODY> in HTML classico. Quindi, tutto cio’ che viene inserito all’interno di BODY sara’ assegnato all’intero documento.
Per gli esempi abbiamo usato fogli di stile incorporati, i quali possono tranquillamente raccogliersi in un file esterno secondo quanto visto nel capitolo “css esterni”.

Attributo font-family
Elenca la famiglia di font per lo stile di una pagina o di porzioni di essa. Si consideri, per esempio, di voler stabilire un font tipo “arial” per tutto il documento. Quello che segue e’ il modo corretto di impostare lo stile:

<STYLE>
BODY { font-family:arial }
</STYLE>

E’ possibile stabilire diversi ordini di preferenza, per cui in mancanza del primo font il browser interpreta il successivo. Per fare questo i nomi delle famiglie di font devono essere separate da una virgola.
Per nome di famiglia si intende uno dei caratteri quali Arial, courier new, times new roman, impact e innumerevoli altri (per i font si rimanda a FONT.it). I font con nomi composti da piu’ termini vanno inseriti tra apici doppi:

<STYLE>
BODY { font-family:arial, “courier new”, impact }
</STYLE>

Un’ultima alternativa e’ quella di servirsi di un nome generico di font. Si intendono con questo termine gruppi di font che seppur non identici, hanno delle peculiarita’ che li accomunano. In questo modo il browser cerchera’ il font disponibile sul computer del navigatore, in base all’indicazione del nome generico:

<STYLE>
BODY { font-family:serif }
</STYLE>

I fogli di stile riconoscono 5 categorie di font generici:

Serif Il termine si traduce in italiano “grazie” ed e’ consigliabile per lunghe sezioni di testo. Due casi tipici di font serif sono times new roman o garamond

<STYLE>
BODY { font-family:serif }
</STYLE>
Sans Serif Senza grazie. Tipici gli arial e gli helvetica

<STYLE>
BODY { font-family:”sans serif” }
</STYLE>
Cursive Font corsivi che imitano la calligrafica umana.

<STYLE>
BODY { font-family:cursive }
</STYLE>
Fantasy Caratteri decorativi come, per esempio, comic sans

<STYLE>
BODY { font-family:fanct }
</STYLE>
Monospace Questi font hanno la caratteristica di occupare uno spazio identico. Gli altri caratteri, infatti, occupano uno spazio per lettera proporzionale alla stessa. Un classico font monospace e’ il courier.

<STYLE>
BODY { font-family:monospace }
</STYLE>

Attributo font-size
Questo attributo stabilisce la dimensione del testo. Mentre HTML standard prevede soltanto 7 livelli predefiniti per la grandezza del testo (da font size=1 a font size=7), i fogli di stile peremettono un controllo molto piu’ preciso ed elastico, che non soffre di nessuna limitazione.

E’ possibile impostare lo stile in base a cinque diverse unita’ di misura:

Punti: questa unita’ di misura viene abbreviata con la sigla pt. Ogni punto rappresenta 1/72 di pollice. I punti fanno riferimento esclusivamente allo spazio verticale occupato sullo schermo, mentre la larghezza aumenta proporzionalmente all’aumentare della misura verticale.

<STYLE>
BODY { font-size:12pt }
</STYLE>
Pixel: si tratta dei punti presenti su uno schermo, e variano a seconda della risoluzione consentita dal monitor ed impostata dall’utente. Ai pixel si fa riferimento in molti esempi Javascript e per tutte le risoluzioni video consigliate (solitamente 800×600)

<STYLE>
BODY { font-size:12px }
</STYLE>
Pollici: classica unita’ di misura anglosassone, i pollici sono espressi dall’abbreviazione in

<STYLE>
BODY { font-size:1in }
</STYLE>
Centimetri: unita’ di misura comune di molti paesi occidentali ma poco usata nell’ambito della Web grafica

<STYLE>
BODY { font-size:3cm }
</STYLE>
Percentuale: unita’ di misura svincolata da valori predeterminati e variabili. Il valore percentuale si riferisce alla grandezza di default impostata nel browser. Per cui di fronte ad un browser che visualizza di default dei font a 14 pixel, un valore del 200% corrisponde a 28 pixel. Tale misura e’ variabile da utente ad utente.

<STYLE>
BODY { font-size:200% }
</STYLE>

La misurazione in percentuale fa parte di un sistema di dimensionamento relativo, cioe’ dipendente dalla misura corrente del browser. Esistono altri valori in sostituzione della percentuale analizzata in precedenza.

<STYLE>
BODY { font-size:smaller }
</STYLE>

definisce il font immediatamente piu’ piccolo rispetto a quello di default.

<STYLE>
BODY { font-size:larger }
</STYLE>

il contrario del precedente: definisce il font immediatamente piu’ grande rispetto a quello impostato dal browser.

<STYLE>
BODY { font-size:2em }
</STYLE>

La misura di riferimento e’ sempre quella di default, cio’ che cambia e’ il valore di riferimento stabilito in misura di 1:x.

Attributo font-style
Questo attributo indica lo stile per il font. E’ possibile impostare l’attributo su diversi valori:

<STYLE>
BODY { font-style:normal }
</STYLE>

Normal non visualizza alcuno stile particolare e si rifa’ a quello stabilito di default dal browser. E’ possibile sostituire “roman” a “normal”

<STYLE>
BODY { font-style:italic }
</STYLE>

Il classico testo corsivo che ben conosciamo da HTML classico e da tutti gli editor di testo.

<STYLE>
BODY { font-size:oblique }
</STYLE>

Questo attributo funziona apparentemente come “italic”, ma se ne differenzia perche’ rende obliquo verso destra il normale font, e non richiede il caricamento di un altro carattere come per italic.

Attributo font-variant
Questo attributo e’ simile a font-size, ma se ne differenzia perche’ assegna uno stile tutto maiuscolo. Se non e’ disponibile sulla macchina client la versione a maiuscole grandi del font, lo stile usera’ le maiuscole adattandone le misure. I valori da assegnare sono “normal” e “small-caps”

<STYLE>
BODY { font-variant: small-caps }
</STYLE>

Attributo font-weight
L’attributo font-weight stabilisce lo spessore del font come BOLD per HTML classico. E’ possibile assegnare a questo attributo 7 differenti valori:

<STYLE>
BODY { font-weight: extra-light }
</STYLE>

<STYLE>
BODY { font-weight: demi-light }
</STYLE>

<STYLE>
BODY { font-weight: light }
</STYLE>

<STYLE>
BODY { font-weight: medium }
</STYLE>

<STYLE>
BODY { font-weight: extra-bold }
</STYLE>

<STYLE>
BODY { font-weight: demi-bold }
</STYLE>

<STYLE>
BODY { font-weight: bold }
</STYLE>

Attributo text-decoration
Questo attributo consente di abbellire il testo con sottolineature e altri effetti. Puo’ assumere diversi valori: none, underline, italic e line-height:

<STYLE>
BODY { text-decoration: none }
</STYLE>

<STYLE>
BODY { text-decoration: underline }
</STYLE>

<STYLE>
BODY { text-decoration: italic }
</STYLE>

<STYLE>
BODY { text-decoration: line-height }
</STYLE>

Un altro effetto molto in voga in questi ultimi tempi (lo si ritrova anche nelle pagine di HTML.it) e’ quello che elimina le sottolineature dai link. Per fare questo e’ necessario impostare per i font incorporati il seguente codice:

<STYLE>
A { text-decoration: none }
</STYLE>

e per i fogli di stile in linea il seguente codice:

<A HREF=”http://www.html.it” STYLE=”text-decoration: none”>HTML.it</A>

Sulla falsariga di questo esempio sara’ possibile impostare i fogli di stile incorporati in modo tale che la sottolineatura appaio solo quando il mouse sfiora i link:

<STYLE>
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</STYLE>

In questo modo, quando il link e’ inattivo non e’ sottolineati, mentre quando il mouse sfiora il link viene attivata la sottolineatura.
Questo esempio funziona perfettamente con Internet Explorer, mentre con Netscape rende privo di sottolineatura il testo ma non riconosce A:hover.
Per ulteriori esempi e informazioni sull’argomento si rimanda alla sezione effetti su testo e link

Torna a indice

Attributi margini allineamento

I fogli di stile permettono di giustificare il testo senza l’uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all’interno di box. Ogni box ha delle proprieta’ che si possono dividere in tre categorie:

 Le proprieta’ dei margini che assegnano un bordo esterno al box;

 le proprieta’ di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini;

 le proprieta’ dei bordi che definiscono le linee grafiche intorno al box.

I valori di questi attributi sono espressi in pollici (in), centimetri (cm), pixel (px), punti (pt) e unita’ (em).
Semplificando il concetto, i fogli di stile sono impostati come se si trattasse di finestre indipendenti all’interno della pagina. Hanno, quindi, una loro grandezza e valori di impostazione. Tra questi, oltre al testo visto in precedenza ed al background che si vedra’ piu’ oltre, sono presenti i valori relativi ai bordi di tali pseudo-finestre.
Esistono vari attributi per i bordi e l’allineamento, vediamo quali.

Attributi margin-left, margin-right, margin-top, margin-bottom
Si tratta di quattro attributi che impostano la distanza tra il box contenente i CSS e gli elementi adiacenti, dai quattro margini:

<STYLE>
BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px }
</STYLE>

Attributo margin
I quattro valori visti in precedenza possono essere definiti con il solo attributo margin. Quando viene impostato questo valore, il browser assume come ordine il primo margine in alto (margin-top), il destro (margin-right), l’inferiore (margin-bottom) e il sinistro (margin-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assegnati in base al valore del lato regolarmente impostato:

<STYLE>
BODY { margin: 10px 10px 10px 10px }
</STYLE>

In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e’ correttamente indicato.

<STYLE>
BODY { margin: 10px 10px }
</STYLE>

In questo secondo esempio sono impostati solo due valori (margin-top e margin-right). I mancati margini sinistro e inferiore vengono desunti rispettivamente dal valore del margine destro e superiore.

Attributi padding-top, padding-bottom, padding-right, padding-left
Tali attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole hanno una funzione opposta a quella vista in precedenza per l’attributo margin. E’ possibile usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali:

<STYLE>
BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
</STYLE>

Attributo padding
Come per l’attributo margin, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto (padding-top), il destro (padding-right), l’inferiore (padding-bottom) e il sinistro (padding-left). Se ne vengono forniti solo due o tre, quelli mancanti vengono automaticamente assengati in base al valore del lato impostato:

<STYLE>
BODY { padding: 10pt 10px 110% 2in }
</STYLE>

In questo primo esempio tutti gli elementi hanno uguale distanza rispetto agli elementi vicini, e ognuno di essi e’ correttamente indicato.

<STYLE>
BODY { padding: 10pt 10px }
</STYLE>

Attributi border-top, border-bottom, border-right, border-left
Questi attributi definiscono lo stile e il colore di ogni elemento e vengono impostati con alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset e outset:

<STYLE>
BODY { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow }
</STYLE>

Attributi border-top-width, border-bottom-width, border-right-width, border-left-width
La funzione di questi attributi e’ di generare un effetto simile ai bordi delle table HTML. E’ possibile stabilire misure percentuali o di riferimento (em), oltre a parole chiave quali thin, medium e thick:

<STYLE>
BODY { border-top-width: 5px; border-left-width: 4pt; border-right-width: thick; border-bottom-width: 2em }
</STYLE>

Attributo border-width
Come per gli attributi margin e padding, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo border-width:

<STYLE>
BODY { border-width: 10pt 10px 1em 2in }
</STYLE>

Attributo border-color
Questo attributo definisce i colori dei quattro bordi del CSS nella loro globalita’, cioe’ senza possibilita’ di stabilire colori diversi per ognuno di essi:

<STYLE>
BODY { border-color: green }
</STYLE>

Attributo border-style
Questo attributo definisce lo stile dei quattro bordi del CSS nella loro globalita’, cioe’ senza possibilita’ di stabilire stili diversi per ognuno di essi. I valori sono specificati da alcune parole chiave: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Gli ultimi quattro valori sono tridimensionali, sempre che il browser li supporti:

<STYLE>
BODY { border-style: groove }
</STYLE>

Attributo border
Si tratta di una sorta di attributo omnicomprensivo degli ultimi visti in questa pagina. Racchiude tutte le varianti relative ai bordi, agli stili, al colore e alla larghezza. Assegna gli stessi valori a tutti i lati, annullando gli effetti di altri attributi simili in precedenza inseriti:

<STYLE>
BODY { border: 12px groove green }
</STYLE>

Attributo width
Si riferisce alla larghezza per orizzontale del box. Puo’ essere espresso nelle unita’ di misura finora analizzate. Il valore “auto” permette al box di adattarsi al contenuto degli elementi:

<STYLE>
BODY { width: 300px }
</STYLE>

Attributo float
Questo attributo ha una funzione simile ad ALIGN in HTML classico. I valori a disposizione sono left, right e none:

<STYLE>
BODY { float: right }
</STYLE>

Attributo clear
Se vengono specificati i valori right o left, gli elementi si dispongono sotto float dal lato specificato. Usando none sono impostati su entrambi i lati:

<STYLE>
BODY { clear: left right }
</STYLE>

Torna a indice

Background e colori di sfondo

In HTML classico lo sfondo viene impostato all’interno della marcatura <BODY> attraverso gli attributi bgcolor (per il colore univoco del fondo pagina) e background (per assegnare allo sfondo un’immagine gif o jpg). I limiti di questi strumenti sono evidenti soprattutto quando e’ necessario inserire un’immagine di sfondo complessa. Esiste un attributo di HTML che permette, solo con MS Internet Explorer, di rendere fissa l’immagine di sfondo richiamata come background:

<BODY background=”sfondo.gif” bgproperties=”fixed”>

Come detto e’ una soluzione funzionante solo con il browser Microsoft. Gli utenti Netscape non incontreranno alcun messaggio di errore, ma soltanto una pagina con il classico sfondo che “scrolla” insieme al resto del documento (esistono alcuni espendienti per rendere fissi elementi nella pagina nonostante lo scroller).

Le specifiche dei CSS introducono, anche per i colori di sfondo, delle importanti novita’, volte soprattutto a liberare gli sviluppatori da vincoli operativi.
Esistono vari attributi per i colori e gli sfondi, ecco quali.

Attributo color
L’attributo color definisce il colore del testo del documento (non si confonda con il colore di background) sia con i nomi dei colori in inglese (black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal e aqua) sia con triplette esadecimali.
Il formato RGB usa, per definire i colori, tre numeri interi compresi tra 0 e 255, mediante una scala di valori lineare. Il rosso, quindi, diventa 255,0,0 e le sfumature cromatiche si realizzano attraverso le combinazioni di valori.
In HTML i valori numerici dei colori vengono definiti in base alla cosidetta “tripletta esadecimale”, ovvero un insieme di tre numeri e due cifre esadecimali.

<DIV STYLE=”position:absolute; top:100px; left:100px; width:200px; color:blue”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo background-color
Questo attributo determina il colore di sfondo di un determinato stile. La sua funzione e’ simile al classico BODY di HTML, ma puo’ essere avvicinata al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare alcune parti del documento.

<DIV STYLE=”position:absolute; top:100px; left:100px; width:200px; background-color:blue”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo background-image
Ha una funzione simile al background=”image.gif” di HTML classico, richiamando un’immagine in formato GIF o JPG caricata sullo sfondo del css

<DIV STYLE=”position:absolute; top:100px; left:100px; width:200px; background-image: url(sfondo.jpg)”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo background-repeat
Questo attributo consente di ripetere l’immagine di sfondo cosi’ come accade per il tag BODY di HTML. Puo’ assumere diversi valori: repeat (l’immagine viene replicata per verticale e orizzontale), repeat-x (replica l’immagine solo per orizzontale), repeat-y (replica l’immagine solo per verticale):

<DIV STYLE=”position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-y”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

<DIV STYLE=”position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-x”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo background-position
I fogli di stile consentono di scegliere un punto di inizio per l’immagine di sfondo diverso dal classico angolo in alto a sinistra. HTML classico, infatti, e’ impostato perche’ lo sfondo venga visualizzato dal punto piu’ estremo in alto a sinistra. Con i CSS e’ possibile usare alcune parole chiave per il posizionamento in verticale (top, center e bottom) ed orizzontale (left, center e right). Se sono espresse due coordinate, la prima e’ orizzontale e la seconda verticale:

<DIV STYLE=”position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-position: right top”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo background
E’ un attributo che consente di definire univocamente i diversi attributi dello sfondo finora esaminati. L’ordine da seguire e’ il seguente:

<DIV STYLE=”position:absolute; top:100px; left:100px; width:400px; height:300px; background: yellow url(sfondo.jpg) repeat-y fixed right bottom”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Torna a indice

Raggruppare stili

Il raggruppamento e’ una tecnica aggiuntiva per rendere piu’ funzionali i fogli di stile e consentire effetti altrimenti irrealizzabili. Il raggruppamento di stile riduce gli attributi e gli argomenti creando gruppi logici. Nel particolare tale funzione viene svolta in due modi:

 Raggruppare TAG

Per comprendere questo argomento si pensi ad una pagina Web impostata con diversi stili, ognuno dei quali identificato dai seguenti marcatori:

<STYLE>
H1 { font-family:arial; font-size:14px; color:blue; }
H2 { font-family:arial; font-size:14px; color:blue; }
H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>

Per raggruppare gli stili e’ sufficiente sintetizzare il codice in questo modo:

<STYLE>
H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>

Un altro esempio nella sua forma non raggruppata e’ il seguente:

<STYLE>
A:link { text-decoration: none } A:visited { text-decoration: none }
</STYLE>

Che, invece, seguendo le regole generali del raggruppamento di stili diventa: <STYLE>
A:link, A:visited { text-decoration: none }
</STYLE>

 Raggruppare gli attributi

E’ possibile dividere gli stili in base alle informazioni specifiche sulle famiglie. Con questo tipo di raggruppamento il seguente stile di testo:

<STYLE>
BODY { font-family:verdana; font-size:15px; font-weight:bold; font-style:normal; color:red}
</STYLE>

si trasforma in:

<STYLE>
BODY { font: bold normal 15px verdana red}
</STYLE>

E’ stato enunciato l’attributo font e successivamente gli argomenti che lo compongono. L’ordine di enunciazione non va lasciato al caso ma impostato in base a precise regole gerarchiche. Nell’esempio, il peso, il tipo di carattere e la grandezza vanno posti prima della dimensione. Gli attributi non sono separati da virgole ma da semplici spazi.

Le stesse regole valgono per i margini. Rimandiamo al capitolo corrispondente per ulteriori approfondimenti.

Torna a indice

Assegnare classi

L’assegnazione di classi consente di definire un alto livello di variazione di singoli tag HTML. Cio’ avviene aggiungendo un’estensione class ai tradizionali tag dell’HTML, dopo aver impostato le classi all’interno del foglio di stile. Questo il codice da impostare nel CSS:

<STYLE>
H2.top {font-family:verdana; font-size:15px; font-weight:bold; font-style:normal}
H4.bottom {font-family:arial; font-size:10px; font-weight:bold; font-style:italic}
</STYLE>

Sussessivamente, all’interno del documento, va inserito il riferimento alla classe:

<H4 class=bottom> Testo della pagina </H4>

Altro concetto collegato e’ quello delle pseudoclassi: elementi di un solo tipo che soddisfano un certo criterio contestuale. Un esempio molto chiaro di pseudoclassi è quello relativo agli elementi anchor, che quando visitati costituiscono una pseudoclasse visited, quando attivi active e quando non visitati link.

Una pesudoclasse viene specificata all’interno dello stile seguita dai due punti:

<STYLE>
A:link { text-decoration: none } visited { text-decoration: none }
</STYLE>

La pseudoclasse visited non ha bisogno dell’elemento A, perche’ solo gli ancoraggi possono avere una pseudoclasse link.

Torna a indice

Cenni ai fogli di stile Javascript

Nella interminabile guerra dei browser, Netscape e Microsoft hanno seguito strade differenti, nella vana convinzione che tecnologie proprietarie imposte al mercato fossero la soluzione migliore al “conflitto” in corso. Cosi’ e’ stato per molti standard (divenuti tali, ed accettati da entrambe le societa’, solo dopo l’intervento del W3C) e cosi’ e’ anche per i fogli di stile. Le raccomandazioni CSS1 e CSS2 hanno ripreso il modello proposto da Microsoft e respinto quanto avanzato da Netscape. L’ennesimo insuccesso di Netscape porta il nome di Fogli di stile Javascript (JSSS). Si tratta di fogli di stile simili a quelli visti finora, ma con alcune non trascurabili differenze:

 e’ riconosciuto soltanto da Netscape e non da Internet Explorer;

 gli attributi composti da piu’ parole non sono separati da un trattino come per i CSS, ma dalla forma maiuscola delle prime lettere;

 quando si richiama un foglio di stile javascript la sintassi corretta e’ la seguente:

<LINK rel=stylesheets type=”text/javascript” href=”style.js”>

 sono introdotti tre nuovi oggetti:

- Le marcature
- Le classi
- Gli identificatori

Usando i tre metodi introdotti dai JSSS si definisce il valore di ogni attributo del documento.

Non ci addentriamo oltre nell’esposizione di una tecnologia non standardizzata dal W3C e destinata ad essere abbandonata dalla stessa Netscape.

Torna a indice

Posizionamento dinamico

Molti degli esempi di questo tutorial sono compatibili esclusivamente con il browser Internet Explorer, a causa delle conseguenze negative della “guerra dei browser”. La corsa alla “tecnologia proprietaria” ha spinto Netscape e Microsoft verso soluzione incompatibili e spesso contrastanti (soprattutto per HTML dinamico non e’ raro che demo per explorer creino errore negli script di Netscape e viceversa). I fogli di stile non sono stati risparmiati da questo duello, ma non mancano punti e tecnologie sulle quali e’ stato raggiunto un accordo. Le specifiche sul posizionamento dinamico hanno visto l’accordo di Microsoft e Netscape, che attraverso i propri rappresentanti presso il W3C, hanno collaborato alla stesura di una bozza di lavoro chiamata CSS-P (CSS positioning). Grazie a questa collaborazione sia Netscape 4 che Explorer 4 e 5 riconoscono e interpretano correttamente il posizionamento dinamico all’interno della pagina. Ma cosa si intende per posizionamento dinamico?.
I documenti HTML sono posizionati all’interno della pagina attraverso uno schema di flusso dei dati. Questo significa che si parte dal margine alto a sinistra del documento e ogni elemento si posiziona in base al precedente, senza possibilita’ di sovrapporre oggetti. Le specifiche dei CSS-P consentono, invece, tre diversi tipi di posizionamento:

 statico: si tratta del posizionamento predefinito dal browser, cioe’ quello tradizionale di HTML, per cui ogni elemento e’ posizionato in base al flusso di dati del documento;

 assoluto: questo tipo di posizionamento consente di astrarre il CSS dal flusso dei dati, consentendo di posizionarlo in qualsiasi punto della pagina, in modo assolutamente indipendente dagli altri elementi, che anzi possono venire sovrapposti o sottoposti.

 relativo: tale posizionamento non esce dal flusso di dati, ne’ produce alcuna modifica rispetto agli elementi posizionati in modo statico. Assume caratteristiche proprie del posizionamento dinamico quando vengono impostate le proprieta’ left e right, che spostano l’elemento a sinistra e in alto di quello che lo precede.

I posizionamenti assoluto e relativo consentono agli sviluppatori di sistemare con precisione elementi nel documento, di sovrapporli e attraverso degli script, di muoverli. In questo modo i webdesigner hanno un controllo sul documento simile a molti strumenti in possesso dei grafici tradizionali.

La bozza di lavoro dei CSS-P definisce le proprieta’ dei fogli di stile relative al posizionamento dinamico. Molte di queste proprieta’ sono note gia’ da HTML classico (le proprieta’ width e height, per esempio), altre invece sono inedite. Per comprendere meglio di cosa stiamo parlando e’ bene procedere con qualche esempio pratico e relativo codice.
Premettiamo che in questa sede faremo uso di fogli di stile in linea, perche’ e’ piu’ agevole definire il posizionamento per ogni singolo elemento. Nulla vieta che per creare strutture di pagina complesse si possano usare i CSS incorporati o esterni.

Ecco un esempio di posizionamento assoluto con uso delle proprieta’ top e left:

<DIV STYLE=”position:absolute; top:100px; left:100px”>
<IMG SRC=”elemento01.gif” border=0>
</DIV>

Le misure sono espresse in pixel (px), ma possono essere sostituite con altri valori: punti (pt), centimentri (cm), pollici (in) ecc. Tutte fanno riferimento al margine superiore sinistro.
L’esempio considerato crea un foglio di stile con posizionamento assoluto (position:absolute) distanziato dal margine superiore e sinistro di 100 pixel. Tutto cio’ che si trova all’interno del CSS (l’immagine elemento01.gif) sara’ posizionato in questo modo.

Per comprendere la differenza pratica tra posizionamento assoluto (visto in precedenza) e relativo, procediamo con un altro esempio. Si tratta di un semplice testo privo di qualsiasi formattazione, che il documento interpreta come flusso di elementi. All’interno di questo testo impostiamo un foglio di stile con posizionamento relativo per le parole “sito italiano”, con una distanza dall’elemento piu’ vicino alla sinistra e in alto di 10 pixel:

HTML.it e’ il <SPAN STYLE=”position:relative; top:10px; left:10px”><B>sito italiano></B></SPAN> piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.

Abbiamo usato la marcatura SPAN al posto di DIV, perche’ quest’ultima e’ piu’ adatta a quantita’ corpose di testo, mentre la prima si adatta meglio a frasi brevi come questa. Altra considerazione riguarda il ritorno a capo che DIV impone agli elementi
Nell’esempio pratico che segue abbiamo usato entrambe con risultati differenti.

Altri parametri impostabili sono width e height che stabiliscono rispettivamente la larghezza per orizzontale e l’altezza per verticale del foglio di stile. Anche in questo caso possono usarsi indifferentemente le misure consentite dai fogli di stile:

<DIV STYLE=”position:absolute; top:100px; left:100px; width:150px; height:150px”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Il testo viene racchiuso in un foglio di stile di dimensioni pari a 100px di altezza e altrettanti di larghezza. La distanza dal margine superiore sinistro e’ quella espressa in precedenza.

La proprieta’ visibility determina la visibilita’ di un elemento. Puo’ essere impostato su hidden o visible

<DIV STYLE=”position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden”>
<IMG SRC=”elemento01.gif” border=0>
</DIV>

hidden rende invisibili gli elementi, mentre visibile li rende visibili:

<DIV STYLE=”position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible”>
<IMG SRC=”elemento02.gif” border=0>
</DIV>

Si e’ detto in apertura che i CSS-P permettono di sovrapporre immagini, testo ed elementi gli uni agli altri. La gerarchia con la quale tali elementi vengono sovrapposti dipende, quando non stabilito diversamente, dalla posizione nel codice HTML. Un elemento posizionato dopo un altro sara’ sovrapposto a questo. Come nell’esempio che segue:

<DIV STYLE=”position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible”>
<IMG SRC=”elemento01.gif” border=0>
</DIV>

<DIV STYLE=”position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible”>
<IMG SRC=”elemento02.gif” border=0>
</DIV>

E’ possibile modificare l’impostazione di default per cui un elemento scritto successivamente nel codice e’ sovrapposto agli elementi precedenti, attraverso la proprieta’ z-index. Questa proprieta’ definisce l’ordine grafico degli elementi attraverso valori numerici. L’elemento principale va impostato come valore positivo “1″, mentre gli altri in posizione sottostante con valore negativo “-1″. Riprendendo l’esempio precedente e lasciando inalterato l’ordine gerarchico, e’ possibile che il secondo elemento si sovrapponga al primo grazie alla proprieta’ z-index:

<DIV STYLE=”position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1″>
<IMG SRC=”elemento01.gif” border=0>
</DIV>

<DIV STYLE=”position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2″>
<IMG SRC=”elemento02.gif” border=0>
</DIV>

La proprieta’ overflow permette di gestire, attraverso l’uso di scroller, i contenuti degli elementi che eccedono l’area impostata con height e width. Perche’ cio’ accada e’ necessario che la proprieta’ overflow sia impostata su “scroll” e non su “hidden”. In questo secondo caso, infatti, gli elementi vengono visualizzati limitatamente alla grandezza dell’area di ritaglio ma senza lo scroller laterale:

<DIV STYLE=”position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

<DIV STYLE=”position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Tutti gli elementi supportano il posizionamento statico e relativo, ma solo alcuni quello assoluto. Ecco quali:

 Applet

 Button

 Div

 Fieldset

 IFrame

 IMG

 Input

 Object

 Select

 Span

 Table

 Textarea

Sfruttando quanto visto finora per il posizionamento dinamico, possiamo ora esporre un utilizzo pratico di tale tecnologia. Creare titoli con effetto ombreggiato e’ possibile in HTML classico esclusivamente con il ricorso a immagini (create con appositi programmi di Webgrafica o fotoritocco). Nulla da eccepire su tale scelta, ma e’ ovvio che la presenza di immagini appesantisce la pagina in termini di Kb. Con i CSS-P e’ possibile ottenere lo stesso risultato senza usare immagini ma semplice testo. Non si tratta di una procedura molto complessa che anzi per molti versi appare banale. Si crea un testo assegnando uno stile, una grandezza e una certa posizione assoluta nella pagina:

Per il testo si e’ usato il font impact di grandezza pari a 100 pixel e colore nero, distanziato dal margine sinistro e superiore di 10 pixel. La proprieta’ z-index e’ impostata sul valore positivo 1. Fin qui nulla di particolare, visto che si tratta di un testo nero senza ombreggiatura. Per inserire l’ombra si deve aggiungere questo codice:

Il testo rimane di uguale grandezza e stile ma cambia il colore (dal black precedente al gray attuale). La distanza dello stile dal margine superiore e sinistro aumenta rispettivamente di 5 pixel e la proprieta’ z-index e’ impostata sul valore negativo -1. Tutto questo crea il primo testo sovrapposto al secondo, che essendo distanziato di 5 pixel ma di uguale dimensione crea un effetto ombreggiato.

Torna a indice

Controlli del cursore

Ms Internet Explorer implementa dalla versione 4 la proprieta’ CSS cursor per il controllo del puntatore del mouse, quando l’utente posiziona lo stesso su un determinato elemento. Esistono da anni puntatori dalle forme piu’ svariate e fantasiose per Windows, ma non e’ di questo che si tratta. La proprieta’ CSS cursor, infatti, non permette di ottenere cursori di forme diverse da quelli impostati di default nel sistema, ma al contrario ne permette l’interscambio e il controllo.
L’abitudine ci spinge a ritenere ovvio che quando il puntatore del mouse passa su un link, da freccia si trasforma in manina. Cosi’ come quando una pagina Web e’ in fase di caricamento e’ normale che il puntatore si trasformi in clessidra. Bene, questo foglio di stile consente di controllare questi eventi, assegnando un puntatore a piacimento a tutti gli eventi della pagina.
Segue un elenco degli effetti ottenibili con la proprieta’ CSS cursor in MsIe.

Auto

Il cursore viene definito in base alle impostazioni automatiche di default del browser

Crosshair

Il browser visualizza il cursore con la classica croce (che potrebbe sembrare anche un mirino)

Default

Il browser visualizza il puntatore sempre nella sua forma standard (solitamente una freccia rivolta verso l’alto a sinistra)

Hand

Il cursore assume per tutto il documento la forma della mano.

Move

Il cursore assume la forma tipica degli elementi trascinati

e-resize

Il cursore assume la forma di una freccia verso sinistra (tipicamente attivata quando si ridimensionano finestre o oggetti)

ne-resize

Freccia di default rivolta in alto a destra

nw-resize

Freccia rivolta verso l’alto a sinistra (questo stile si differenzia da “default” visto in precedenza, perche’ quest’ultimo assegna il cursore in base alle impostazione del browser, mentre quest’ultimo stabilisce tout court il cursore con freccia rivolta verso l’alto a sinistra, anche se le impostazione del browser sono differenti)

n-resize

Freccia non-standard rivolta verso l’alto.

se-resize

Freccia standard rivolta verso il basso a destra

sw-resize

Freccia standard rivolta verso il basso a sinistra.

s-resize

Freccia non-standard rivolta verso il basso.

w-resize

Freccia non-standard rivolta verso sinistra

text

Al cursore viene assegnata la tipica forma della barra verticale che i browser impostano quando incontrano testo senza link o immagini.

wait

Il classico cursore a forma di clessidra od orologio.

help

Il cursore a forma di punto interrogativo o fumetto, che solitamente indica la possibilita’ di ottenere maggiori informazioni sull’oggetto.

Torna a indice

Effetti di transizione

Le transizioni di pagina consentono di visualizzare effetti simili ad alcuni cambi immagine televisivi. In altre parole la pagina richiamata non è immeditamente visualizzata, ma preceduta da effetti di vario tipo, quali dissolvenze e altre presentazioni.
Le transizioni si attivano esclusivamente quando si accede alla pagina da un altro documento o in alternativa quando si esce dalla pagina per visualizzarne un’altra. Quindi premendo il tasto aggiorna del browser, questo non sortira’ alcun effetto, ma sara’ necessario tornare alla pagina precedente e cliccare nuovamente sul link.
Gli effetti di transizioni possono essere in entrata (page-enter) o in uscita (page-exit) di pagina.
Il codice va inserito tra i tag <HEAD> e consente 23 diversi effetti. Negli esempi che seguono e’ stato impostato il valore “Page enter” per cui gli effetti si producono all’entrata della pagina. Questi gli effetti disponibili:

Box in
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=0)”>

Box out
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=1)”>

Circle in
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=2)”>

Circle out
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=3)”>

Wipe up
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=4)”>

Wipe down
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=5)”>

Wipe right
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=6)”>

Wipe left
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=7)”>

Vertical blinds
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=8)”>

Horizontal blinds
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=9)”>

Checkerboard across
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=10)”>

Checkerboard down
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=11)”>

Random dissolve
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=12)”>

Split vertical in
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=13)”>

Split vertical out
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=14)”>

Split horizontal in
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=15)”>

Split horizontal out
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=16)”>

Strips left down
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=17)”>

Strips left up
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=18)”>

Strips right down
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=19)”>

Strips right up
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=20)”>

Random bars horizontal
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=21)”>

Random bars vertical
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=22)”>

Random
<META http-equiv=”Page-Enter” CONTENT=”RevealTrans(Duration=4,Transition=23)”>

Per ottenere degli effetti simili in uscita dalla pagina è sufficiente sostituire a “page-enter” la dicitura “page-exit”.
Un’ultima avvertenza riguarda l’impossibilita’ di usare le transizioni in pagine divise in frame, o per meglio dire all’interno dei singoli frameset. Se, infatti, il tag viene inserito nel file principale del frame (quello che costruisce e imposta i vari frameset) gli effetti si producono, mentre questo non accade nei singoli frameset. La spiegazione di questo, che a prima visto potrebbe apparire come un bug, e’ nella constatazione che gli effetti di transizioni si producono sull’intera schermata del browser e non su una singola parte di essa. Infine va sottolineato che questi effetti si ottengono esclusivamente su Microsoft Internet Explorer.

Torna a indice

Filtri su immagini

I fogli di stile consentono di evitare l’uso di GIF animate attraverso l’inserimento di semplice codice HTML. Gli effetti ottenibili grazie ai filtri sono sei e tutti si verificano quando il puntatore del mouse passa sull’immagine:

Trasparency: rende opaca l’immagine finche’ il mouse non la sfiora e assume la luminosita’ originale;

Blur: effetto sfuocato dell’immagine verso sinistra

Light: effetto ombreggiato dell’immagine da destra verso sinistra

Wave: effetto ondulato sull’immagine

Flip horizontal: immagine invertita verso sinistra

Flip vertical: immagine capovolta

Per ottenere gli effetti dei filtri sull’immagine e’ necessario agire su due punti del documento: all’interno del tag <HEAD> e nell’SRC dell’immagine.

Gli esempi che seguono mostrano l’intero codice da impostare per tutti e sei gli effetti citati (per praticità si rimanda alla pagina www.html.it/css/css_13.htm).

All’immagine “paesaggio.jpg” viene assegnato un nome “immagine1″ e un livello di opacità pari a 50. Per opacità si intende quanto visibile sia l’immagine all’atto del caricamente della pagina. A livelli più bassi corrisponde un’immagine più sfocata. Il gestore di eventi “onmouseover” stabilisce che nel momento in cui il puntatore del mouse entra nell’area di immagine la stessa diviene nitida; mentre il gestore “onmouseout” fa tornare l’immagine allo stato iniziale quando il puntatore si sposta.

Torna a indice

Effetti su form

Quanto esposto nel presente capitolo non e’ prettamente attinente ai fogli di stile, nel senso che non rientra in quanto espresso dalle raccomandazioni ufficiale del W3C in materia. Ma intendiamo trattarne ugualmente, seppur con la dovuta sintesi, perche’ e’ utile conoscere piccoli accorgimenti nella realizzazione di form HTML.
Il nuovo standard di HTML 4 ha introdotto notevoli modifiche alla precedente versione 3.2 del linguaggio di Markup piu’ diffuso del mondo.
HTML 4.0 migliora la gestione dei moduli rendendoli interattivi, grazie ad eventi intrinseci, e aggiungendo supporti per i browser a sintesi vocale. Sono introdotti tre nuovi elmenti:

LABEL fornisce ai browser a sintesi vocale la possibilita’ di descrivere un elemento e rende interattivi i form. Le etichette utilizzate possono essere implicite o esplicite.

BOTTON consente di creare altri bottoni oltre ai due standard (invio e reset) finora disponibili.

FIEDLSET raggruppa campi relativi in modo da fornire ai browser a sintesi vocale la possibilita’ di descrivere diversi gruppi e permettere all’utente di spostarsi da un gruppo ad un altro. In associazione all’elemento LEGEND, puo’ essere usato per nominare il gruppo. Entrambi questi nuovi elementi, permettono una migliore interpretazione ed interazione.

Una nuova serie di attributi onchange-INPUT, in associazione con il supporto per i linguaggi script, permette ai form dei providers di verificare i dati inseriti dall’utente. L’elemento INPUT ha un nuovo attributo ACCEPT, che permette agli autori di specificare una lista di media o tipi di struttura per l’input.

L’attributo ACCESSKEY provvede a specificare un accesso diretto tramite tastiera ai campi del formulario.

Continuiamo col vedere alla prova alcune nuove potenzialita’ relative ai moduli HTML. Come premesso non si tratta di fogli di stile “puri”, ma di esempi che sfruttano congiuntamente Javascript e taluni aspetti di HTML dinamico. Ne trattiamo comunque in questo articolo per fornire strumenti di Web publishing avanzati.

E’ oggi possibile creare dei campi SELECT all’interno dei moduli HTML che compaiano con piu’ scelte gia’ predefinite. Quello che segue ne e’ un esempio:

Visualizza il codice di questo esempio

HTML 4.0 supporta l’attributo TITLE, che consente di visualizzare una piccola finestra quando il puntatore del mouse clicca o viene posizionato sopra un elemento. Nei browser obsoleti l’attributo TITLE non crea problemi di visualizzazione, in quanto viene ignorato e visualizzato come seplice testo.
Grazie alle potenzialita’ di questo attributo e’ possibile ottenere effetti simili al seguente:

Inizio modulo

Clicca qui per una prova

Fine modulo

Visualizza il codice di questo esempio

Questo esempio puo’ essere utile per creare effetti grafici su form altrimenti piatti e noiosi. Come funziona e’ presto detto: finche’ non si scrive nulla all’interno dei campi del form, questi assumono un colore di default, che perderanno solo quando verra’ inserito del testo o selezionate delle scelte. In questo modo il visitatore ha chiaro quali campi abbia compilato e quali lo debbano ancora essere.
Prova a scrivere qualcosa nella stringa gialla che segue:

Inizio modulo

Fine modulo

Visualizza il codice di questo esempio

E’ possibile creare elementi OPTION di diverso colore con semplice codice HTML. E’ bene precisare, pero’, che gli elementi OPTION rappresentano, per il modello di oggetti dell’HTML dinamico un’eccezione, in quanto non vengono esposti nell’insieme “all” del documento. Cio’ significa che l’elemento OPTION viene esposto soltanto mediante il corrispondente elemento select di livello superiore.
A prescindere da questo discorso che riguarda piu’ direttamente HTML dinamico, nella pratica con l’elemento OPTION e’ possibile creare voci di scelta di diversi colori, come nell’esempio che segue:

Inizio modulo

Fine modulo

Visualizza il codice di questo esempio

L’elemento LABEL descrive e incorpora gli eventi intrinseci del form quando la pagina viene visualizzata da un browser a sintesi vocale. Le etichette possono essere implicite o esplicite, e risultano utili con caselle di controllo e pulsanti di opzione. Un’etichetta associata a un pulsante consente di selezionare e deselezionare lo stesso.

Seguendo questo principio si puo’ creare un modulo all’interno del quale un elemento TEXT, se selezionato, deseleziona gli elementi RADIO presenti nel form stesso. Nell’esempio che segue e’ necessario scegliere tra uno degli elementi da spuntare o la stringa bianca. Non e’ possibile, almeno in questo caso, effettuare una scelta doppia.

Inizio modulo

Javascript

HTML dinamico

Xml

Applet Java

Fine modulo

Visualizza il codice di questo esempio

HTML 4 ha introdotto i cosidetti “controlli disattivati”, che cioe’ non possono essere attivati o per i quali non e’ possibile modificare il contenuto. Vengono usati due attributi: DISABLED (impedisce che l’elemento riceva eventi) e READONLY (viene visualizzato quando il controllo e’ conforme al contesto ma i contenuti non sono modificabili).

Inizio modulo

Prova a scrivere nella stringa che segue:

Fine modulo

Visualizza il codice di questo esempio

Torna a indice

Effetti speciali su testo

Le proprieta’ relative ai font non si riferiscono al tipo di carattere (gia’ analizzato nella sezione “Attributi di stile per il testo”) ma al loro aspetto e taluni punti relativi al posizionamento.

Attributo letter-spacing
Letter-spacing stabilisce la distanza tra le singole lettere all’interno di un documento. I valori sono espressi in misure em. Si tratta di un’unita’ di misura pari alla grandezza della lettera m. Viene usata anche con decimali.

<DIV STYLE=”font-family:arial; letter-spacing:1em”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo text-transform
Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave:

 uppercase: rende maiuscole tutte le lettere dell’elemento:

<DIV STYLE=”font-family:arial; text-transform:uppercase”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

 capitalize: rende maiuscola solo la prima lettera di ogni parola:

<DIV STYLE=”font-family:arial; text-transform:capitalize”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

 lowercase: rende minuscole tutte le lettere dell’elemento:

<DIV STYLE=”font-family:arial; text-transform:lowercase”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo text-align
Questo attributo ha la funzione di visualizzare il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato).

<DIV STYLE=”font-family:arial; text-align: right”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo text-indent
Questo attributo definisce la quantita’ di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola.

<DIV STYLE=”font-family:arial; text-indent: 5em”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo line-height
L’attributo line-height definisce la distanza verticale tra le varie linee di testo. I valori sono espressi in percentuali o in unita’ assoluti em. Tali valori sono direttamente proporzionali alla grandezza del testo (font-size). Per cui, nell’esempio che segue, essendo il valore assoluto line-height impostato su 2 e il testo su 14px, la distanza sara 28px (14px * 2em).

<DIV STYLE=”font-family:arial; font-size:14px; width:400px; line-height: 2em”>
HTML.it e’ il sito italiano piu’ visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML.
</DIV>

Attributo list-style
La proprieta’ list-style consente di sostituire i punti elenco standard di HTML con immagini in formato GIF. E’ possibile applicare tali punti a tutto l’elenco o soltanto ad una parte di questo.

Link senza sottolineatura
Da sempre i link testuali vengono visualizzati dai browser con una sottolineatura (underline) che ne ribadisce la funzione. Internet Explorer da’ la possibilita’ di eliminare tale sottolineatura agendo sulle proprieta’ del browser. Con i fogli di stile gli svilupattori hanno la possibilita’ di eliminare del tutto la sottolineatura attraverso un semplice codice da inserire tra i marcatori BODY del documento:

Link sottolineato solo al passaggio del mouse
L’esempio visto in precedenza puo’ essere rielaborato per rendere le pagina piu’ accattivante. Fermo restando che i link non abbiano sottolineatura, e’ possibile che la ottengano solo quando il mouse vi passa sopra, grazie alle proprieta’ A:hover.

In riferimento all’ultimo esempio e’ possibile impostare il CSS per l’effetto contrario: i link sono sottolineati di default ma perdono la sottolineatura quando il mouse vi passa sopra:

Link cambiano colore al passaggio del mouse
Sfruttando ulteriormente la proprieta’ A:hover e’ possibile creare un effetto mediante il quale i link hanno un colore di default, che cambia quando il mouse vi passa sopra. Il colore puo’ essere impostato come parola chiave (red, green, blue ecc.) o come tripletta esadecimale.

Link cambiano colore di sfondo al passaggio del mouse
Ancora la proprieta’ A:hover che di concerto con le proprieta’ di definizione del background genera un effetto molto interessante: quando il puntatore del mouse passa sul link, lo stesso si attiva con un colore di testo e di sfondo impostati.

Link cambia dimensione al testo quando attivato dal mouse
Ultimo esempio riguardante A:hover. Questa volta il testo viene ingrandito quando il mouse vi passa sopra.

I fogli di stile finora considerati sono incorporati, cioe’ posti tra i campi HEAD del documento e riferiti alla totalita’ degli elementi presenti nella pagina.
Esigenze particolari possono richiedere che soltanto per taluni link vengano attivati tali effetti. Se per esempio i link si vogliono sottolineati, tranne un unico elemento della pagina, si usano i fogli di stile in linea in questo modo:

<A STYLE=”text-decoration: none” HREF=”http://www.html.it”>VISITA HTML.it</A>

Una buona regola e’ quella di rendere omogenei gli effetti sui link per tutti i documenti del sito, adottando un metodo che permette un automatismo in questo senso. La soluzione ideale sono i fogli di stile esterni, all’interno dei quali vanno inseriti gli attributi di stile.

Torna a indice

Categorie: Manuale Css
Messo il tag: manuale css guida css

Progettista Multimediale Davide Spallacci

Voce marcata come ‘manuale css guida css’

Manuale Css

Luglio 9, 2008 · Lascia un Commento

Categorie

Articoli Recenti

Archivi

Link

Tag

Novembre: 2009
L	M	M	G	V	S	D
« Lug
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30