informazione e presentazione

INFORMAZIONE E PRESENTAZIONE• Lo scopo di una pagina web è, essenzialmente la

trasmissione di una informazione.• L’informazione è costituita da due aspetti essenziali:

– I contenuti– La formattazione dei contenuti

• I contenuti sono forniti attraverso linguaggi di marcatura che caratterizzano i vari oggetti del documento

• La formattazione è determinata dall’interpretazione del programma utente.

PRIMA PARTE: INTRODUZIONE

BROWSER E STILI• Ogni browser ha una rappresentazione predefinita degli

oggetti della pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui l’utente (ma non l’autore) può intervenire in minima parte.

• Per permettere agli autori di avere un maggiore controllo sulla rappresentazione dei contenuti, sono nati marcatori (come ad esempio font) il cui scopo non era più caratterizzare gli oggetti del documento, ma fornire una formattazione degli stessi.Come conseguenza i contenuti risultano indissolubilmente legati alla loro rappresentazione grafica.


I FOGLI DI STILE A CASCATA (CSS)

• Compito dei CSS (Cascading Style Sheets: Fogli di Stile a Cascata) è ripristinare la separazione dei contenuti e dalla formattazione.

• I CSS possono essere visti come lo strumento per la definizione da parte dell’autore degli stili predefiniti del browser

• I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato.


UN DIVERSO APPROCCIO• Nella realizzazione di pagine web tramite XHTML+CSS è

richiesto un diverso approccio rispetto a quanto si farebbe impaginando per mezzo di tabelle con i programmi del tipo WYSIWYG

• Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura della pagina, è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche

• Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale

PRIMA PARTE: XHTML

STRUTTURA DI UN FOGLIO DI STILE

• Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato

• Di seguito è rappresentata la struttura di una regola:

PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE

h1 { font-size : 2em;font-weight : bold;

} DICHIARAZIONE

PROPRIETÀSELETTORE

VALORE

REGOLA

La sintassi di base dei CSS

selettore{ proprietà: valore; proprietà: valore; proprietà: valore; }

Diciamo che vogliamo ad esempio un colore rosso come sfondo della pagina web:con i CSS si ottiene così:body {

background-color: #FF0000;}

• Attraverso i selettori vengono associate le regole agli elementi del documento HTML (o XML). • Selettore fa match con gli elementi E

BODY { font-family: Arial; font-size: 12 pt; }H1 { font-size: 18 pt; }P { font-size: 10 pt; }

Tutti i selettori e proprietà

http://www.w3schools.com/css/css_examples.asp

LE REGOLE• Una regola è costituita da:

1. uno o più selettori (separati da una virgola ‘,’) a cui associare un insieme di dichiarazioni racchiuse fra parentesi graffe ‘{ }’

2. le varie di dichiarazioni sono separate da un punto e virgola ‘;’

3. ogni dichiarazione è costituita da due elementi separati dai due punti ‘:’:1. la proprietà2. il valore (o l’insieme di valori) assegnato alla

proprietà

PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE

I SELETTORI• I selettori indicano al browser quali elementi

della pagina si dovranno applicare le dichiarazioni della regola

• I selettori possono essere essenzialmente di tre tipi:

PRIMA PARTE: I SELETTORI

h1, h2, p { ... }#identificatore { ... }.classe { ... }

1: TAG XHTML 3: IDENTIFICATORI

2: CLASSI

TIPI DI SELETTORI• I selettori più generici sono i selettori di

tipo i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato. Ad esempio, sono selettori di tipo:

p {…}a {…}div {…}strong {…}* {…}


LE CLASSI• Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per

associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class:<div class="notizia"><h1>Titolo</h1><p>Testo …</p></div><div class="notizia altraClasse"><h1>Titolo</h1><p>Testo …</p></div>

• Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto ‘.’.notizia {…}

• È possibile combinare fra loro più classi: <div class="classe1 classe2">…</div>.classe1.classe2 {…}

• Il selettore può anche specificare a quale elemento la classe deve essere associata:p.classe {…}h1.classe {…}


IDENTIFICATORI• Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della

pagina. L’associazione avviene tramite l’attributo id:<div id="testata"><h1>Titolo</h1><p>Testo ...</p></div>

ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina.

• Il selettore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘#’#testata {…}

• Il selettore può anche specificare a quale elemento l’identificatore deve essere associato:p#testata {…}h1#testata {…}

• Classi e identificatori possono essere usati contemporaneamente:<div id="idval" class="classval">#idval.classval {…}


COLLEGARE I CSS A UN DOCUMENTO XHTML

• Esistono diversi modi di collegare un foglio di stile ad un documento XHTML– Fogli di stile incorporati– Fogli di stile esterni– Fogli di stile importati– Attributo style:<p style="font-weight:bold">

• La priorità della regola è massima, indipendentemente dal peso dei selettori

• Questo metodo è sconsigliabile

PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

FOGLI DI STILE INCORPORATI

• Si specificano gli stili direttamente nel codice XHTML attraverso il tag <style> da inserire nel tag <head>:<head><style type="text/css">/*<![CDATA[*/…/*]]>*/</style>

</head>• Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a

rispettare le regole dell’XML• Questo metodo è adatto per pagine singole in cui è

necessario specificare stili particolari


FOGLI DI STILE ESTERNI• I fogli di stile esterni sono richiamati attraverso il tag <link> da inserire nel tag <head>:

<head><link rel="stylesheet" href="file.css" type="text/css" /></head>

• Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente


FOGLI DI STILE IMPORTATI• Attraverso la regola @import è possibile includere un

foglio di stile esterno all’interno di un insieme di regole• Se presenti, le regole @import devono essere inserite

prima delle normali regole per gli stili:@import "file1.css";@import "file2.css";body {…}

• Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import

• Le regole @import possono comparire anche negli stili incorporati


LUNGHEZZE• Unità di misura relative (stadard di fatto, le piu usate)

– em: pari alla dimensione dei caratteri – ex: pari alla dimensione del carattere ‘x’ (rara)– px: pixel, la loro dimensione dipende dallo schermo

• Unità di misura assolute:– in: pollici (1in = 2.54 cm) – cm– mm– pt: punti (nei CSS 2, 1pt = 1/72in) – pc: picas (1pc = 12pt)

• Le unità di misura relative non possono essere ricondotte direttamente ai metri senza considerare altri fattori, come ad esempio dimensione e risoluzione dello schermo

PRIMA PARTE: I VALORI

COLORI• Nomi predefiniti: black, green, navy• Valori RGB

– #rrggbb (r,g,b = {0 ÷ F})– #rgb (r,g,b = {0 ÷ F}) corrisponde a #rrggbb– rgb(r,g,b) (r,g,b = {0 ÷ 255}) – rgb(r%,g%,b%) (r,g,b = {0.0 ÷ 100.0})

• Per esempio, i valori aqua, #00FFFF, #0FF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua.

PRIMA PARTE: I VALORI

COLORE IN PRIMO PIANO (TESTO E BORDI)

• Il colore del testo e dei bordi è definito tramite la proprietà color

• Il valore predefinito è quello ereditato dal testo del blocco padre

• Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, e non è necessariamente nero

PRIMA PARTE: COLORI E SFONDI

SFONDI• Lo sfondo può essere

– Trasparente– Caratterizzato da una tinta piatta– Riempito del tutto o in parte da una immagine

• Lo sfondo può essere gestito attraverso le seguenti proprietà:– background-color– background-image– background-repeat– background-position– background-attachment– background (riassume le diverse proprietà)


COLORE DELLO SFONDO• La proprietà background-color può assumere i

seguenti valori:– transparent– <colore> Il valore predefinito è transparent

• A differenza di color, il valore per la proprietà background-color non è ereditato

• Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco


COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE

• Le proprietà color e background-color dovrebbero essere sempre specificate in coppia per evitare conflitti con le impostazioni predefinite

• In figura si vede il risultato ottenuto con una impostazione di Windows a contrasto elevato quando il testo è impostato sul blu (#009) ma lo sfondo non è esplicitamente impostato


BACKGROUND-IMAGE• Per inserire un’immagine di sfondo è

sufficiente specificarne l’url tramite la proprietà background-image:background-image:url(/im/sfondo.png);

• L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente

• L’immagine scorrerà assieme al testo• Per specificare che non dovrà essere usata

nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none;


BACKGROUND-REPEAT• Tramite background-repeat è possibile

stabilire se e come l’immagine sarà ripetuta• background-repeat:repeat indica che

l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito)

• background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente

• background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente

• background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine


BACKGROUND-ATTACHEMENT

• Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina

• background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito)

• background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body>)


BACKGROUND-POSITION• Tramite background-position è possibile stabilire la

posizione iniziale dell’immagine.• I valori ammessi sono:

– Unità di lunghezza– Unità percentuali– Parole chiave:

• left | center | right per il posizionamento orizzontale

• top | center | bottom per il posizionamento verticale

• I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale


BACKGROUND-POSITION• Quando sono usate le unità di lunghezza, l’angolo

superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding

• Quando sono utilizzate le unità percentuali si ha il seguente comportamento:– Sia X% il valore percentuale per la posizione

orizzontale– Sia Y% il valore percentuale per la posizione verticale– Il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell’area del padding


BACKGROUND• La proprietà background permette

di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente

• Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti:

body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; }


informazione e presentazione

Documents