itsosmilano.it

1

F O G L I D I S T I L E (Cascading Style Sheets)

M a n u a l e d e g l i e l e m e n t i d i b a s e

Sezione Argomento Pag 1 Come è fatto un CSS: regole e commenti 2

2 Css in linea 3

3 Css incorporati 3

4 Css esterni 4

5 Proprietà di stile per il testo 4

6 Proprietà margini e allineamento 9

7 Background e colori di sfondo 12

8 Id e classi: due selettori speciali 13

9 Valori e unità di misura 15

10 Il box model 16

11 Posizionamento dinamico (livelli) 17

12 Effetti su testo e link 20 A c u r a d e i d o c e n t i d i S T C

itsosmilano.it

2

1. Come è fatto un CSS: regole e commenti Quanto visto finora riguarda essenzialmente il rapporto tra CSS e (X)HTML: tutti gli elementi, gli attributi e le funzionalità analizzate fanno parte della specifica del secondo linguaggio. Iniziamo lo studio dei CSS con l'analisi degli elementi costitutivi di un foglio di stile. Si consideri il file foglio_di_stile.css /* Definisco le regole per il corpo del documento */ /* Paragrafo generico */ p { color: black; font: 12px/1.5 Georgia, "Times New Roman", serif; } #div1 { background: Silver; /* Sfondo colr argento */ width: 300px; } #div2 { background: Silver; width: 300px; position: absolute; top: 400px; left: 400px; } Tutto quello che ci trovate dentro appartiene a due tipologie di dichiarazioni: regole (ingl. rules) e commenti. Ecco, un foglio di stile non è altro che questo: un insieme di regole, accompagnate, volendo, da qualche nota di commento.

Com'è fatta una regola

L'illustrazione mostra la tipica struttura di una regola CSS.

Essa è composta da due blocchi principali:

• il selettore • il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <H1>: lo sfondo sarà rosso, il colore del testo bianco. I selettori possono essere diversi e a queste varie tipologie dedicheremo una delle prossime lezioni. Per il momento sia chiara la funzione che essi svolgono. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia:

• proprietà • valore

La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori. Questa regola è pertanto errata: body {color background: black;}

itsosmilano.it

3

Mentre questa è perfettamente valida e plausibile: p {font: 12px Verdana, Arial;} Ancora, se in un blocco si definiscono più dichiarazioni, come nell'esempio in figura, esse vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser più datati lo richiedono: aggiungetelo sempre per sicurezza e per una maggiore compatibilità. Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.

Commenti Per inserire parti di commento in un CSS racchiudetelo tra questi segni:

• /* come segno di apertura • */ come segno di chiusura

2. Css 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 rosso </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 discrezionalità' 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 peculiarità' 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 line esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website.

3. Css 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 –

itsosmilano.it

4

• Quando un attributo e' considerato proprieta' di un oggetto i trattini si elminano 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:

<HTML> <HEAD> <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 fogli 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 dei 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.

4. Css 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;

itsosmilano.it

5

• il sito e' costruito con i fogli di stile incorporati, per cui si dovrà comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovrà 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 richiamato 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 pagina. 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 ripaga ampiamente gli sforzi, oltre a consentire un eccezionale controllo di pagina e di stile. 5. Proprietà 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.

itsosmilano.it

6

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 all'apposita sezione di questo sito). 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>

itsosmilano.it

7

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 permettono un controllo molto più 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 800x600)

<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.

itsosmilano.it

8

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>

itsosmilano.it

9

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 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 point</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

6. Proprietà margini e 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 vedrà più oltre, sono presenti i valori relativi ai bordi di tali pseudo-finestre. Esistono vari attributi per i bordi e l'allineamento, vediamo quali.

itsosmilano.it

10

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>

itsosmilano.it

11

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:

itsosmilano.it

12

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

7. 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 con 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 espendiente per rendere fissi degli elementi nella pagina nonostante lo scroller, clicca qui per vedere quali). 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. Esempio

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; color:blue"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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 avvicinato al colore di sfondo delle tabelle. Viene usato soprattutto per evidenziare con espedienti cromatici alcune parti del documento. Esempio

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-color:blue"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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 Esempio

itsosmilano.it

13

<DIV STYLE="position:absolute; top:100px; left:100px; width:200px; background-image: url(sfondo.jpg)"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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): Esempio

<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-y"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV> Esempio <DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-repeat: repeat-x"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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: Esempio

<DIV STYLE="position:absolute; top:100px; left:100px; width:400px; height:400px; background-image: url(sfondo.jpg); background-position: right top"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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 point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV>

8. Id e classi: due selettori speciali I CSS non sarebbero uno strumento così potente senza questi tipi di selettori. Classi e ID sono davvero una delle chiavi per sfruttare al meglio questo linguaggio. Partiamo dall'inizio. In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id. Dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. Il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. Ad esempio se abbiamo definito un CSS incorporato creando un selettore di tipo classe e assegnando ad esso il nome testorosso: <style type="text/css"> .testorosso { font: 12px Arial, Helvetica, sans-serif;

itsosmilano.it

14

color: #FF0000; } </style> e nel corpo del documento definiamo il tag <p class="testorosso">testo del paragrafo</p> Il testo del nostro paragrafo sarà formattato secondo i nostri desideri: testo rosso, carattere Arial. dimensione di 12px. Lo stesso meccanismo è valido per i selettori di tipo ID. Ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'ID #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo. In un documento potrò avere senza problemi questa situazione: <p class="testorosso">....</p> <div class="testorosso">....</div> <table class="testorosso">...</table> <p class="testorosso">....</p> La classe .testorosso presente nel CSS formatterà allo stesso modo il testo dei paragrafo, del div e della tabella. Ma non questa: <p id="testorosso">....</p> <div id="testorosso">...</div> Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Se imposto questa regola: p {color: red;} tutti i paragrafi della mia pagina avranno il testo rosso. E se volessi diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Sarei prigioniero della regola iniziale. Scrivo due classi, una per il rosso e una per il nero, le applico di volta in volta secondo le mie necessità e il gioco è fatto. La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe. Chiariti i concetti di base, passiamo ad analizzare usi e sintassi. Classe Per definire una classe si usa far precedere il nome da un semplice punto: .nome_della_classe Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML. Esiste un secondo tipo di sintassi: <elemento>.nome_della_classe Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola: p.testorosso {color: red;} lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso". Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica. Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple: p.testorosso.grassetto {color:red; font-weight:bold;}

itsosmilano.it

15

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi: <p class="grassetto testorosso maiuscolo">..</p> <p class="testorosso grassetto">...</p> ma non questo, perchè solo uno dei nomi è presente come valore di class: <p class="grassetto">...</p> ID La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id Con questa regola: #titolo {color: blue;} assegniamo il colore blue all'elemento che presenti questa definizione: <h1 id="titolo">...</h1> Come per le classi è possibile usare una sintassi con elemento: p#nome_id In realtà questa modalità è assolutamente superflua. Se l'id è univoco non abbiamo alcun bisogno di distinguere l'elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile. Usando la seconda sintassi, invece, sono costretto a rispettare l'elemento definito nel selettore.

9. Valori e unità di misura Definiremo i tipi di valore e le unità di misura con cui è possibile impostare le tante proprietà dei CSS. Prima di tutto, però, è opportuno spiegare due fondamentali regole di base. 1. I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio: "Times New Roman"). 2. Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell'unità. E' corretto quindi scrivere 15px oppure 5em. E' invece sbagliato usare 15 px o 5 em. In questi casi la regola sarà ignorata o mal interpretata. Unità per le dimensioni Questo è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le elenchiamo comunque tutte per completezza.

• in (inches - pollici): classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser web viste le variabili relative a risoluzione e ampiezza dei monitor.

• cm (centimetri): stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata.

• mm (millimetri): vedi centimetri. • pt (points - punti): unità di misura tipografica destinata essenzialmente a definire

la dimensione dei font. • pc (picas): unità poco usata. 1 pica equivale a 12 punti. • em (em-height): unità di misura spesso usata dagli autori CSS. 1 em equivale

all'altezza media di un carattere per un dato font. E' un unità di misura relativa. • ex (ex-height): poco usata. 1 ex equivale all'altezza del carattere x minuscolo del

font scelto. • px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da

comprendere.

itsosmilano.it

16

Percentuale Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l'elemento parente. Si esprime con un valore numerico seguito (senza spazi) dal segno di percentuale: 60% è pertanto corretto, 60 % no. Colori Sui diversi modi per esprimere il valore di un colore si veda colore e CSS. Stringhe Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono tre: content, quotes, text-align (ma solo per le tabelle definite con i CSS). Valori URL Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il path fa sempre riferimento alla posizione del foglio di stile e non del documento HTML. La definizione dell'indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde senza virgolette. Esempio: url(immagini/sfondo.gif). 10. Il box model Se volete usare i CSS per scopi che vadano oltre la semplice gestione di sfondo e testo dovete avere ben chiaro il meccanismo che governa la presentazione dei vari elementi di una pagina. Abbiamo detto all'inizio che una pagina (X)HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:

Partendo dall'interno abbiamo:

itsosmilano.it

17

• l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.

• il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.

• il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.

• il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Attenzione. Queste cose non sono state introdotte con i CSS, ma fanno parte del normale meccanismo di rendering di un documento. Quando realizziamo una pagina (X)HTML senza fogli di stile è il browser ad applicare per alcune di queste proprietà le sue impostazioni predefinite. Per esempio, introdurrà un certo margine tra un titolo e un paragrafo o tra due paragrafi. La novità è che con i CSS possiamo controllare con precisione al pixel tutti questi aspetti. Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi. 1. Larghezza del box Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box . La prima è data dal valore della proprietà width. La seconda è data da questa somma: margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + bordo destro + margine destro Come si vede infatti nella figura margini, padding e bordi devono considerarsi a tutti gli effetti parte dell'area complessiva dell'elemento. 2. Larghezza ed elemento contenitore Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. Quest'ultimo è l'elemento che racchiude il box. 3. Uso del valore auto Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra. Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza. 4. Margini verticali e orizzontali tra gli elementi Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. E' il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale. 11. Posizionamento dinamico (livelli) 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

itsosmilano.it

18

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), centimetri (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 sinistra 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 point e' il <SPAN STYLE="position:relative; top:10px; left:10px"><B>sito italiano></B></SPAN> piu' visitato e autorevole sul Web publishing.

Abbiamo usato la marcatura SPAN al posto di DIV, perché quest'ultima e' più adatta a quantità di testo molto ampie, 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 usate entrambe con risultati differenti.

<HTML> <HEAD> <TITLE>HTML point - il posizionamento dinamico con in CSS</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> HTML point 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. <br><br><br><br><b>Lo stesso testo usando il marcatore DIV:</b><br><br><br><br> HTML point e' il <DIV STYLE="position:relative; top:10px; left:10px"><B>sito italiano</B></DIV> piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java, di demo per Dynamic HTML. </BODY> </HTML>

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:

itsosmilano.it

19

<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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 visible 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". Ripredendo l'esempio precedente e lasciando inalterato l'ordine gerarchico, e' possibile che il secondo elemento si sovrapposta 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 point e' il sito italiano piu' visitato e autorevole sul Web

itsosmilano.it

20

publishing. </DIV>

<DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px"> HTML point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV>

Tutti gli elementi supportano il posizionamento statico e relativo, ma solo alcuni quello assoluto. Ecco quali: Div IMG Input 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 seplice 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:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:10px; color:black; z-index:1"> HTML point </DIV>

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:

<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:15px; color:gray; z-index:-1"> HTML point </DIV>

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.

12. Effetti su testo e link Le proprietà 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 point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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:

itsosmilano.it

21

<DIV STYLE="font-family:arial; text-transform:uppercase"> html point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV>

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

<DIV STYLE="font-family:arial; text-transform:capitalize"> html point e' il sito italiano piu' visitato e autorevole sul Web publishing. </DIV>

• lowercase: rende minuscole tutte le lettere dell'elemento:

<DIV STYLE="font-family:arial; text-transform:lowercase"> html point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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 point 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 quantità' di spazio (espressa in valori assoluti em o in pollici) aggiunta immediatamente prima della prima parola.

<DIV STYLE="font-family:arial; text-indent: 5em"> HTML point 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 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 point e' il sito italiano piu' visitato e autorevole sul Web publishing. </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.

<style type="text/css"> UL { list-style-image:URL(punto.gif) } </style>

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 sviluppatori hanno

itsosmilano.it

22

la possibilita' di eliminare del tutto la sottolineatura attraverso un semplice codice da inserire tra i marcatori BODY del documento:

<style type="text/css"> A:link, A:visited { text-decoration: none } </style>

Link sottolineato solo al passaggio del mouse L'esempio visto in precedenza puo' essere rielaborato per rendere le pagina piu' accativante. 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.

<style type="text/css"> A:link, A:visited { text-decoration: none } A:hover { text-decoration: underline } </style>

E' anche possibile impostare il CSS per l'effetto contrario: i link sono sottolineati di default ma perdono la sottolineatura quando il mouse vi passa sopra:

<style type="text/css"> A:link, A:visited { text-decoration: underline } A:hover { text-decoration: none } </style>

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.

<style type="text/css"> A:hover { color: red } </style>

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.

<style type="text/css"> A:hover { color: white; background:blue } </style>

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.

<style type="text/css"> A:link { font-size: 15px } A:visited { font-size: 15px } A:hover { font-size: 16px } </style>