Sei sulla pagina 1di 162

Approfondimenti di HTML

Realizzato dalla prof.ssa Paola Pucci

I frame

Gli hyperlink con luso dei frame


Mappe sensibili o image map I form I Css o fogli di stile Fine

Che cosa sono i frame?


I frame (riquadri) servono a suddividere la

finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti, file HTML, diversi.
E' possibile adottare contemporaneamente

una divisione sia in colonne (cols) che in righe (rows), in modo tale da creare una finestra divisa in pi frames.

Dal punto di vista dellutente:

navigazione del sito pi rapida in quanto solo una parte dello schermo viene ricaricata o aggiornata;

navigazione pi comoda in quanto i frame permettono di mantenere sempre in vista alcuni punti del layout (ad esempio il men di navigazione).
Dal punto di vista del webmaster:

i frame hanno la caratteristica di utilizzare una struttura che consente di includere il layout comune in pochi files.

E preferibile non eccedere nelluso dei frame per non appesantire la realizzazione del sito.

Per alcuni browser si possono verificare problemi di compatibilit in quanto non supportano lutilizzo dei frame; preferibile pertanto creare due versioni del sito, una con frame ed una senza frame.

Indicazioni: quando si vuole utilizzare i frame per creare una pagina web si prevede un file iniziale che funge da indice e definisce la struttura del documento. I contenuti veri e propri sono in altri file HTML che vengono collegati al primo. Ad esempio, se vogliamo dividere la finestra in tre riquadri abbiamo bisogno di quattro file: uno per la struttura e tre per riempire le cornici.

Esempio di uso di frame

Frame

<html> <head> <title> Esempio di frame </title> </head> <frameset rows="15%,*"> <frame src="file1.htm"> <frame src="file2.htm"> </frameset> </html>

Il file HTML che rappresenta lintera pagina contiene le istruzioni per la suddivisione della finestra:
<frameset rows ="20%, 80%"> <frame name ="upperbar" src="title.htm"> <frameset cols =30%, 70%"> < frame name = "leftbar" src=left.htm"> < frame name = "mainarea" src=main.htm"> </frameset > </frameset >

"upperbar"
(20%) 80%

title.htm left.htm main.htm "mainarea"


(70% di 80%)

"leftbar"
(30% di 80%)

Come si costruisce una pagina con FRAME


1. Definire la struttura da dare alla pagina
sinistra.htm

sx

dx

destra.htm
Dimensionamento dei frame

25%

75%

Come si costruisce una pagina con FRAME


2. Costruire la pagina HTML con la definizione della struttura
<HTML> <HEAD></HEAD> <FRAMESET COLS = 25%,75%> <FRAME <FRAME </FRAMESET> </HTML>
Dimensionamento dei frame: si possono definire frame a colonne (cols) o righe (rows). La dimensione pu essere espressa in % o in pixel

Nome attribuito al 1^ frame

SRC = sinistra.htm NAME = sx> SRC = destra.htm NAME = dx>


Nome del file html da visualizzare nel 1^ frame definito

Come si costruisce una pagina con FRAME


3. Costruire le pagine HTML sinistra.htm e destra.htm che verranno visualizzate nei rispettivi frame.
Esempi sinistra.htm
<HTML> <HEAD></HEAD> <BODY> Contenuto file <br> <B>sinistra.htm</B><br> nel frame <I><U>sx</U></I> </BODY> </HTML>

destra.htm
<HTML> <HEAD></HEAD> <BODY> <CENTER> Contenuto file <br> <B>destra.htm</B><br> nel frame <I><U>dx</U></I> </CENTER>
</BODY> </HTML>

Come si costruisce una pagina con FRAME


alto.htm

alto

20%

basso.htm

basso

* (80%)

<HTML> <HEAD></HEAD> <FRAMESET ROWS = 20%,*> <FRAME <FRAME </FRAMESET> </HTML> SRC = alto.htm NAME = alto> SRC = basso.htm NAME = basso>

Come si costruisce una pagina con FRAME


due
uno.htm 10% 20% * (70%) due.htm tre.htm quattro.htm

uno

tre quattro

25%

* (75%)

La pagina dovr essere divisa in 2 colonne. La seconda colonna dovr poi essere divisa in 3 righe. Nella slide successiva c la realizzazione.

Come si costruisce una pagina con FRAME


<HTML> <HEAD></HEAD> <FRAMESET COLS = 25%,75%> <FRAME SRC = uno.htm NAME = uno> * * * <FRAMESET ROWS = 10%,20%,*> * <FRAME SRC = due.htm NAME = due> * <FRAME SRC = tre.htm NAME = tre> * <FRAME SRC = quattro.htm NAME = quattro> </FRAMESET> </FRAMESET> </HTML>

<html> <head> <title>Esempio di frame annidati</title> </head> <frameset cols="40%,*"> <frame src="file1.htm"> <frameset rows="40%,33%,*"> <frame src="file2.htm"> <frame src="file3.htm"> <frame src="file4.htm"> </frameset> </frameset> </html>

Il

tag FRAMESET non permette di visualizzare informazioni, ma serve solamente per creare la struttura di una pagina con frame. finestra del browser.

Serve per definire la struttura interna della

Il

tag FRAME permette di definire il contenuto di ogni cornice e quindi di visualizzare le informazioni.

Il file che contiene tutti i frame (frame.htm): non ha il comando <BODY> ... </BODY> che rimpiazzato dal tag <FRAMESET>...</FRAMESET>
ha il tag <FRAME> che definisce quali pagine sono

contenute nei frame

ha una parte finale

<NOFRAMES>...</NOFRAMES> che viene visualizzata nel caso in cui il browser non supporti i frame.

Il tag <FRAMESET> ha sostanzialmente due importanti attributi: Rows, permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne, Cols, permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe .

Il browser associa in modo sequenziale i frame al file HTML, adottando il seguente criterio: da sinistra a destra per le colonne, dallalto in basso per le righe.

dimensione fissa

Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri: <frameset rows="150,*" cols="100,200,*"> Laltezza della 1 riga di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri espressa in percentuale: <frameset rows="20%,80%" cols="25%,25%,50%">

percentuale

proporzionale

In questo caso la ripartizione proporzionale: <frameset rows="1*,3*" cols="3*,2*,1*"> per quel che riguarda le righe: laltezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa una parte e la seconda riga ne occupa 3 per quel che riguarda le colonne: laltezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

frameborder = "no/yes" (di default yes), specifica se i bordi esterni dei frame devono essere visualizzati o meno framespacing = " numero", definisce lo spessore dei bordi in pixel, imposta lo spazio fra un frame e laltro, funziona solo con Internet Explorer border = numero, indica lo spessore del bordo dei bordi in pixel bordercolor = colore, definisce il colore del bordo del frameset

<frameset frameborder="no" cols="25%,75%"> <frameset framespacing="20" border=20 cols="25%,75%">

Lattributo frameborder (di default impostato a yes) permette di specificare se nel frameset devono essere presenti i bordi. framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e laltro. Di fatto equivale allattributo border, che permette di specificare lo spessore dei bordi in pixel.

<frameset bordercolor permette di specificare il colore dei bordi border="10" del frameset. framespacing="10" bordercolor=#FF000 0 cols="25%,75%">

<Frame> si usa per indicare quali file.htm devono essere contenuti nei frame definiti con FRAMESET NB: ci sar un tag <frame> per ogni riga e/o colonna <FRAME src = "URL" {URL del file .htm} name = "nome della finestra" {usato per riferimenti} scrolling = "yes" | "no" | "auto"{specifica se deve esserci la barra laterale di scorrimento della finestra} noresize = "no" {impedisce che un client possa ridimensionare il singolo frame} Noresize, se impostato, evita al frame di essere ridimensionato. Se usato in unione con scrolling =no, di fatto blocca il contenuto del frame. marginwidth ="numero" {larghezza dei margini : distanza orizzontale, in pixel, non accetta il valore 0} marginheight ="numero" {altezza dei margini: distanza verticale, in pixel, non accetta il valore 0} >

<frame src=nomefile.html scrolling=no> <frame src=nomefile.html scrolling=auto>

Lattributo scrolling (di default impostato a yes) specifica se si vuol consentire o meno allutente di poter scorrere il frame. Nel caso sia impostato a no, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice. scrolling pu anche essere impostato ad auto. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario. noresize impedisce al singolo frame di essere ridimensionato. Se usato insieme a scrolling=no, di fatto blocca il contenuto del frame. Un uso maldestro di questa tecnica potrebbe per impedire all'utente la corretta visualizzazione dei contenuti.

<frame src=nomefile.html scrolling=no> <frame src=nomefile.html scrolling=no noresize>

IFRAME, il frame interno: La coppia di tag <iframe></iframe> ci permette di inserire un frame interno, in un punto ben definito di una pagina web, e di richiamare al suo interno un qualsiasi file HTML (come per i normali frame). La sintassi utilizzata la seguente: <iframe src="pagina.html" width="200" height = "300"></iframe> Il tag IFRAME stato inserito con la versione 4.0 del linguaggio HTML e non compatibile con tutti i browser di navigazione.

Un FRAMESET si dice annidato se contenuto

allinterno di un frame. Il frame contenitore si chiama parent (padre, genitore). I frame possono essere annidati in modo: 1. diretto (directly nested frame); 2. indiretto (undirectly nested frame). Nel caso 1, il frame viene suddiviso in frameset e lURL del contenuto del frame specificato da un ulteriore <FRAMESET> annidato direttamente nella dichiarazione. Linconveniente di richiedere unulteriore etichetta <FRAMESET>, rendendo difficile lassegnazione dei nomi ai frame.

<frameset rows =*,*"> <frame src=a.htm name=superiore> <frameset cols =*,*"> <frame src=b1.htm"> <frame src=b2.htm"> </frameset> </frameset>

La riga inferiore non ha un nome, perch composta da due parti. Nel caso 2, si indica nel frame inferiore lURL di un documento che contiene unulteriore definizione di <FRAMESET> .

<frameset rows =*,*"> <frame src=a.htm name=superiore> <frame src=b.htm" name=inferiore> </frameset> Il file b.htm contiene la suddivisione ulteriore: <frameset cols =*,*"> <frame src=b1.htm name=inferiore1> <frame src=b2.htm" name=inferiore2> </frameset> La tecnica dellannidamento direttoriduce il numero dei file a discapito della leggibilit{, mentre quella dellindiretto aumenta il numero dei file, ma migliora la leggibilit del codice HTML della pagina.

<html> <head> <title>prova di frame</title> </head> <frameset rows="50%,50%" cols="50%, 50%"> <frame src="prima.htm"> <frame src="seconda.htm"> <frame src="terza.htm"> <frame src="quarta.htm"> <noframes> <p>Qui pu essere indicato il link a<A href="senzaFrame.htm"> una versione del sito</a> che non utilizzi un layout a frame</p> </noframes> </frameset> </html> ATTENZIONE AL MODO IN CUI I TAG SONO ANNIDATI!!!

Documento Frame altezza in righe altezza in righe larghezza in colonne larghezza in colonne

<FRAMESET> </FRAMESET> <FRAMESET Rows=,,,> </FRAMESET> <FRAMESET Rows=*> </FRAMESET> <FRAMESET Cols=,,,> </FRAMESET> <FRAMESET Cols=*> </FRAMESET>

(al posto di <BODY>)

(pixel o %)

(* = misura relativa)

(pixel o %)

(* = misura relativa)

cornice colore della cornice

<frameset Frameborder ="yes|no"> <frameset Bordercolor ="#$$$$$$">

larghezza della cornice <frameset Border=?>

Definizione del frame documento da visualizzare denominazione del frame larghezza dei margini

<frame> <frame src="url"> <frame name="***"|_blank|_self| _parent|_top> <frame marginwidth=?>

contenuto di ogni singolo riquadro

altezza dei margini <frame marginheight=?> barra di scorrimento? dimensione non modificabile <frame scrolling="yes|no|auto"> <frame noresize>

margine destro e sinistro margine alto e basso

Definizione del frame documento da visualizzare denominazione del frame larghezza dei margini

<frame> <frame src="url"> <frame name="***"|_blank|_self| _parent|_top> <frame marginwidth=?>

contenuto di ogni singolo riquadro

altezza dei margini <frame marginheight=?> barra di scorrimento? dimensione non modificabile <frame scrolling="yes|no|auto"> <frame noresize>

margine destro e sinistro margine alto e basso

cornice colore della cornice contenuto in assenza di frame

<frame frameborder="yes|no"> <frame bordercolor="#$$$$$$"> <noframes> </noframes>

per i vecchi browser

Gli hyperlink con lutilizzo di frame


sin.htm

sx
Link a dxlink.htm

dx

des.htm

25%

* (75%)

Nel file sin.htm, visualizzato nel frame sx, presente un collegamento ipertestuale al file dxlink.htm e si desidera che al click del mouse il suo contenuto venga visualizzato nel frame con nome dx. Quindi nel file sinistra.htm sar presente il seguente collegamento: <A HREF = dxlink.htm TARGET = dx>link a dxlink.htm</A>

Lattributo target consente di specificare qual la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo pi opportuno: <a href=paginaDaLinkare.htm target=nomeDelFrame> Esistono, poi, delle parole chiave che consentono di ricaricare i link in destinazioni predefinite:

target=_blank
target=_self target=_parent

Apre il link in una nuova finestra, senza nome


Apre il link nel frame stesso ( cos di default) Il documento viene caricato nel frameset precedente a quello corrente (pi esattamente nel frame genitore). Il comportamento di _parent particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link. Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame. Pi esattamente il documento viene caricato nella parte pi alta ("top") della struttura, ed questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.

target=_top

Target pu avere i seguenti attributi target="_self" target="_top" target="_blank" target="_parent" frame} {la finestra stessa: default} {nella finestra intera} {nuova finestra} {nel frameset in cui il

Lattributo TARGET:

Ipotesi 1: voglio caricare la pagina pubblicazioni.htm al posto dell'intera pagina:


Pubblicazioni
...

"upperbar" "leftbar" "mainarea"


...

pubblicazioni
...

Ipotesi 2: voglio caricare la pagina pubblicazioni.htm nel frame "mainarea":


"upperbar" "leftbar" Pubblicazioni ... Pubblicazioni ... "mainarea"

Ipotesi 1: voglio caricare la pagina pubblicazioni.htm al posto dell'intera pagina:


Pubblicazioni
... pubblicazioni =

<A HREF="pubblicazioni.htm" TARGET="_top">pubblicazioni </A> carica nella finestra intera

Ipotesi 2: voglio caricare la pagina pubblicazioni.htm nel frame "mainarea":


"upperbar" pubblicazioni = "leftbar" Pubblicazioni TARGET="_self">pubblicazioni ... Pubblicazioni </A> ... carica nel frame in cui ti trovi "mainarea" (NB: equivale a non indicare il TARGET)

<A HREF="pubblicazioni.htm"

I link possono essere rappresentati anche da mappe sensibili. Si tratta di immagini per effettuare collegamenti ipertestuali multipli, basati sulla posizione relativa del click allinterno della mappa. La mappa viene suddivisa in aree, denominate hot spot (punti caldi), ciascuna delle quali contiene il collegamento ad altri documenti oppure oggetti.

Per prima cosa bisogner costruire le forme di cui avremo bisogno nella nostra pagina. Avremo bisogno, quindi, di uno strumento idoneo allidentificazione delle dimensioni dei componenti da realizzare: per esempio Paint, Adobe PhotoShop, Gimp, etc.

<MAP name=nome mappa> dettagli </MAP> I dettagli riguardano la forma (o le forme) della mappa.

<MAP name=nome mappa> <AREA SHAPE=rect|circle|poly|default coords=x1,y1,x2,y2 (rettangolo) x1,y1,...,xn,yn (poligono) x,y,r (cerchio) href=URL|nome.htm >

</MAP>

<img src=immagine.gif usemap=#mappa> <map name=mappa> <area shape=rect coords=50,50,100,100 href=...> <area shape=polygon coords=120,130,180,200,400,400 href=...> /map>

Unimage map unimmagine suddivisa in aree sensibili che, al click del mouse, si comportano come link. Per esempio, consideriamo limmagine willer.gif.

click qui per caricare kit.htm click qui per caricare carson.htm

click qui per caricare tiger.htm

click qui per caricare tex.htm

Per costruire un image map: Si dichiara che, in corrispondenza di una certa immagine, verr usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="willer.gif" USEMAP="#miamappa"> Si definisce la "mappa" (con il tag MAP) <MAP NAME="miamappa"> <AREA SHAPE="rect" COORDS="55,25,100,70" HREF="kit.htm"> <AREA SHAPE="rect" COORDS="125,25,160,70" HREF="tiger.htm"> <AREA SHAPE="rect" COORDS="165,25,220,70" HREF="tex.htm"> <AREA SHAPE="rect" COORDS="80,75,125,125" HREF="carson.htm"> </MAP> NB: Come si fanno a conoscere le coordinate?

Si pu caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse (NB: l'origine delle coordinate in alto a sinistra):
<A HREF="#"> <IMG SRC="willer.gif" ISMAP> </A>

NB: Gli strumenti di sviluppo (come Dreamweaver, FrontPage, ...) generalmente forniscono metodi per costruire automaticamente le mappe!

In alcuni documenti HTML pu essere utile creare dei moduli che possono essere riempiti da chi consulta le pagine stesse e inviati a chi gestisce il sito o al server stesso. Le informazioni inserite possono poi essere spedite per e-mail o attraverso una tecnologia server (pagine php, asp, ).

Per creare i moduli si deve usare il tag:


<FORM> modulo

</FORM>

I parametri principali contenuti nel tag, sono: <ACTION> </ACTION> stabilisce la destinazione del FORM, specifica lazione indicata dopo aver premuto il tasto di invio, in generale un URL di un file.
<METHOD> </METHOD> che specifica come le

informazioni contenute nel FORM debbano essere passate al server.

get: indica al browser di inviare i dati inseriti

dallutente nel form, separandoli dal nome della pagina destinazione con punto di domanda. Inseriti in una stringa lunga max. 256 caratteri. post: si rende invisibile allutente stringa inviata al server, perch inclusa nel corpo del messaggio, pi sicuro. enctype: originariamente usati per allegati di posta elettronica, ora servono per conoscere natura file presenti nel web. Composti da 2 parti uno principale e uno specifico: esempio "image/gif ", "text/plain " "text/html ".

Elementi basilari che compongono i form sono suddivisi in 4 tag: <INPUT>: determina un input da parte dellutente, <TEXTAREA>: usato per inserire testi molto lunghi, <SELECT>: si usa per creare men di scelta, <FIELDSET>: permette di raggruppare i campi per tipologia.

<input

type = "text" "radio"

{input di testo} {crea radio box}

"checkbox" {crea checkbox}


"password" {crea un campo password} hidden" {crea un campo nascosto}

file"

{per inserire dei file}

"submit - "reset " >


Il tag input ha degli attributi che dipendono dal type.

Ogni elemento deve avere un nome univoco che sar associato ai dati inseriti dallutente (nella forma nome = valore).

< input type ="text" name ="nome del campo di input" size ="numero"{larghezza in numero di caratteri, per lo scrolling } value = "testo" {testo di defaultdi solito vuoto} maxlength = "numero" {numero massimo di caratteri inseribili} > Esempio: < input type = "text" name = "nazionalita"

size = 20 value = "italiana maxlength = 50 >

readonly = "true/false" : se si

vuole che i campi di testo siano/non siano editabili, enabled = "true/false" : abilita o disabilta il campo testo

E una casella di testo a riga singola.


I dati sono in formato alfanumerico.

testo {questo il testo che appare accanto al bottone}


<input type = "radio" name = "nome del gruppo di bottoni"

value = "valore di risposta del bottone"


{valore che viene restituito quando il bottone viene selezionato}

checked {il bottone selezionato di default}


>

E una scelta esclusiva, una sola tra le diverse alternative.

testo {questo il testo che appare accanto al bottone}

<input type = "checkbox"


name = "nome del gruppo di checkbox" value = "valore di risposta del box" {valore restituito quando si seleziona il bottone} checked {bottone selezionato per default} > A differenza di radio, in checkbox tutti gli elementi hanno name diversi!!!!

E una scelta multipla, pi di una tra le diverse alternative.

<input type = "password" name = "nome campo" size = "numero" {larghezza del campo password}

value = "testo"
{non ha molto senso metterlo in questo caso} >

E una casella di testo, in cui non visibile il contenuto, perch sostituito da una serie di asterischi.

<input

type = "submit"
type = "reset" value = "testo che compare sul bottone

"

>

Il comando di "submit" deve sempre essere presente (a meno che si sostituisca la sua funzione con del codice Javascript) "submit" (pulsante di invio) quando viene cliccato spedisce il modulo (o meglio esegue lazione specifica nellaction), "reset" (pulsante di reset) quando cliccato annulla tutte le opzioni scelte dallutente, incluso il testo scritto nelle caselle.

type=hidden
<input name="hiddenField" type="hidden" value="nessuno mi vede" >

type=file

Loggetto INPUT arricchito con due attributi che permettono di controllare il focus e aggiungere suggerimenti agli utenti: placeholder: contiene una stringa che sar visualizzata in un campo di testo se il focus non su quel campo, autofocus: indica il campo sul quale posizionare il focus al caricamento del form, image: permette di inserire unimmagine al posto del pulsante di Invio.

Per creare un campo di testo di pi righe, serve per i commenti, <textarea name = "nome" {nome del campo}

rows = "numero" {numero di righe per scrivere}


cols = "numero" {numero di colonne per scrivere} wrap = "virtual/off"{se off testo va a capo solo se utente preme invio, se virtual lo fa automaticamente}>

testo {questo il testo che appare}


</textarea>

I men si chiamano anche caselle combinate. Il tag utilizzato <select> </select> che permette di creare dei men a selezione singola o multipla. Per ogni riga del men si usa il tag <option> elemento del menu </option>.

<select name = "nome del campo" size = "numero" {quante righe del men devono essere visualizzate} multiple {permette la selezione multipla; altrimenti si ha la selezione singola} > . </select>

<optgroup label = "nome" {raggruppa gli elementi tra loro, assegnando un titolo a ogni gruppo, con lattributo label } <option value = "valore restituito" {valore restituito quando viene selezionata la riga} selected {riga selezionata di default} > testo che compare nel men </option>

Esempio di selezione singola

Esempio di selezione multipla

Le informazioni contenute nei men a scelta possono essere usate da altri programmi. Ad esempio, i form sono utili in combinazione con i database: ogni dato del form viene memorizzato in un database per elaborazioni successive.

Si possono raggruppare, incorniciandoli automaticamente, pi campi modulo allinterno dei form. Luso di questo tag ha un carattere pi estetico che pratico. Si raggruppano tutti i controlli presenti tra <FIELDSET> e </FIELDSET> allinterno di una cornice. <form action = " nomefile " method = " get|post|enctype " <fieldset> <legend align = "center "| "top"|"bottom"| " left "| " right " > testo </legend> </fieldset> </form>

Introduzione

Esempi di uso CSS

Tipi di fogli CSS


Sintassi del CSS Propriet dello sfondo

Le classi
Le pseudoclassi

Propriet del testo


Propriet delle liste Propriet dei riquadri

Propriet dei filtri


Propriet del

posizionamento Propriet del mouse

Col passare del tempo, il web si diffuso a macchia

d'olio, gli utenti sono diventati moltissimi, e i designer hanno cominciato a curare l'aspetto comunicativo delle pagine e a preoccuparsi anche della loro presentazione grafica. in questo momento che si scoprono tutti i problemi legati allHTML e soprattutto alla sua gestione, i web designers si sono visti costretti ad aggirare i limiti stilistici che pone lHTML, scontrandosi per con nuovi problemi.

Vediamo quali sono i limiti pratici principali: conversione del testo in immagini, uso di immagini per il controllo dello spazio bianco, uso di tabelle per l'impaginazione, scrittura di programmi in sostituzione dellHTML, difficile gestione degli aggiornamenti, modifiche da effettuare sui singoli file.

I CSS (Cascade Style Sheets), che in italiano

significa fogli di stile a cascata, risolvono gran parte dei problemi di gestione e organizzazione delle pagine web.
Il vantaggio fondamentale che offrono i fogli di

stile, rispetto allHTML, il controllo dello stile delle pagine web attraverso la separazione tra contenuti, struttura e stile.

I fogli di stile permettono di specificare in modo

semplice la spaziatura delle righe, i rientri, i colori usati per il testo e gli sfondi, il corpo e lo stile dei caratteri e una moltitudine di altri dettagli.
I fogli di stile separano lo stile dal contenuto. Purtroppo uno dei limiti dei fogli di stile che non

sono compatibili con tutti browser, nonostante siano stati approvati dal W3C.

Ma cosa si intende per stile? Uno stile un gruppo

di attributi di formattazione che definiscono l'aspetto di una parte di testo, all'interno di un singolo documento. Si pu utilizzare un foglio di stile CSS per controllare molti documenti, contemporaneamente, e comprendere in un unico foglio tutti gli stili di un documento. Attraverso l'uso combinato di un foglio di stile CSS e uno stile HTML si ha il vantaggio di collegare pi documenti.

Per fare in modo che gli stili CSS controllino

la formattazione di un paragrafo, necessario eliminare tutta la formattazione HTML manuale o gli stili HTML. I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile, infatti, lo stile pu essere definito allinterno o allesterno del documento HTML, con estensione .css.

Separare i fogli di stile dai documenti HTML offre svariati benefici: si possono condividere i fogli di stile per un gran numero di documenti (e siti), si pu cambiare il foglio di stile senza che ci richieda modifiche al documento, la formattazione HTML manuale ha la precedenza, rispetto alla formattazione applicata da uno stile css.

Possiamo dividere i fogli di stile in tre categorie: fogli di stile inline: con questo metodo si utilizza uno stile da applicare ad un singolo tag HTML; fogli di stile interni: con questo metodo si definisce lo stile, non per il singolo tag, ma per tutta la pagina; fogli di stile esterni: con questo metodo lo stile che si definisce pu essere utilizzato da pi pagine web, infatti la definizione viene data all'interno di un file esterno (con estensione .css ) che viene linkato alla pagina con un apposito costrutto.

Quando si ha la necessit che lo stile sia relativo al solo

blocco che stiamo trattando, senza che questo vada ad influire su altre parti dello stesso documento o pagina web. Si usa, quindi quando uno stile deve essere usato una sola volta. Per esempio un paragrafo <p> che debba avere determinate caratteristiche, ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno dello stesso documento. esempio : <p style="text-align : justify; text-indent : 12px">

Tutto ci che sar scritto tra l'elemento di apertura <p

style= ..... > (paragrafo) e fino al suo elemento di chiusura </p> avr come stile: giustificato con una indentazione di 12 pixel. Si possono combinare fra di loro pi stili, la sintassi corretta prevede di racchiudere il tutto fra doppi apici separando i vari attributi di stile con il punto e virgola.
Luso dell'elemento / (tag) di chiusura, in questo caso

</p>, che per HTML non era indispensabile, lo diventa invece nel caso dei CSS.

La chiusura di questo elemento, infatti determina

anche la chiusura e quindi la fine dello stile, per cui meglio prendere la sana abitudine di chiudere sempre l'elemento (tag) aperto.
Si noti come lo stile sia stato associato all'elemento

<p>, semplicemente avendo introdotto lo stile all'interno delle sue stesse parentesi angolari < > allo stesso identico modo avrebbe potuto essere associato a qualsiasi altro elemento valido di HTML.

Con i CSS si adoperano di solito due elementi di HTML

che non hanno altro scopo, se non quello di fare da contenitore, questi due elementi infatti non producono alcun effetto se adoperati da soli, ma ad essi possibile associare tutti vari stili, e sono rispettivamente <div></div> e <span></span> Per cui avrei potuto ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo: <div style="text-align : justify; text-indent : 12px"><p> tutto il testo del paragrafo </p></div>

Uno stile incorporato, cio quando allo stesso

stile fanno riferimento diversi elementi (tags) HTML. Sarebbe infatti estremamente dispersivo, oltre che laborioso, definire lo stesso stile pi volte all'interno della stessa pagina, quando poi servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Cos facendo tutti gli elementi interessati seguiranno quello stesso stile. Si usa quando un singolo documento ha un solo stile.

In questo caso le istruzioni non saranno pi inserite

all'interno del singolo elemento (tag), ma ad inizio pagina dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>. Questo metodo non impedisce per di fare uso anche di eventuali definizioni di stile in linea, le quali avrebbero priorit sulle dichiarazioni di stile inserite ad inizio pagina. La sintassi : <style type="text/css"> <!-- p { text-align : justify; textindent : 12px } --> </style>

Adesso tutto ci che si trover all'interno di

qualsiasi paragrafo definito con la consueta forma <p></p> subir lo stile impostato a inizio pagina, a meno che non ne venga creato uno in linea il quale, come ho detto sopra, avrebbe la priorit rispetto all'altro.
In questo contesto sono proprio loro, i tags

chiusi, a decretare la fine dello style oltre che quella del paragrafo.

Tornando al codice dell'esempio, i due

elementi <!-- e --> posti ad inizio e fine blocco, sono gli stessi adoperati in HTML. Questi elementi, infatti, cos come in HTML hanno significato di commento, senza influenzare in alcun modo il browser.
Nell'esempio stato adoperato l'elemento

(tag) <p>, ma potevamo usare qualsiasi altro elemento valido di HTML.

<head> <style type = "text/css "> hr {color : blue} p {margin-top : 10 px} body {background-image : url (" immagini/sfondo.gif ")} </style> </head>

Cosa significa foglio di stile esterno ? Significa che se gli stili definiti sono molti, o meglio ancora molte sono le pagine web che ne faranno uso, la cosa migliore sar quella di creare una struttura alla quale tutte le pagine possano fare riferimento, questa struttura altro non sarebbe che il nostro foglio di style, un documento di testo normalissimo, ma con estensione finale .css, dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style, adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.

Proviamo ad immaginare i vantaggi, pensate

di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace pi, o sostituire un colore con un altro, sar sufficiente apportare la modifica una sola volta a quel singolo foglio per vedere poi immediatamente su tutte le pagine il risultato della modifica.

Sono finiti i tempi in cui si passavano ore ed ore a

rielaborare tutte le pagine dove poi immancabilmente se ne dimenticava sempre qualcuna. Per creare questo foglio esterno, sar sufficiente ancora una volta un editor, lo stesso che adoperate per HTML, meglio ancora se uno specifico per css, anche se comunque uno qualsiasi va benissimo, l'importante sar salvare sempre in formato ASCII, cio privo di particolari formattazioni, avendo cura di fare in modo che il file cos salvato sia di tipo .css e non .txt come normalmente avviene.

Esaminiamo pi attentamente il nostro foglio esterno: p { text-align: justify; text-indent: 12px } si noter che praticamente lo stesso usato nello "style incorporato" con la sola differenza che non ha pi gli elementi iniziali che ne dichiaravano lo stile, questo perch essendo un foglio esterno la dichiarazione viene messa nel documento HTML che lo richiama.

Facendo uso delle seguente sintassi: <link rel="stylesheet" type="text/css " href="nome_assegnato.css" > Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) <head> e </head> del file HTML, dove nome_assegnato.css sar il nome esatto che avrete deciso di assegnare al file stesso.

Ovviamente questa riga deve essere inserita in

tutte le pagine web che fanno riferimento al foglio di style cos creato. Un foglio di style esterno tipo potrebbe essere questo: BODY{ margin-left : .5cm; margin-right : .5cm; color : #000099; font-family : Verdana, Arial, Helvetica; font-size : 10pt; }

Vediamo adesso quello che il pi comodo e

pratico dei sistemi, quello in cui esiste un foglio esterno separato dal documento e, nel quale, scrivere tutti gli stili.
Anche nel caso in cui decidessimo di fare uso di un

foglio di style esterno, sar possibile definire all'occorrenza stili ad inizio pagina o stili in linea e questi avrebbero la precedenza sul nostro foglio esterno.

Vediamo cosa ridefinisce, tanto per capire meglio e cominciare a familiarizzare con le varie sigle: body, tutto quello dichiarato all'interno di questo elemento sar esteso a tutto il documento, per cui tutta la pagina web far uso del font Verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercher di fare uso di Arial, se anche questo dovesse mancare allora Helvetica, dopo di che sar assunto il font di default = font-family : Verdana, Arial, Helvetica;

Margine laterale dai bordi destro e sinistro:

0,5cm = margin-left : .5cm; margin-right : .5cm; Colore del testo: blu scuro = color : #000099; Dimensione del font: 10 punti = font-size : 10pt;

A:LINK{ text-decoration : none; color : #009900 } A:VISITED{ text-decoration : none; color : gray } A:HOVER{ Color : #ffff00; text-decoration : none; } TD{ font-family : "MS Sans Serif"; font-size : 12pt } p{ text-align: justify; text-indent: 12px }

Link da visitare: non sottolineati di

colore verde = A:LINK{text-decoration : none; color : #009900} Link visitati: non sottolineati di colore grigio = A:VISITED{text-decoration : none; color : gray}

Cambio colore al passaggio del mouse: non

sottolineati di colore grigio = A:HOVER{text-decoration :none; color : #ffff00} Tabelle: font Ms Sans Serif dimensione 12 punti= TD{font-family : "MS Sans Serif"; font-size : 12pt} Paragrafo: allineamento giustificato, indentazione 12 pixel= p{text-align: justify; text-indent: 12px}

La sintassi di uno stile si compone di tre parti:


un elemento, una propriet, un valore.

Uno Style Sheet un insieme di regole che si applicano a un documento HTML.

Regola: Selector specifica lelemento del documento HTML a cui applicare la Declaration, Declaration definisce le propriet{ da applicare allelemento definito dal Selector. Dichiarazione: Property propriet{ dellelemento, Value valore della propriet.

Un foglio di stile quindi una collezione di regole

stilistiche. La sintassi da usare nei fogli di stile la seguente : inserire gli attributi dentro le parentesi graffe { } separare gli argomenti consecutivi dal segno punto e virgola (;), invece che dalla virgola usare i due punti (:) al posto del segno uguale (=) separare con un trattino (-) gli attributi composti da pi termini.

Per inserire i fogli di stile su una pagina

HTML bisogna inserire, tra il tag di apertura e di chiusura <head>, il tag <style> in questo modo : <head> <style type="text/css"> ... </stile> </head>

body {background-color : colore di sfondo o in inglese o in esadecimale preceduto da # o transparent, colore di sfondo trasparente;}
in questo modo indico lo sfondo della mia pagina.

Se si vuole specificare la stessa propriet in pi elementi necessario separarli con la virgola, mentre se si vogliono inserire pi propriet vanno separate dal punto e virgola.

body {background-image: url (immagine.gif); indirizzo dellimmagine di sfondo o none, nessuna immagine di sfondo;} in questo modo indico lo sfondo della mia pagina attraverso unimmagine o senza nessunimmagine.

body { background-repeat : repeat indica che l'immagine deve essere replicata sia in orizzontale sia in verticale indica che l'immagine deve essere replicata sia in orizzontale sia in verticale | repeat-x deve essere replicata soltanto in orizzontale | repeat-y deve essere replicata soltanto in verticale | no-repeat limmagine non viene ripetuta; } serve per specificare come disporre le immagini di sfondo, quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina

Logicamente questo attributo deve essere adoperato in abbinamento a background-image. {background-image : url(logo.gif); background-repeat : repeat-x } (esempio della slide precedente) background-repeat : repeat-y } (esempio di questa slide)

body { background-position: top left in alto a sinistra, top center in alto al centro, top right in alto a destra, center left a met pagina sul bordo sinistro, center center al centro della pagina, center right a met pagina sul bordo destro, bottom left in basso a sinistra, bottom center in basso al centro, bottom right in basso a destra, x % y - % il 1 valore la posizione orizzontale, il 2 quella verticale. Angolo in basso a sinistra 0% 0%, angolo in basso a destra 100% 100% ;} imposta la posizione di unimmagine di sfondo.

Esempi: {background-image : url(logo.gif); backgroundrepeat : repeat-y; background-position : 50% 50%} {background-image : url(logo.gif); backgroundrepeat : repeat-x; background-position : 50% 50%} {background-image : url(logo.gif); backgroundrepeat : repeat-x; background-position : 10% 10%}

body { background-attachment : scroll limmagine scorre sullo schermo insieme al resto della pagina | fixed limmagine resta fissa sullo sfondo ; } definisce come si comporta l'immagine usata nel momento in cui si scorre la pagina, con le barre di scorrimento. Background la propriet di sintesi da dichiarare in ununica volta, posso mettere da 1 a 5 propriet{: color image repeat attachment position

body {color: colore o in inglese, o in esadecimale preceduto da #, o da un valore RGB (255, 0, 0) ;} imposta il colore del testo Lattributo per il posizionamento dei livelli P
P {letter-spacing: valore indica lo spazio tra i caratteri |normal definisce lo spazio normale tra i caratteri ;}

modifica lo spazio fra i caratteri e il suo valore pu essere anche negativo

P {text-align : left a sinistra, right a destra, center centrato, justify giustificato;}

allinea il testo
P {text-indent : valore definisce unindentazione fissa, % definisce unindentazione espressa in percentuale rispetto alla larghezza dellelemento che contiene il testo;} indenta la prima linea di un testo

P {text-decoration : overline sopralineato | underline sottolineato | line-through sbarrato | none nessuna decorazione | blink intermittente;}

Aggiunge decorazioni al testo


E' anche possibile combinarne pi di uno, per esempio inserendo sia underline che overline. None lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.

P {text-transform : none intermittente | capitalize ogni parola del testo inizia con la maiuscola | uppercase tutto maiuscolo | lowercase tutto minuscolo;} controlla il maiuscolo e il minuscolo

<body> <p style = " font-family : serif graziato | san-serif elvetica | monospace monospaziato | cursive corsivo | fantasy dipende dal browser | font qualsiasi nome di font " definisce la forma del carattere

<body> <p style = {font-family: Verdana, Arial, sansserif} Quando si mettono pi valori per una propriet si sceglie sempre il primo, se questo va; poi si continua in sequenza.

p {font-size: xx-small | x-small |small |medium |large | x-large | xx-large impostano le dimensioni del font |smaller diminuisce il font rispetto a quello corrente |larger aumenta il font rispetto a quello corrente | valore fissa laltezza del carattere |% altezza espressa in percentuale rispetto allaltezza dellelemento che contiene il testo ;} imposta laltezza del carattere

p {font-style : normal normale| italic corsivo| oblique obliquo ;}


sceglie il carattere tra normale o obliquo

p {font-variant : normal normale| small-caps | maiuscoletto ;}


imposta il maiuscoletto

p { font-weight : bold grassetto | bolder pi nero rispetto al carattere corrente | lighter pi chiaro rispetto al carattere corrente | normal normale;} imposta lo spessore del testo. Oltre ai parametri suddetti possibile introdurre anche un numero da 100 a 900 con incrementi di 100, e soltanto a partire dal valore 700 si avvertir l'effetto grassetto, 400 normale. font la propriet di sintesi per impostare tutte le propriet di font in ununica dichiarazione.

I valori ammessi sono: font-style font-variant si possono specificare da 1 a 5 prop. font-size/line-height font-family inoltre posso avere: caption definisce i font utilizzati per i controlli che unintestazione allinterno di un form icon definisce i controlli usati per le etichette con icona menu definisce i font usati per i menu a cascata message-box definisce i font usati per le finestre di dialogo status-bar definisce i font usati per le barre di stato dei form

Alcuni esempi di possibili stili:

body {font-size : 10pt; color : #000099} B {font-size : 12pt; color : #ff0000} I {font-size : 8pt; font-style : italic} Vediamo i tre esempi visti sopra: body ha un font formato da 10 punti e di colore blu scuro, per cui tutto il testo all'interno di quella pagina seguir questo stile, perch l'elemento HTML body si riferisce a tutto il documento HTML.

B ( bold: grassetto in HTML) invece, aumenta il

font di 2 punti rispetto a quello definito in body, cos da evidenziarlo maggiormente e in pi ne cambia anche il colore passando dal blu al rosso.
I ( italico: corsivo in HTML ) mantiene lo stile

italic, ma ne riduce il font di due punti rispetto a quello standard definito nel body.

Le propriet permettono di scegliere tra diversi marcatori di una voce di lista o di impostare unimmagine come marcatore. UL {list-style-image: none nessuna immagine | url (immagine.gif) percorso per limmagine ; }
imposta limmagine come marcatore di una lista

UL {list-style-position: inside il marcatore e il testo sono rientrati | outside mantiene il marcatore incolonnato a sinistra ; }

posiziona il marcatore nella lista

UL {list-style-type : none nessun marcatore | disc disco pieno, default | circle solo circonferenza | square quadrato | decimal numero decimale | lower-roman numeri romani minuscoli i | upper-roman numeri romani maiuscoli I | lower-alpha alfabeto minuscolo a| upper-alpha alfabeto maiuscolo A ; }
imposta il tipo di marcatore

UL {list-style la propriet di sintesi per impostare tutte le propriet{ di una lista in ununica dichiarazione e pu avere da 1 a 3 propriet tra: type position image

I riquadri o box sono formati da unarea per il contenuto che pu essere un testo o unimmagine, da una spaziatura (padding) che racchiude larea del contenuto, da un bordo e da un margine.

P {margin : auto lampiezza del margine determinata automaticamente dal browser | valore indica lampiezza del margine | % percentuale rispetto allampiezza dellelemento contenitore ; }

imposta lampiezza del margine (sempre trasparente)


P {border-width : thin sottile | medium medio| thick grosso |valore misura dellampiezza del bordo ; }
definisce lampiezza del bordo

P {border-style : none nessun bordo| hidden bordo nascosto | dotted punteggiato | dashed tratteggiato | solid continuo | double doppio | groove incassato | ridge in rilievo | inset incassato in 3D | outset in rilievo in 3D ; }

definisce lo stile del bordo


P {border-color : pu essere di qualsiasi colore valido; }

definisce il colore del bordo


P {padding : valore indica lampiezza del padding | % percentuale rispetto allampiezza dellelemento contenitore ; }

imposta lampiezza del padding

{ height : auto laltezza scelta dal browser | valore altezza dellelemento | % percentuale rispetto allaltezza dellelemento contenitore ; } imposta laltezza di un elemento {width : auto la larghezza scelta dal browser | valore larghezza dellelemento | % percentuale rispetto alla larghezza dellelemento contenitore ; } imposta la larghezza di un elemento { line-height : normal interlinea 1| numero numero di interlinee | valore distanza tra due linee | % distanza espressa in % rispetto allaltezza del contenitore ;} imposta la distanza tra due linee

{ display : none lelemento non viene visualizzato | block lelemento viene visualizzato con linterruzione di una riga prima o dopo il box dellelemento | inline lelemento viene visualizzato senza linterruzione di riga | list-item lelemento viene considerato come la voce di una lista | run-in il browser sceglie se applicare lopzione block o inline ;} specifica se un box deve essere visualizzato e con quali modalit

{ position : absolute lelemento posizionato in un punto qualsiasi della pagina. La dislocazione dellelemento descritta dalle propriet{: left, right, top e bottom | relative sposta lelemento a partire dalla posizione assunta dal browser | static La posizione dellelemento statica e definita dal browser | fixed come absolute, ma supporta operazioni di scroll e di paginazione ; } specifica il tipo di posizionamento dellelemento

top : specifica il posizionamento del margine superiore right : specifica il posizionamento del margine destro bottom : specifica il posizionamento del margine inferiore left : specifica il posizionamento del margine sinistro i valori ammessi sono: valore indica la distanza | % distanza in percentuale rispetto alle dimensioni dellelemento che lo contiene | auto la distanza decisa dal browser ;

In generale, il contenuto di un box confinato nel perimetro del box stesso. In certi casi il contenuto pu superare (overflow) i limiti del box. Pu accadere quando: un box contenuto in un altro troppo ampio rispetto al box contenitore; laltezza di un elemento supera laltezza dichiarata esplicitamente per il box che contiene lelemento; un box posizionato in modo assoluto; un box ha margini con valori negativi.

{ overflow : visible viene mostrata la parte eccedente | hidden resta nascosta la parte eccedente | scroll attiva le barre di scorrimento in ogni caso | auto attiva le barre di scorrimento solo se necessarie per mostrare tutto il contenuto ;}

specifica come e se un box inserito nella pagina, cio come deve essere visualizzato il contenuto di un elemento se oltrepassa il box.

Una regione di clipping (ritaglio) definisce quale porzione del contenuto di un elemento pu essere visibile. In mancanza di indicazioni, la regione di clipping ha le stesse dimensioni del box dellelemento. La regione di clipping pu essere modificata. { clip : auto la regione di clipping ha dimensioni uguali a quelle del box | rect ( top right bottom left) top right bottom left: dimensioni delle operazioni di ritaglio ; } definisce la regione di clipping

Un float box viene trattato come un box e viene trascinato a sinistra o a destra fino al punto in cui il suo margine esterno tocca il margine del blocco che lo contiene. { float : left trascina a sinistra | right trascina a destra | none nessun trascinamento } serve per trascinare un box a destra o a sinistra sulla linea corrente

Le propriet{ dellelemento di filtro colore definiscono lopacit{ e altri particolari effetti di visibilit{ dellelemento. La propriet pi utilizzata alpha. { alpha : opacity percentuale da 0 a 100. 0 per trasparente, 100 per normale | finishOpacity stabilisce lopacit{ finale per loggetto, cos la trasparenza delloggetto diventa graduale | style stabilisce il tipo di gradiente = 1 gradiente lineare, = 2 gradiente radiale, = 3 gradiente rettangolare | startx starty finishx finishy stabiliscono le coordinate da cui avr inizio e in cui avr{ fine lapplicazione della propriet{ opacity ;} specifica come deve essere visualizzato il contenuto di un elemento se oltrepassa il box

{ blur : add stabilisce se loggetto originale viene aggiunto a quello filtrato, add = true/1 vero, add = false/0 falso | enabled stabilisce se il filtro viene o meno applicato add = true/1 vero, add = false/0 falso, se viene tralasciato si assume add = true | direction stabilisce la direzione della scia tenuto conto del sistema di riferimento indicato | strenght stabilisce lampiezza in pixel della scia; } lelemento presenta una scia, come una macchia lasciata dalla carta assorbente

{ gray : nessuno } lelemento viene trasformato in una scala di grigi { invert : nessuno } lelemento viene invertito nei colori { xray : nessuno } lelemento viene trasformato in negativo in bianco e nero

{ wave : add 1 aggiunge limmagine originale a quella ondulata, 0 no | freq indica il numero delle onde | light indica la luminosit{ dellondulazione, da 0 a 100 | phase indica langolazione dinizio delle ondulazioni, da 0 a 100 | strenght stabilisce lintensit{ delleffetto ondulatorio; } viene aggiunto un disturbo ondulatorio allelemento

Il posizionamento avviene, oltre che sulle due coordinate dello schermo, su una sorta di "terza dimensione " che specifica come si dispone un elemento rispetto agli elementi che occupano la stessa area dello schermo. { z-index : valore valori interi, sia positivi che negativi ; } serve per controllare quali elementi verranno disposti "sopra" o "sotto" rispetto alla profondit dello schermo. Elementi con z-index maggiore verranno disposti sopra. Senza luso di questa propriet{ lordine prevede priorit{ crescente per lultimo elemento.

Si pu intervenire per modificare la forma del mouse a seconda dellelemento della pagina su cui posizionato. { cursor : default forma assunta in mancanza di indicazioni | auto la forma del puntatore decisa dal browser | crosshair croce sottile + | pointer mano con indice puntato usata per i link | text cursore testuale I | wait clessidra | help aiuto | url link allimmagine personalizzata da assegnare al cursore }

specifica per un elemento il tipo di cursore da visualizzare

H1 { font: 36pt serif }


H1 { font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal; } UL { font-style: italic }

UL { font-style: italic; font-weight: bold; }

A: link { text-decoration: underline }

A: link, A: visited { text-decoration: none } A: hover { background: cyan }

Definizione del linguaggio di default per i fogli di stile:


<meta http-equiv="Content-Style-Type" content=text/css > HTTP Header: Content-Style-Type: text/css

special.css P.special { color : green; border: solid red; }

<html> <head> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special > This paragraph should have special green text. </p> </body> </html>

E possibile definire stili differenti per il medesimo elemento di HTML utilizzando le classi. Si supponga di voler disporre di due tipi di paragrafo da utilizzare in un documento: un paragrafo giustificato a destra e un altro centrato. Definizione delle classi paragrafo:

P.right { text-align: right } P.center { text-align: left } Nel documento HTML si possono usare gli attributi di classe

Nel documento HTML si possono usare gli attributi di classe: <P class = right> Questo paragrafo allineato a destra </P> <P class = center> Questo paragrafo allineato a sinistra </P> Solo un attributo di classe pu essere usato per un elemento di HTML. Il codice seguente non ammesso: <P class = right class = center>

Se invece di indicare il nome di un elemento per definire una classe si usa il carattere . (punto), si definisce una classe generica che pu essere applicata a qualsiasi elemento di HTML. Nellesempio seguente tutti gli elementi con class = centrata vengono centrati. .centrata { text-align: center } Nel codice seguente la classe centrata viene applicata sia allelemento H1, che allelemento P.

Significa che entrambi gli elementi seguono le regole definite nella descrizione di questa classe di appartenenza. <H1 class = centrata > La prima intestazione centrata </H1> <H2> La seconda non centrata </H2> <P class = centrata> Il paragrafo invece s </P>

Alcune caratteristiche della visualizzazione di un documento non sono direttamente dipendenti dalla struttura del documento, ma sono piuttosto funzioni dellinterazione utente-browser, per esempio quando viene modificato il colore dei link dopo averli visitati. Questi aspetti sono gestiti dalle pseudoclassi, che sono definibili solo per alcuni tag, possiedono un nome e si indicano nella definizione dellelemento dopo i due punti ( : ). La sintassi la seguente: nome_classe : pseudoclasse {propriet : valore;}

La pseudoclasse :link si applica ai link che non sono stati visitati. La pseudoclasse :visitated si applica quando un link stato visitato dallutente. In questo caso tutti i link: a: link {color : red;} a: visited {color : green;} Un elemento pu acquisire o perdere una pseudoclasse quando lutente interagisce con il browser; browser interattivi possono infatti cambiare laspetto della pagina in risposta ad azioni dellutente. Per esempio la pseudoclasse :hover si applica quando lutente ha selezionato un elemento, ma non lo ha ancora attivato, in sostanza sopra il link con il cursore del mouse, ma non ha ancora premuto il tasto del mouse a: hover {color : blue;}

Nel caso precedente il mouse passa sopra il link ed esso diventer di colore blu. Questi tipi di pseudoclassi prendono il nome di pseudoclassi dinamiche. A questa categoria appartengono anche : active e : focus. La prima si applica quando un elemento stato attivato dallutente, dal momento in cui lutente preme il bottone del mouse al momento in cui lo rilascia. La seconda si applica invece quando un elemento riceve il focus, ma non attivo in Internet Explorer. Per esempio: a: link {color : red;} a: visited {color : blue;} a: active {color : lime;} a: hover {color : yellow;}

E importante rispettare la sequenza delle pseudoclassi dinamiche. Inoltre le pseudoclassi a : link, a : visited e a : active corrispondono nellHTML agli attributi del tag body link, vlink e alink, i quali consentono di cambiare il colore di default dei link non visitati, dei link visitati e dei link attivi.

FINE