INTRODUZIONE AI CSS

INTRODUZIONE AI CSS

GIANLUCA TROIANIDiapositiva 1

INTRODUZIONE AI CSS

COSA SONO E COME FUNZIONANO I CSS

Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.Based on a work at www.constile.org.Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.

INTRODUZIONE AI CSS


PRIMA PARTE

INTRODUZIONE

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


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.


INTRODUZIONE AI CSS


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.


INTRODUZIONE AI CSS


PRIMA PARTE

XHTML

INTRODUZIONE AI CSS


STRUTTURA E CONTENUTI: L’XHTML

• Il linguaggio di marcatura più adatto all’uso dei CSS è l’XHTML

• L’XHTML è una riformulazione del classico HTML in XML

• L’XHTML è totalmente compatibile con l’HTML, ma è riscritto in modo da essere conforme all’XML

• Il principale vantaggio dell’XHTML è la rigidità formale richiesta dal linguaggio e la possibilità di effettuare test automatici per la verifica della correttezza formale

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS


DALL’HTML ALL’XHTML

• Il documento deve essere ben formato:– Tutti gli elementi devono avere un tag di chiusura,

ovvero (se vuoti) il tag iniziale deve finire con la stringa ‘ />’ (spazio compreso).

– I vari tag devono essere annidati in modo corretto.

Errato:<p>Paragrafo<p>Paragrafo

<hr> <br>

<p><em>enfasi</p></em>

Corretto:<p>Paragrafo</p><p>Paragrafo</p>

<hr /> <br />

<p><em>Enfasi</em></p>

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS



• Gli elementi e gli attributi devono essere scritti con caratteri minuscoli

• I valori degli attributi devono sempre essere scritti fra apici o doppi apici

PRIMA PARTE: XHTML

Errato:<P LANG="en">Paragraph</P>

<a href=http://w3.org/>

Corretto:<p lang="en">Paragraph</p>

<a href="http://w3.org/">oppure<a href='http://w3.org/'>

INTRODUZIONE AI CSS



• Maggiori informazioni:

– http://www.w3.org/TR/xhtml1/#diffs

– http://www.webaccessibile.org/argomenti/argomento.asp?cat=519

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS


UNA STRUTTURA PER I CONTENUTI

• Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi

• Per raggruppare elementi da trattare come un oggetto unico, l’elemento chiave è il tag <div>

• Il tag <div> è un contenitore generico.

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS



<body><ul>

<li><a …>Articles</a></li><li><a …>Topics</a></li><li><a…>About</a></li><li><a …>Contact</a></li><li><a …>Contribute</a></li><li><a …>Feed</a></li></ul><h1><a …><img … /></a></h1>

<div>

<a …>No. <em>200</em></a>

</div>

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS



• Il titolo/logo del sito è realizzato tramite il tag <h1>

• Il menù di navigazione è realizzato tramite una lista non ordinata <ul>

PRIMA PARTE: XHTML

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


PRIMA PARTE

STRUTTURA DI UN FOGLIO DI STILE

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


PRIMA PARTE

I SELETTORI

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


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 {…}* {…}


INTRODUZIONE AI CSS


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 {…}


INTRODUZIONE AI CSS


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 {…}


INTRODUZIONE AI CSS


PSEUDO-CLASSI

• Le pseudo-classi creano delle distinzioni nei diversi stati di uno stesso elemento. Ad esempio:p:first-child {…} identifica il primo paragrafo figlio di un qualsiasi elemento padre:

<div><p>paragrafo first-child</p><p>altro paragrafo</p>

</div>


INTRODUZIONE AI CSS


PSEUDO-CLASSI

• Le sole pseudo-classi supportate dai browser più diffusi sono:a:link {…}a:visited {…}a:hover {…}a:focus {…}a:active {…}

• L’ordine con cui sono scritte le precedenti regole è importante per il pieno supporto con i diversi browser.


INTRODUZIONE AI CSS


PSEUDO-ELEMENTI

• Gli pseudo-elementi selezionano una sotto parte di un dato elemento. Ad esempio:

p:first-letter {…}p:first-line {…}

identificano rispettivamente la prima lettera e la prima riga di un paragrafo

• Il supporto da parte dei browser più datati è scarso


INTRODUZIONE AI CSS


DISCENDENZA

• Il selettore di discendenza permette di individuare un elemento in base agli elementi suoi progenitori:<h1>Lorem <strong>ipsum</strong> mea sale</h1><p>Lorem <strong>ipsum</strong> mea sale</p>

• È possibile individuare i due differenti elementi indicando, oltre al tipo dell’elemento a cui si vuole applicare la regola, anche il tipo di uno o più elementi progenitori:h1 strong {…}p strong {…}


INTRODUZIONE AI CSS


DISCENDENZA

• È possibile indicare uno o più progenitori:

#nomeId ul li.nomeClasse a {…}

• È possibile indicare un elemento progenitore di qualsiasi grado, non solo l’elemento padre:

<ul><li><a>Lorem ipsum</a></li></ul>ul a {…}


INTRODUZIONE AI CSS


SELETTORE FIGLIO

• Il selettore figlio specifica una parentela diretta (padre-figlio) tra due elementi.

• Il selettore che rappresenta il padre e il selettore che rappresenta il figlio sono separati dal carattere ‘>’.div > p {…}div p {…}

• La prima regola si applica a tutti i paragrafi che sono direttamente contenuti in un elemento <div>, mentre la seconda regola si applica a tutti i paragrafi contenuti in un elemento <div>, indipendentemente dal grado di discendenza.

• Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows e Mac.


INTRODUZIONE AI CSS


SELETTORE FRATELLO

• Il selettore fratello specifica la fratellanza di due oggetti.• È infatti individuare un elemento in base al fratello

immediatamente precedente:<h1>Lorem ipsum</h1><p>Atqui numquam singulis his …</p><p>Stet invenire nam no. Quando …</p><p>Sint oblique maluisset duo ut. …</p>

• È possibile individuare il primo paragrafo, inserito subito dopo l’elemento h1, indicando i due elementi separati dal carattere ‘+’:h1 + p {…}

• Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows.


INTRODUZIONE AI CSS


SELETTORI DI ATTRIBUTO

• Il selettore di attributi permette di individuare un elemento in base ad un qualsiasi suo attributo:

• elm[att] verifica semplicemente se l’attributo att dell’elemento elm è stato impostato, il valore assunto dall’attributo stesso non è rilevante;

• elm[att=val] verifica se l’attributo att dell’elemento elm assume esattamente il valore val;

• elm[att~=val] verifica se l’attributo att dell’elemento elm assume come valore una serie di parole separate da spazi, una delle quali è esattamente val;

• elm[att|=val] verifica se l’attributo att dell’elemento elm assume come valore una lista di parole separate da un trattino, la prima delle quali è esattamente val (utile per i codici di lingua, che hanno la forma en-en, en-us, eccetera).


INTRODUZIONE AI CSS



• Esempio– a[accesskey] {…}– a[rel=glossary] {…}– a[title~=esempio] {…}– a[hreflang|=en] {…}

• I precedenti selettori possono corrispondere, rispettivamente, ai seguenti oggetti XHTML:– <a accesskey="0" …>…</a> oppure <a accesskey="k" …>…</a>

– <a rel="glossary" …>…</a>– <a title="titolo di esempio" …>…</a>– <a rel="en" …>…</a> oppure<a rel="en-en" …>…</a> ovvero <a rel="en-us" …>…</a>


INTRODUZIONE AI CSS



• Si noti che classi e selettori di tipo ID sono un caso particolare di selettore di attributo.

• Il selettore *[class~=nomeClasse] corrisponde al selettore .nomeClasse;

• Il selettore *[id=identificatore] corrisponde al selettore #identificatore.

• I selettori di attributo sarebbero molto utili, soprattutto per distinguere i diversi tipi di campi input (type="text", type="radio", type="submit", …).

• I selettori di attributo non sono compatibili con Internet Explorer versione 6 e precedenti.


INTRODUZIONE AI CSS


RAGGRUPPAMENTO DI SELETTORI

• Spesso può essere utile associare una regola a più selettori contemporaneamente.

• Per fare ciò è possibile utilizzare un insieme di selettori separati da una virgola, come indicato nel seguente blocco di codice:h1, #id, div p.classe {…}

• Più selettori separati da uno spazio costituiscono un selettore che indica un rapporto di discendenza, mentre più selettori separati da una virgola hanno un regola in comune


INTRODUZIONE AI CSS


SPECIFICITÀ DEI SELETTORI


• Due o più regole, anche con selettori differenti, possono riferirsi allo stesso oggetto, quando ciò accade le due o più regole si applicano contemporaneamente.

• Tuttavia alcune dichiarazioni possono essere in conflitto, motivo per cui esistono delle norme per calcolare la priorità delle regole.

• Una regola assume maggiore priorità quanto più elevata è la specificità del suo selettore.

• La specificità di un selettore si basa sul numero e sul tipo di selettori di base che costituiscono il selettore.

INTRODUZIONE AI CSS




• La specificità del selettore è rappresentata da un numero a tre cifre ABC così determinato:

• A = numero di attributi id presenti nel selettore della regola (numero di selettori di tipo ID);

• B = numero degli attributi differenti da id (essenzialmente le classi) e di pseudo classi presenti nel selettore della regola;

• C = numero di selettori di tipo e di pseudo-elementi presenti nel selettore della regola.

INTRODUZIONE AI CSS




Selettore Pesi Specificità* {…} A=0 B=0 C=0 0li {…} A=0 B=0 C=1 1li:first-line {…} A=0 B=0 C=2 2ul li {…} A=0 B=0 C=2 2ul ol+li {…} A=0 B=0 C=3 3h1 + *[rel=up]{…} A=0 B=1 C=1 11ul ol li.red {…} A=0 B=1 C=3 13li.elm.level {…} A=0 B=2 C=1 21#xyz {…} A=1 B=0 C=0 100

INTRODUZIONE AI CSS


PRIMA PARTE

COLLEGARE I CSS A UN DOCUMENTO XHTML

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


PRIMA PARTE

I VALORI

INTRODUZIONE AI CSS


PAROLE CHIAVE: INHERIT

• Parola chiave inherit: il valore da assegnare alla proprietà deve essere ereditato da un elemento progenitore per il quale la proprietà è stata specificata.

• Alcune proprietà assumono automaticamente il valore inherit e la loro definizione è implicitamente derivata dal più prossimo elemento progenitore per il quale la proprietà è stata

PRIMA PARTE: I VALORI

INTRODUZIONE AI CSS


PAROLE CHIAVE: AUTO

• La parola chiave auto: indica esplicitamente che il programma utente dovrà utilizzare il valore predefinito previsto per quella specifica proprietà a cui il valore auto è stato assegnato.

• In alcuni casi, i diversi programmi utente possono avere valori predefiniti differenti per determinate proprietà.

• Il valore predefinito di una proprietà dipende anche dall’oggetto a cui la proprietà è applicata.

• Tuttavia tale valore è utile per sovra scrivere impostazioni di un’altra regola il cui selettore si riferisce al medesimo elemento, ovvero per sovra scrivere valori ereditati


INTRODUZIONE AI CSS


PAROLE CHIAVE: DIMENSIONE CARATTERI


• Dimensioni assolute– indicano una dimensione di carattere

predefinita, la quale varia in base al tipo e alle impostazioni dei diversi programmi utente.

– I possibili valori sono: xx-small, x-small, small, medium, large, x-large, xx-large.

• Dimensioni relative– Hanno come riferimento la dimensione dei

caratteri dell’elemento padre.– I possibili valori sono: larger e smaller.

INTRODUZIONE AI CSS


LUNGHEZZE

• Unità di misura relative– 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


INTRODUZIONE AI CSS


LE PERCENTUALI


• Le percentuali sono costituite da un numero (non necessariamente intero) positivo, negativo o nullo, seguito immediatamente, senza alcuno spazio, dal simbolo ‘%’.

• Le percentuali dipendono, ovviamente, da un valore di riferimento che può variare in base alla proprietà a cui si vuole assegnare il valore

• L’oggetto di riferimento può essere lo stesso oggetto stesso puntato dal selettore, ovvero l’oggetto padre.

INTRODUZIONE AI CSS


RIFERIMENTI

• url("http://sito/file")• url(http://sito/file) • url("/file")• url(/file)• url("../file") *• url(../file) *

* il percorso si riferisce alla cartella in cui è collocato il foglio di stile e non alla cartella in cui è collocata la pagina HTML


INTRODUZIONE AI CSS


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.


INTRODUZIONE AI CSS


PRIMA PARTE

IL BOX MODEL

INTRODUZIONE AI CSS


IL BOX MODEL

Ogni box è caratterizzato da

1. Larghezza dello spazio per i contenuti (width)

2. Altezza dello spazio per i contenuti (height)

3. Spazio fra contenuti e bordi (padding)

4. Bordo (border)

5. Spazio fra il bordo e gli altri oggetti della pagina (margin)

PRIMA PARTE: IL BOX MODEL

INTRODUZIONE AI CSS


IL BOX MODEL

<div>Ex nostrum … </div><div>Indoctum … </div>

body { margin: 0;padding: 0; }

div {width:300px;padding:10px;border:5px solid #600; margin: 20px;}

Si noti che i margini superiori e inferiori adiacenti collassano


INTRODUZIONE AI CSS


IL BOX MODEL

• Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti

• La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width.


INTRODUZIONE AI CSS


LARGHEZZA E ALTEZZA

• Se non si specifica la larghezza (width) dei contenuti del box, questo si allargherà (margini compresi) per riempire tutto lo spazio a sua disposizione

• Se non si specifica la altezza (height) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno

• La larghezza e la altezza del box possono essere espresse:– In percentuali rispetto alle dimensioni del box

contenitore– Tramite le unità di miusra em, px, (ex, pt, mm)– Tramite il valore auto


INTRODUZIONE AI CSS


LARGHEZZA E ALTEZZA

• Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti– Internet Explorer per Windows in realtà allarga il box quando i suoi

contenuti (ad esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box

• È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max-width, ma Internet Explorer (Win/Mac) non supporta tali proprietà


INTRODUZIONE AI CSS


LARGHEZZA E ALTEZZA

• Quando si specifica l’altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio

• Per ottenere un simile comportamento esiste infatti la proprietà min-height, ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height

• A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height

• Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height


INTRODUZIONE AI CSS


I MARGINI

• I margini possono essere specificati:– Individualmente– A coppie (top/bottom, right/left)– Globalmente

• Le unità di misura sono le stesse utilizzate per width e height ed hanno il medesimo comportamento, tranne auto

• Per specificare i singoli margini è possibile utilizzare le proprietà margin-top, margin-right, margin-bottom, margin-leftEsempio:div { margin-left:1em; margin-top:2em }


INTRODUZIONE AI CSS


I MARGINI

• I quattro margini possono essere specificati anche attraverso la sintassi abbreviata:

div { margin : 10px 5px 0 20px }

I margini risultano specificati in senso orario: top, right, bottom, left.

• Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top/bottom e right/left:

#id { margin : 1em 2em }

• Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente:

.classe { margin: 1em }


INTRODUZIONE AI CSS


I MARGINI

• Quando impostati sul valore auto, i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati

• Purtroppo Internet Explorer non supporta questo tipo di centratura orizzontale, per cui richiede una tecnica differente

• Quando impostati sul valore auto, i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente

• Nelle specifiche CSS non è prevista la centratura verticale dei blocchi


INTRODUZIONE AI CSS


I MARGINI

Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine:<div id="box-1">…</div><div id="box-2">…</div>#box-1 { margin: 1em }#box-2 { margin: 2em }


INTRODUZIONE AI CSS


I MARGINI

I margini non collassano quando sono separati da un bordo o dal padding:

<p>Lorem ipsum dolor …</p><div><p>Quisque imperdiet …</p></div>

div{border:solid;margin:0;}p{margin:1em 0;background:#CCC;color:#000;}div p{margin:1em;}


I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

INTRODUZIONE AI CSS


IL PADDING

• Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box

• Per specificare il padding si utilizza la stessa sintassi usata per i margini

p {padding-left:0.5em; padding-right:0.5em}div { padding: 10px 20px 10px 20px }.classe { padding: 0.5em 0 }#id { padding: 5% }

• A differenza di margin, padding non ammette il valore auto e non ammette valori negativi

• Il padding di box adiacenti non collassa in nessun caso


INTRODUZIONE AI CSS


I BORDI

• I bordi sono caratterizzati da tre aspetti:1. stile2. spessore3. colore

• Questi aspetti possono essere definiti separatamente con:– border-style (border-top-style, …)– border-width (border-top-width, …)– border-color (border-top-color, …)

• Sono ammesse le dichiarazioni compatte per i quattro lati(border-style: <stile> <stile> <stile> <stile>)

• Per definire contemporaneamente i tre aspetti si usa la seguente sintassi:border-top: <spessore> <stile> <colore>border: <spessore> <stile> <colore>


INTRODUZIONE AI CSS


I BORDI

Gli stili a disposizione sono :• solid (linea continua singola);• dotted (punteggiato);• dashed (tratteggiato);• double (doppia linea continua – è necessario

uno spessore di almeno 3px per ottenere l’effetto desiderato);

• groove (scavato);• ridge (effetto opposto a groove, il bordo

appare sbalzato);• inset (incastonato, l’effetto grafico equivale a

un pulsante premuto);• outset (effetto opposto a inset, l’effetto

grafico equivale a un pulsante non ancora premuto).

• none (nessun bordo, valore predefinito);


INTRODUZIONE AI CSS


I BORDI

• Lo stile predefinito è none, dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato

• Lo spessore del bordo può essere espresso attraverso le varie unità di lunghezza o attraverso i tre valori thin, medium, thick, le unità percentuali non sono ammesse

• Il colore, se non specificato, corrisponde a quello del testo usato nel box

• IE/Win non supporta bordi punteggiati da 1px


INTRODUZIONE AI CSS


OVERFLOW

• Come detto, è possibile specificare la larghezza e l’altezza di un box

• Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow.

• La proprietà overflow può assumere i seguenti valori:– visible (valore predefinito)– hidden– scroll– auto


INTRODUZIONE AI CSS


OVERFLOW: VISIBLE

• Il valore visible indica che i contenuti vanno mostrati normalmente.

• I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore

• Internet Explorer per Windows espande il contenitore fino alla dimensione richiesta dai contenuti

div {width:200px;height:200px;overflow:visible;}


INTRODUZIONE AI CSS


OVERFLOW: HIDDEN

• Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento

div {

width:200px;height:200px;

overflow:hidden;

}


INTRODUZIONE AI CSS


OVERFLOW: SCROLL E AUTO

• Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono comunque apparire.

• Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono apparire dove necessario.

• La dimensione del contenitore non è alterata


INTRODUZIONE AI CSS


PRIMA PARTE

IL VISUAL FORMATTING MODEL

INTRODUZIONE AI CSS


IL VISUAL FORMATTING MODEL

• È, assieme al box model, uno degli elementi fondamentali per la realizzazione di impaginazioni complesse

• Tratta essenzialmente del comportamento di un box in relazione agli altri box della pagina

• Definisce il posizionamento dei diversi box all’interno della pagina

PRIMA PARTE: IL VISUAL FORMATTING MODEL

INTRODUZIONE AI CSS


TIPI DI BOX

• Ci sono essenzialmente tre tipi di box:

1. i box a livello di blocco

2. i box in linea

3.gli elementi di lista• Altri tipi di box sono scarsamente supportati• Ogni elemento appartiene ad uno dei tre tipi di box:

– Box a livello di blocco: <p>, <h1>, <div>, box anonimi– Box in linea: <em>, <a>, <span>, box anonimi– Elementi di lista: <li>


INTRODUZIONE AI CSS


TIPI DI BOX

• Il tipo di box può essere alterato attraverso la proprietà display la quale può assumere i seguenti valori:– block– inline– list-item– none: elimina il box dalla visualizzazione

• In realtà esistono numerosi altri valori possibili, ma sono tutti scarsamente supportati dai diversi browser


INTRODUZIONE AI CSS


BOX ANONIMI

• Ogni elemento della pagina, anche se non marcato, appartiene ad un tipo di box

• Si consideri il seguente esempio<div>i box anonimi non hanno dei marcatori propri.<p>Essi sono <em>generati</em> dai box loro contenitori.</p></div>

• La frase “i box anonimi non hanno dei marcatori propri.” normalmente sarebbe un box in linea, ma a causa della presenza del box a livello di blocco generato da <p>, essa diventa un blocco anonimo.

• Analogamente, “Essi sono ” e “dai box loro contenitori.” diventano dei box in linea anonimi.


INTRODUZIONE AI CSS


IL FLUSSO

• I diversi box sono inseriti nel così detto “flusso”

• I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito all’altro in verticale, distanziandosi in base ai margini

• I box in linea (compresi i box anonimi) si dispongono orizzontalmente uno di seguito all’altro, su una o più linee a seconda dello spazio. La loro spaziatura orizzontale è determinata anche da margini, bordi e padding.La spaziatura verticale è determinata solo dall’interlinea (line-height)


p { border:1px solid #00C; }em{ margin:2em;border:1px solid #C00 }strong {border:1px solid #0C0;padding:0.7em;}

INTRODUZIONE AI CSS


IL FLUSSO

• Nella regolazione del flusso di elementi in linea assume importanza la proprietà vertical-align

• Questa proprietà assume significato:– Per le celle di una tabella– Per gli elementi in linea

• Negli elementi in linea, vertical-align definisce l’allineamento verticale di un elemento in linea, all’interno di un’altra linea di altezza superiore

• La proprietà vertical-align non definisce l’allineamento verticale del testo all’interno di box a livello di blocco


p#lh{ line-height:2em; }strong{ line-height:1em;vertical-align:top;}p#va { /* uso errato */height:5em;vertical-align:bottom;}

INTRODUZIONE AI CSS


POSIZIONAMENTO RELATIVO

• Il posizionamento relativo altera il normale flusso dei box a livello di blocco

• Attraverso la dichiarazione ‘position:relative’ è possibile definire un off-set per il posizionamento del blocco all’interno del flusso

• L’off-set non altera il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato

• L’off-set è assegnato tramite le proprietà: top, right, bottom, left.


p#pr {position:relative;left:1em;top:1.5em;}p { padding:0.5em;margin:1em }

INTRODUZIONE AI CSS


POSIZIONAMENTO ASSOLUTO

• Attraverso la dichiarazione position:absolute è possibile posizionare il box in un punto esatto della pagina indipendentemente dal flusso

• Un blocco posizionato in modo assoluto è del tutto estratto dal flusso e non ha alcuna influenza sulla posizione degli altri blocchi

• La posizione è stabilita attraverso le proprietà: top, right, bottom, left a partire da un determinato punto di riferimento iniziale

• Il valore di top indica la distanza tra il limite superiore del blocco posizionato e il limite superiore del padding del box di riferimento; lo stesso vale per le altre proprietà right, bottom e left.

• Il box di riferimento è il primo blocco progenitore posizionato in modo non assoluto o relativo, oppure l’elemento <html>


INTRODUZIONE AI CSS


POSIZIONAMENTO ASSOLUTO

• Un blocco posizionato in modo assoluto, se non si specifica un valore per la proprietà width, assume la dimensione necessaria a contenere gli elementi al suo interno

• Un box in linea posizionato in modo assoluto diviene un box a livello di blocco

<p>(1) …</p><p id="pa">(2) …</p><p>(3) …</p>

p#pa {position:absolute;right:5px; bottom:5px;margin:0;}p { margin:1em 10px; }


INTRODUZIONE AI CSS


BOX FLOTTANTI

• Un box flottante è posizionato all’interno del flusso in modo che i contenuti dei box successivi si dispongano attorno al box

• Un box flottante posiziona lungo il lato sinistro ovvero lungo il lato destro del box che lo contiene


INTRODUZIONE AI CSS


BOX FLOTTANTI

• Attraverso la proprietà float è possibile assegnare verso quale lato il box deve disporsiLa proprietà float può assumere tre valori: left, right, none

• Un box flottante, se non si specifica un valore per la proprietà width, assume la dimensione necessaria a contenere gli elementi al suo interno


INTRODUZIONE AI CSS


BOX FLOTTANTI

<p>(1) …</p><p id="fl">(2) …</p><p>(3) …</p><p id="fr">(4) …</p><p>(5) …</p><p>(6) …</p>

p#fl {float:left;width:200px;}p#fr {float:right;width:200px;}


INTRODUZIONE AI CSS


BOX FLOTTANTI

• I margini inferiore e superiore di un box flottante non collassano

• Il box flottante è eliminato dal normale flusso per cui non influenza la disposizione degli altri box, ma solo la disposizione dei contenuti


INTRODUZIONE AI CSS


BOX FLOTTANTI

• Blocchi flottanti consecutivi si dispongono uno di fianco all’altro

• Se lo spazio non è sufficiente a contenere i diversi blocchi, quelli in eccesso sono disposti al di sotto degli altri


INTRODUZIONE AI CSS


BOX FLOTTANTI

Per interrompere l’effetto della proprietà float e ripristinare il normale flusso si usa la proprietà ‘clear’, che può assumere i valori: left, right, both, none

p#fl { float:left;width:200px;}p#cl { clear: left }


INTRODUZIONE AI CSS


IL VISUAL FORMATTING MODEL: BOX FLOTTANTI

• Come detto in precedenza, i box flottanti non influenzano il normale flusso dei blocchi

• Un box flottante contenuto in un blocco non dovrebbe dunque condizionare in nessun modo l’altezza del blocco contenitore

• Nell’esempio, il blocco contenitore (un <div>) ha una dimensione verticale determinata esclusivamente dal padding assegnato.


p#fl { float:left; width:200px;}div { padding: 1em }

INTRODUZIONE AI CSS


BOX FLOTTANTI

Internet Explorer per Windows ha un comportamento particolare ed errato: qualora la dimensione del blocco contenitore fosse assegnata, il blocco flottante contenuto ne influenzerebbe la dimensione

p.fl {float:left;width:200px;}div {padding:1em;width:90%;} <div><p class="fl">Atqui …</p></div><p>Si noti …</p>

Questo comportamento induce spesso in errore chi non conosce il corretto comportamento dei blocchi flottanti.


INTRODUZIONE AI CSS


BOX FLOTTANTI

Tuttavia, se anche il blocco contenitore è flottante, allora i blocchi flottanti contenuti ne influenzano l’altezza:

p.fl {

float:left; width:200px;

}

div {

padding:1em; float:left;

}


INTRODUZIONE AI CSS


IL VISUAL FORMATTING MODEL: BOX FLOTTANTI

Un altro metodo che può essere utilizzato per consentire ad un blocco flottante di influenzare l’altezza del suo contenitore è inserire un blocco successivo con assegnata opportunamente la proprietà clear:

p#fl {float:left;}p#cl {clear:left;}

In questo caso, sarà il blocco non flottante a determinare l’altezza del blocco contenitore


INTRODUZIONE AI CSS


BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER

WINDOWS• Internet Explorer per Windows presenta altri

difetti relativi ai box flottanti• In alcuni casi questi difetti possono essere

corretti attraverso delle regole da specificare solo* per Internet Explorer

* Come specificare delle regole particolari per Internet Explorer/Windows sarà illustrato nella seconda parte del seminario


INTRODUZIONE AI CSS



WINDOWS• Internet Explorer raddoppia il

margine laterale corrispondente a quello specificato per la proprietà float

• La soluzione consiste nell’aggiungere la dichiarazione display:inline alla regola per l’elemento flottante.

• Questa dichiarazione non ha alcuna influenza negli altri browser, dato che un box flottante è comunque un box a livello di blocco


INTRODUZIONE AI CSS



WINDOWS• Un secondo baco molto frequente è

noto col nome di peek-a-boo bug (letteralmente baco del nascondino).

• Il baco coinvolge solo la versione 6 di Internet Explorer per Windows ed ha come conseguenza la scomparsa del testo che affianca il box flottante.

• Tale testo ricompare (del tutto o in parte) selezionandolo col mouse, attivando la modalità di visualizzazione a tutto schermo, ridimensionando i caratteri.


INTRODUZIONE AI CSS



WINDOWS• Questo baco si presenta generalmente quando

un box, con sfondo assegnato e altezza e larghezza non assegnate, contiene un box flottante, del testo che si dispone attorno a tale box senza superarlo in altezza e un box con assegnata la proprietà clear.

• La soluzione consiste nello specificare l’interlinea per uno dei blocchi progenitori (<body> compreso) tramite la proprietà line-height.Ad esempio:body { line-height : 1.2em }


INTRODUZIONE AI CSS



WINDOWS• Quando un blocco che segue un

box flottante ha una dimensione assegnata (altezza o larghezza), anziché posizionarsi indipendentemente dal box flottante, si affianca a quest’ultimo

• Inoltre il browser aggiunge, in modo arbitrario, 3 pixel al margine laterale opposto a quello specificato per la proprietà float


INTRODUZIONE AI CSS



WINDOWS• Si abbia un box flottante: si

vuole affiancargli una seconda “colonna” semplicemente specificando il margine laterale del blocco successivo:

#fl {float:left;width:200px;}#box {margin:0 0 0 200px;}

• I 3 pixel aggiunti arbitrariamente da IE/Win visti in precedenza indenteranno i contenuti della seconda colonna per tutta l’altezza della prima

• Il difetto non si presenterebbe se anche il secondo blocco fosse flottante


INTRODUZIONE AI CSS



WINDOWSPer correggere il difetto bisogna (solo per IE/Win):

1. Specificare la larghezza o l’altezza della seconda colonna (vedi diapositiva 95)

2. Ridurre il margine destro della prima colonna di 3 pixel

3. Annullare il margine sinistro della seconda colonna

#fl {float:left;width:200px;margin:0 -3px 0 0;}#box {margin:0 0 0 0;height:0;}


INTRODUZIONE AI CSS


BOX FLOTTANTI E LISTE

• Le liste hanno delle indentazioni generate da margini e padding predefiniti e marcatori esterni agli elementi della lista

• Le liste possono assumere un comportamento inaspettato se poste di seguito ad un box flottante

• In figura è rappresentata una lista preceduta da un box flottante: in rosso è evidenziato il bordo della lista, in verde il bordo degli elementi della lista

• Internet Explorer e Mozilla hanno delle impostazioni differenti per ottenere le indentazioni (per le liste ordinate e non ordinate IE usa margine sinistro della lista, mentre Mozilla utilizza il padding sinistro della lista).


INTRODUZIONE AI CSS



• I marcatori di lista si dispongono dietro al box flottante

• Le indentazioni delle liste sono annullate

• Tutto questo è conseguenza del fatto che margini e padding con cui sono realizzate le indentazioni sono ininfluenti, poiché il testo delle liste si disporrà comunque di fianco al box flottante


INTRODUZIONE AI CSS



Per risolvere il problema occorre:• Uniformare le modalità di indentazione

dei diversi browser• Impostare i margini della lista in modo

tale che l’effetto del box flottante non annulli l’effetto dovuto a tali margini:

.fl { float:left;width:200px; }

ul, ol, dl {

margin-left:200px;

padding:0;

}

li{ margin-left:2em; }


INTRODUZIONE AI CSS


VISIBILITY

• La proprietà visibility permette di rendere invisibile un box

• A differenza di quanto accade con la dichiarazione display:none, il blocco continua ad influenzare il posizionamento degli altri elementi della pagina

• La proprietà visibility ammette due valori:– visible– hidden

Al paragrafo è stata assegnata la dichiarazione

visibility:hidden


INTRODUZIONE AI CSS


PRIMA PARTE

CONTENUTI GENERATI

INTRODUZIONE AI CSS


CONTENUTI GENERATI

• I CSS permettono un certo controllo sulla generazione automatica di contenuti.

• Si consideri il seguente esempio:

<p>Questo documento è scritto in <acronym lang="en" title="Extensible HyperText Markup Language">XHTML</acronym>. Sul sito del <a href="http://w3.org/" hreflang="en">W3C</a> troverai maggiori dettagli</p>

• Sarebbe utile se nella pagina si potessero esplicitare i valori di title e di hreflang direttamente nel testo subito dopo l’acronimo e il collegamento

PRIMA PARTE: CONTENUTI GENERATI

INTRODUZIONE AI CSS


CONTENUTI GENERATI

acronym[title]:after {

content: " ("attr(title)")";

font-style:italic; color:#900;

}

a[hreflang]:after {

content: " ["attr(hreflang)"]"; font-weight:bold;

}


INTRODUZIONE AI CSS


CONTENUTI GENERATI

• Putroppo Internet Explorer non è in grado di generare contenuti tramite CSS per cui questi ed altri meccanismi di generazione devono essere rimandati ad usi futuri

• Tuttavia è utile conoscere tale metodi che possono essere implementati già da adesso per i programmi utente che li supportano.

• I meccanismi di generazione sono molti e includono anche meccanismi di numerazione. Chi fosse interessato troverà maggiori dettagli al seguente indirizzo: http://www.w3.org/TR/CSS2/generate.html


INTRODUZIONE AI CSS


PRIMA PARTE

COLORI E SFONDI

INTRODUZIONE AI CSS


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

INTRODUZIONE AI CSS


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-attachment– background-position– background (riassume le diverse proprietà)


INTRODUZIONE AI CSS


COLORE DELLO SFONDO

• La proprietà background-color può assumere i seguenti valori:– transparent– <colore> (vedi diapositiva 49)

• 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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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;


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


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


INTRODUZIONE AI CSS


BACKGROUND-POSITION


background-position : 20% 25%;

INTRODUZIONE AI CSS


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; }


INTRODUZIONE AI CSS


PRIMA PARTE

CARATTERI E TESTO

INTRODUZIONE AI CSS


CARATTERI E TESTO

• Per i caratteri sono disponibili le seguenti proprietà:– font-family: specifica il tipo di carattere– font-size: specifica la dimensione del

carattere– font-style: per specificare il corsivo– font-weight: per specificare il grassetto– font-variant: per specificare il maiuscoletto– font: per specificare contemporaneamente le

precedenti proprietà

PRIMA PARTE: CARATTERI E TESTO

INTRODUZIONE AI CSS


FONT-FAMILY

• Attraverso font-family è possibile specificare diversi tipi di carattere:body {font-family:verdana,arial,sans-serif;}

• Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente

• È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono:– serif (ad esempio il Times)– sans-serif (ad esempio il Verdana)– monospace (ad esempio il Courier)


INTRODUZIONE AI CSS


FONT-SIZE

• Con font-size è possibile specificare la dimensione del carattere

• Possono essere utilizzate unità di lunghezza (sono consigliate quelle

relative ad eccezione dei pixel) e unità percentuali

– È sconsigliato l’uso dell’unità px poiché con Internet Explorer per

Windows il testo sarebbe non ridimensionabile

• Le unità relative e le percentuali si riferiscono alle dimensioni

dell’elemento padre

– Usare le unità percentuali corrisponde ad utilizzare le unità em

• Internet Explorer ha un baco che sconsiglia l’uso delle unità em per

body, poiché il ridimensionamento dei caratteri è eccessivo

• Possono inoltre essere utilizzati i valori

visti nella diapositiva 45 (xx-small … xx-large, larger e smaller)


INTRODUZIONE AI CSS


FONT-STILE, FONT-WEIGHT, FONT-VARIANT

• Tramite font-style è possibile formattare il testo in corsivo.– i valori ammessi sono: normal | italic

• Tramite font-weight è possibile formattare il testo in grassetto.– i valori ammessi sono: normal | bold– Sono ammessi altri valori ma sono scarsamente supportati dai

programmi utente

• Tramite font-variant è possibile formattare il testo in maiuscoletto.– i valori ammessi sono: normal | small-caps


INTRODUZIONE AI CSS


FONT

• Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente

• La sintassi ammessa è:font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>

• Non è necessario specificare tutte le proprietà• Perché la dichiarazione sia valida è necessario

specificare almeno <font-size> e <font-family>• Assieme alla dimensione del testo è possibile specificare

l’interlinea tramite <font-size>/<line-height> Esempio:

h1 { font : bold 2em/1.5em georgia, serif }


INTRODUZIONE AI CSS


ALLINEAMENTO DEL TESTO

• L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align– Valori ammessi: left | right | center | justify

• L’indentazione è stabilita tramite text-indent– Sono ammesse unità di lunghezza o unità

percentuali– Esempio:p { text-indent: 2em }


INTRODUZIONE AI CSS


DECORAZIONE DEL TESTO

• Il testo può essere decorato con sottolineature

(da usarsi essenzialmente con i link),

sopralineature (da evitare), testo barrato

(essenzialmente per il tag <del>)

• Eventuali decorazioni vanno specificate tramite la

proprietà text-decoration

• I valori ammessi sono:

none | underline | overline | line-

through


INTRODUZIONE AI CSS


SPAZIATURA FRA PAROLE E CARATTERI

• Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietàletter-spacing e word-spacing

• Sono ammesse tutte le diverse unità di lunghezza, tuttavia sono particolarmente indicate le unità em

• Il valore specificato può essere positivo o negativo• Il valore specificato non indica la distanza fra le varie

lettere o parole ma va a sommarsi alla distanza predefinita

Esempioh1{ letter-spacing:0.2em;word-spacing:0.5em }


INTRODUZIONE AI CSS


CARATTERI BIANCHI E INTERRUZIONI DI LINEA

• Due o più spazi bianchi nel codice sorgente generalmente vengono assorbiti in un unico spazio bianco

• Le interruzioni di linea nel codice sorgente sono generalmente interpretate come uno spazio bianco

• Generalmente il browser crea una nuova linea quando il testo non entra nello spazio orizzontale a disposizione

• Tutti questi comportamenti possono essere regolati tramite la proprietà whitespace


INTRODUZIONE AI CSS


CARATTERI BIANCHI E INTERRUZIONI DI LINEA

Sono ammessi i seguenti valori:• normal: comportamento predefinito• pre: spazi bianchi multipli non collassano in un

unico spazio bianco. Eventuali interruzioni di linea sono generate da interruzioni di linea nel codice oppure dal tag <br />

• nowrap: gli spazi bianchi collassano. Eventuali interruzioni di linea sono generate solo dal tag <br />, e non anche dall’eccessiva lunghezza del testo inserito in una singola linea.


INTRODUZIONE AI CSS


TRASFORMAZIONI DEL CARATTERE

• Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice

• Sono ammessi i seguenti valori:– capitalize: la prima lettera di ogni parola è

rappresentata in maiuscolo– uppercase: tutte le lettere di ogni parola sono

rappresentate in maiuscolo– lowercase: tutte le lettere di ogni parola sono

rappresentate in minuscolo – none: nessuna variazione

Esempio:h1 { font-variant: uppercase }h2 { font-variant: capitalize }


INTRODUZIONE AI CSS


PRIMA PARTE

FORMATTAZIONE DELLE TABELLE

INTRODUZIONE AI CSS


FORMATTAZIONE DELLE TABELLE

• Attraverso i CSS è possibile formattare efficacemente le tabelle

• I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà CSS:– cellpadding padding– cellspacing border-spacing– border border– width width

• È bene specificare la dimensione del testo per le tabelle (ad esempio table{font-size:1em}) poiché Internet Explorer tende a ignorare le impostazioni scelte per <body>

PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

INTRODUZIONE AI CSS


BORDER-COLLAPSE

• I bordi della tabella e delle singole celle sono specificati separatamente:

table { border:3px solid #900; }

td,th { border:1px solid #900; }• Automaticamente, il browser lascia dello

spazio fra i bordi delle singole celle• Per eliminare tale spazio si utilizza la

proprietà border-collapse• I valori ammessi sono:

collapse | separate• Quando i bordi sono separati, può

essere utile non mostrare le celle vuote:

table { empty-cells: hide; }


INTRODUZIONE AI CSS


RIGHE E COLONNE

• Specificando opportunamente i bordi è possibile ottenere una griglia solo orizzontale o solo verticale

• In tutti e due i casi è necessario impostare i bordi in modo che collassino

table {border-collapse: collapse;}• Griglia orizzontaletd,th {border:1px #900;border-style: solid none;}• Griglia verticaletd,th { border:1px solid #900; }td{ border-style: none solid; }


INTRODUZIONE AI CSS


INTESTAZIONE E RIGHE

• L’intestazione della tabella, identificabile tramite il tag <thead> può essere formattata indipendentemente dal resto della tabella:

thead {background:#ffc;color:#000;text-align:center;font-weight:bold;text-transform:uppercase;}• Attraverso le classi è possibile evidenziare

meglio le diverse righe alternandone il colore di sfondo

tr.d {background:#eee;color:#000}tr.p {background:#fff;color:#000}


<table summary="..."><thead><tr><th>…</th>…</tr></thead><tbody><tr class="d"><td>…</td>…</tr><tr class="p"><td>…</td>…</tr><tr class="d"><td>…</td>…</tr><tr class="p"><td>…</td>…</tr></tbody></table>

INTRODUZIONE AI CSS


SPAZIO FRA CELLE

• Lo spazio fra le celle può essere specificato attraverso la proprietà border-spacing

• La proprietà border-spacing ha effetto quando i bordi delle singole celle non collassano

• La proprietà border-spacing ammette come valori solo delle lunghezze:

table { border-spacing:20px; }

• La proprietà border-spacing non è supportata da Internet Explorer


INTRODUZIONE AI CSS


PRIMA PARTE

INTERFACCIA UTENTE

INTRODUZIONE AI CSS


INTERFACCIA UTENTE

• I CSS sono in grado di interagire con l’interfaccia utente

• È possibile specificare l’aspetto del puntatore del mouse

• È possibile utilizzare i colori e gli sfondi impostati dall’utente per il sistema operativo

• È possibile utilizzare i caratteri impostati dall’utente per il sistema operativo

PRIMA PARTE: INTERFACCIA UTENTE

INTRODUZIONE AI CSS


PUNTATORE

• L’aspetto del puntatore può essere gestito attraverso la proprietà cursor

• I possibili valori sono:auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help

• In genere è meglio evitare di modificare l’aspetto predefinito del puntatore

• Un esempio di uso della proprietà cursor è il seguente:

abbr { cursor : help }


INTRODUZIONE AI CSS


COLORI E SFONDI

• Alle proprietà color e background-color è possibile associare un valore preso direttamente dalle impostazioni del sistema operativo

• I possibili valori sono:ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

• Esempio:p { color: WindowText; background-color: Window }


INTRODUZIONE AI CSS


CARATTERI

• Abbiamo visto che la proprietà font è una scorciatoia per definire contemporaneamente diverse proprietà dei caratteri

• Attraverso font è altresì possibile specificare i caratteri usati dal sistema operativo

• I possibili valori sono:caption | icon | menu | message-box | small-caption | status-bar

• Quando si usano questi valori, si specificano contemporaneamente tutte le proprietà del carattere

• Esempio:p { font : menu }


INTRODUZIONE AI CSS


PRIMA PARTE

MEDIA ALTERNATIVI

INTRODUZIONE AI CSS


MEDIA ALTERNATIVI

• È possibile specificare un particolare foglio di stile per diversi media:– braille: dispositivi braille– embossed: stampanti braille– handheld: dispositivi palmari– print: stampanti– projection: proiettori– screen: monitor dei computer– speech (aural): browser vocali– tty: dispositivi a carattere fisso (teletypes)– tv: televisori e affini– all

• screen è ben supportato, i palmari che supportano handheld leggono anche screen, print è supportato con alcuni limiti.

• speech (aural) non è ben supportato

PRIMA PARTE: MEDIA ALTERNATIVI

INTRODUZIONE AI CSS


MEDIA ALTERNATIVI

• Per specificare il media a cui associare il foglio di stile è possibile utilizzare tre metodi:– La regola @import:

@import url(schermo.css) screen;@import url(stampante.css) print;

• Questo metodo non è supportato da Internet Explorer– La regola @media:

@media print {body { font:100% Arial, sans-serif }}@media screen {body { font:12pt Times, serif }}

– Tag <link /> nel codice XHTML:<link rel="stylesheet" type="text/css"

media="print" href="p.css" /><link rel="stylesheet" type="text/css"

media="screen" href="s.css" />

PRIMA PARTE: MEDIA ALTERNATIVI

INTRODUZIONE AI CSS


PRIMA PARTE

FINE PRIMA PARTE

INTRODUZIONE AI CSS


SECONDA PARTE

CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER

WINDOWS

INTRODUZIONE AI CSS


IL PROBLEMA

• Quando abbiamo visto il box model, si è accennato al fatto che Internet Explorer per Windows non segue esattamente le indicazioni del W3C

• IE5.x aggiunge padding e bordi sottraendoli allo spazio specificato dalla proprietà width

SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

INTRODUZIONE AI CSS


LE SOLUZIONI

Per ovviare al problema ci sono essenzialmente due metodi1. Si evita di specificare contemporaneamente le proprietà width e

padding e/o border: Dove possibile si cerca di sfruttare due box contenuti uno nell’altro (ad esempio un <div> e i paragrafi al suo interno)

2. Si specifica separatamente il valore di width per IE/Win 5.x e per gli altri browser, ad esempio attraverso i Commenti condizionali*:

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

*Rif: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

INTRODUZIONE AI CSS


SECONDA PARTE

LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

INTRODUZIONE AI CSS


STRUTTURA DELLA PAGINA

• Sfruttando il comportamento dei box flottanti che si dispongono uno di fianco all’altro fin che c’è spazio a disposizione è possibile realizzare layout a colonne

• La pagina ha la seguente struttura:<body><div id="pagina">

<div id="testa">…</div><div id="c1">…</div><div id="c2">…</div><div id="c3">…</div><div id="piede">…</div>

</div></body>

SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

INTRODUZIONE AI CSS


LE TRE COLONNE

Le istruzioni CSS essenziali sono:#pagina{ width:700px; }#c1{ float:left; width:200px; }#c2{float:left; width:300px; }#c3{ float:left; width:200px; }#piede{ clear:both; width:100%;}


width:100% corregge un baco di Internet Explorer

INTRODUZIONE AI CSS


SFONDO DELLE COLONNE

• Le tre colonne terminano là dove terminano i loro contenuti e non c’è modo per imporre che le tre colonne si sviluppino in altezza fino al piè di pagina

#c1 { background: #99C; }

#c2 { background: #FFC; }

#c3 { background: #CC9; }


INTRODUZIONE AI CSS



• È possibile superare il problema impostando un’immagine di sfondo per #pagina tale che, se ripetuta verticalmente, disegni le tre colonne:

#pagina{ background:#FFF url(3COLFIX.gif) 0 0 repeat-y;}


INTRODUZIONE AI CSS



• È ora necessario impostare lo sfondo per l’intestazione e il piè di pagina:

#piede{background:#CCC}#testa{background:#CCC}


INTRODUZIONE AI CSS


SPAZIO FRA LE COLONNE

• Per distanziare il testo dalle colonne non occorre impostare il padding delle colonne stesse, con conseguenti problemi di interpretazione del box model

• La distanza sarà ottenuta impostando il padding dei paragrafi contenuti nelle colonne stesse:

#c1 p, #c2 p, #c3 p, #piede p { margin:0; padding:0.5em 1em; }#c1, #c2, #c3, #piede { padding:0.5em 0; }h1 { font-size:1.2em; margin:0; padding:1em }


INTRODUZIONE AI CSS


POSIZIONE DELLE COLONNE


• Le colonne appaiono su schermo, da sinistra a destra, nell’ordine in cui sono state inserite nel codice XHTML

• Questo non è un vincolo, dato che è possibile traslare le singole colonne tramite la dichiarazione position:relative

#c2 { position:relative; left:200px; }#c3 { position:relative; left:-300px; }

INTRODUZIONE AI CSS


SECONDA PARTE

LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

INTRODUZIONE AI CSS


STRUTTURA DELLA PAGINA

• La pagina ha la seguente struttura:<div id="pagina"><div id="aux"><div id="testa"></div><div id="c1"></div><div id="c2"></div><div id="c3"></div><div id="piede"></div>

</div></div>• A differenza del layout a larghezza fissa, in questo caso è

necessario un contenitore ausiliario (<div id="aux">) il cui scopo è la gestione degli sfondi per le colonne

SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

INTRODUZIONE AI CSS


LE TRE COLONNE

Le istruzioni CSS essenziali sono:body { margin:0; padding:0 5%;}#pagina { width:100%;}#aux { width:100%;}#c1 { float:left; width:23%;margin: 0 1%;display:inline}#c2 {float:left; width:48%;margin: 0 1%;display:inline }#c3 { float:right; width:23%;margin: 0 1% 0 0;display:inline}#piede { clear:both;width:100% }


INTRODUZIONE AI CSS


LE TRE COLONNE

• La larghezza del layout non è affidata alla proprietà width di #pagina ma al padding impostato per <body>

• La larghezza totale delle tre colonne non raggiunge il 100% dello spazio disponibile, poiché ciò potrebbe comportare problemi di arrotondamento (dipendendo dalle dimensioni della finestra) nel passaggio % px


INTRODUZIONE AI CSS


LE TRE COLONNE

• Un esempio di problemi con l’arrotondamento è il seguente: si ipotizzi che la larghezza di #pagina sia pari a 802px e che la larghezza di #c1, #c2 e #c3 sia pari, rispettivamente, a 35%, 50%, 25%.

• Gli elementi #c1 e #c3 dovrebbero dunque essere larghi 802×25÷100=200.5px, mentre l’elemento #c2 dovrebbe essere largo 802×50÷100=401px

• Poiché il pixel non può essere spaccato in due, elementi #c1 e #c3 sarebbero larghi non 200.5px ma 201px.

• La larghezza totale delle tre colonne sarebbe dunque pari a 201+401+201=803px, la quale supererebbe di 1px la larghezza di #pagina, per cui la terza colonna dovrebbe disporsi sotto le prime due


INTRODUZIONE AI CSS


LE TRE COLONNE

• La soluzione proposta consiste nel rendere la larghezza totale delle colonne pari al 99%, lasciando un franco pari all’1% per assorbire eventuali errori di arrotondamento

• Il franco si ha fra #c2 e #c3, rendendo flottanti le due colonne a sinistra e a destra e regolando larghezze e margini in modo tale che ci sia una distanza pari all’1% fra #c2 e #c3


INTRODUZIONE AI CSS



• Per realizzare lo sfondo delle tre colonne non è possibile usare una sola immagine poiché la larghezza delle colonne non è più nota a priori

• Saranno dunque utilizzate due immagini separate che saranno impostate come sfondo di #pagina e #aux


INTRODUZIONE AI CSS



• Ricordando che uno sfondo posizionato con le percentuali si dispone in modo tale che il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell’area del padding del suo contenitore, sarà sufficiente realizzare due immagini, – la cui larghezza sia tale da coprire le attuali risoluzioni supportate

(ad esempio 4000px)– la cui colorazione sia tale da risultare opache per la percentuale

occupata dalla colonna e trasparenti per la restante parte.• Si è scelto di avere colonne laterali larghe il 25% dello spazio totale• L’immagine per la prima colonna sarà opaca per i primi 1000px (in

orizzontale) e trasparente per i restanti 3000px (il rapporto è dunque 25%)

• L’immagine per la prima colonna sarà trasparente per i primi 3000px (in orizzontale) e opaca per i restanti 1000px (il rapporto è dunque 75%)


INTRODUZIONE AI CSS



• Il codice da utilizzare per impostaregli sfondi è il seguente:

#pagina {background:#FFC url(3COLLIQ.SX.gif) 25% 0 repeat-y;

}#aux {

background:transparent url(3COLLIQ.DX.gif) 75% 0 repeat-y;}

• Si noti che il colore di sfondo di #pagina fornisce lo sfondo per la colonna centrale, mentre il colore di sfondo di #aux deve essere trasparente per consentire la visualizzazione dello sfondo di #pagina


INTRODUZIONE AI CSS


SPAZIO FRA LE COLONNE

• La distanza fra il testo e i bordi delle colonne è il risultato dell’impostazione dei margini con i quali è stata realizzata la struttura a tre colonne


#piede { background:#CCC; }#testa { background:#CCC; }h1 { font-size:1.2em; margin:0; padding:1em }#c1 p, #c2 p, #c3 p { margin:0; padding:0.5em 0; }#piede p { margin:0; padding:0.5em 1em; }#c1, #c2, #c3, #piede { padding:0.5em 0; }

INTRODUZIONE AI CSS


SECONDA PARTE

LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO

ASSOLUTO

INTRODUZIONE AI CSS


LAYOUT A COLONNECON BOX POSIZIONATI IN MODO ASSOLUTO

• Realizzare layout a colonne attraverso blocchi posizionati in modo assoluto è relativamente semplice ma implica un forte vincolo

1. Se si vuole gestire con efficacia il piè di pagina è necessaria una colonna che sia sempre e a priori la più lunga delle altre

2. Se si vuole gestire lo sfondo delle colonne indipendentemente dall’altezza delle colonne è necessaria una colonna che sia sempre e a priori la più lunga delle altre

SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

INTRODUZIONE AI CSS



• Il vincolo è dovuto al fatto che i blocchi posizionati in modo assoluto non possono in nessun modo controllare la posizione del piè di pagina (che nel caso di blocchi flottanti era controllato tramite la proprietà clear)

• Inoltre i blocchi posizionati in modo assoluto non possono determinare l’altezza del loro contenitore, usandone lo sfondo per realizzare le colonne

• Una colonna a priori più alta delle altre potrebbe essere però posizionata in modo statico e superare i problemi suddetti

• Tramite i margini laterali, la colonna statica potrebbe lasciare lo spazio per il posizionamento dei blocchi assoluti


INTRODUZIONE AI CSS



• Vedremo ora come realizzare un layout a colonne con blocchi posizionati in modo assoluto

• Si assume che non interessi avere il piè di pagina né che interessi gestire gli sfondi indipendentemente dall’altezza delle colonne

• Non ci sono differenze degne di nota fra layout liquidi o a larghezza fissa

• La struttura della pagina sarà la seguente:

<body><div id="testa"></div><div id="corpo">

<div id="c1"></div><div id="c2"></div><div id="c3"></div>

</div></body>


INTRODUZIONE AI CSS


LE TRE COLONNE

• Le istruzioni CSS essenziali sono:

#corpo { width:100%;position: relative; }#c1 { position:absolute; top:0; left:0;width:25%;}#c2 {position:absolute; top:0; left:25%;width:50%;}#c3 {position:absolute; top:0; left:75%;width:25%;}


INTRODUZIONE AI CSS


LE TRE COLONNE

• Il blocco div#corpo è posizionato in modo relativo, in modo da essere il riferimento per il posizionamento dei tre blocchi in esso contenuti, div#c1, div#c2 e div#c3, posizionati in modo assoluto

• Per div#corpo è stata specificata una larghezza pari al 100% (questo in teoria non occorre ma corregge un difetto di IE/Win)

• I blocchi hanno una larghezza totale pari al 100%. Ciò non costituisce un problema poiché ognuno di essi si comporta indipendentemente dagli altri

• La larghezza dei blocchi e il valore della proprietà left sono tali da permettere il posizionamento dei blocchi senza sovrapposizioni


INTRODUZIONE AI CSS


LE TRE COLONNE

• A questo punto è possibile aggiungere dei bordi senza preoccuparsi del box model (entro certi limiti) poiché eventuali aggiunte alla larghezza dei box sono “assorbite” dal posizionamento assoluto

• Per distanziare il testo dalle colonne si può ancora ricorrere al metodo del padding nei paragrafi


#c1{border-right:1px dotted #900;}#c2{border-right:1px dotted #900;}

INTRODUZIONE AI CSS


SECONDA PARTE

CENTRARE UN BOX NELLA PAGINA

INTRODUZIONE AI CSS



• Uno dei problemi che spesso si incontrano coi CSS è l’apparente difficoltà di centrare un box nella pagina o in un box contenitore

• In base alle specifiche CSS, per posizionare un blocco al centro della pagina è sufficiente specificare il valore auto per i margini laterali:#box { margin : 1em auto 1em auto }

• Purtroppo, le vecchie versioni di Internet Explorer per Windows hanno un modo diverso di centrare il box che richiede di impostare al valore center la proprietà text-align

SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA

INTRODUZIONE AI CSS



• Questa originalità di Internet Explorer ha però un duplice effetto negativo:

1. È necessario utilizzare del codice ridondante per supportare le vecchie versioni di Internet Explorer

2. Chi affronta i CSS le prime volte, può “istintivamente” provare a centrare un box attraverso la dichiarazione text-align:center.Dato che IE/Win (versione 6 e precedenti) risponderà secondo le aspettative di chi realizza il codice, in quest’ultimo spesso nasce una duplice idea errata: «i box si centrano con text-align, ma Mozilla non è in grado di centrare il box»

• Si noti che la proprietà text-align è specifica per il testo, dunque il comportamento di Internet Explorer è del tutto arbitrario


INTRODUZIONE AI CSS



• In pratica, per centrare un box nella pagina è necessario il seguente codice:body { text-align : center; }#box {margin : auto;text-align : left; }

• Se il box da centrare ha una larghezza espressa in percentuali può essere sufficiente agire sui margini laterali del box o il padding del box contenitore:body { padding : 10% 0 }box { /* non è necessario impostare la larghezza */ }ovverobox { width : 80%; margin : auto 10% }


INTRODUZIONE AI CSS


SECONDA PARTE

FORMATTARE LE LISTE DI LINK MENU

INTRODUZIONE AI CSS



SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU

• Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti:

<ul><li><a href="…">Collegamento 1</a></li><li><a href="…">Collegamento 2</a></li><li><a href="…">Collegamento 3</a></li><li><a href="…">Collegamento 4</a></li><li><a href="…">Collegamento 5</a></li>

</ul>• Tuttavia, il classico aspetto delle liste rende poco

“attraente” un menu realizzato in questo modo

INTRODUZIONE AI CSS



• Per ottenere un menu verticale dall’aspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione “a lista”

ul { margin:0; padding:0; }

li { display:inline; }


INTRODUZIONE AI CSS




• Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link, a:visited, a:hover, a:focus, a:active per creare effetti roll-over senza utilizzare il javascript, con ovvi vantaggi

• Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi

INTRODUZIONE AI CSS


MENU VERTICALI

• Per realizzare menu verticali, oltre alle regole precedentemente viste, sono utili le seguenti ulteriori regole:– a { display:block; padding:5px 1em }

• Tramite display:block i link diventano dei blocchi, dunqe sono cliccabili per tutta la loro area

• Tramite il padding verticale si aumenta l’area cliccabile verticale

– a:link,a:visited{text-decoration:none}• Spesso nei menu la sottolineatura dei link non è

necessaria, anzi risulta spesso antiestetica ed evidenzia un’area inferiore a quella effettivamente attivabile


INTRODUZIONE AI CSS


MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE

ul#tipo1 {border:1px solid #900;border-top:none;}#tipo1 a {border-top:1px solid #900;}#tipo1 a:link, #tipo1 a:visited {background:#FFC;color:#000;}#tipo1 a:hover, #tipo1 a:focus, #tipo1 a:active {background:url(freccetta.gif) #EEE right center no-repeat;color:#900;}


INTRODUZIONE AI CSS


MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE

• I collegamenti appaiono in un elenco verticale separati da delle linee orizzontali

• I collegamenti sono di colore nero su sfondo ocra• Al passaggio del mouse, lo sfondo diventa grigio chiaro, il testo si

accende di colore rosso e sulla sinistra appare un’icona rappresentante un freccia

• L’immagine non viene pre-caricata• Per pre-caricare l’immagine ed evitare un piccolo ritardo al momento

della sua prima comparsa è sufficiente porla come sfondo di ul#tipo1:ul#tipo1 { background: url(freccetta.gif) no-repeat; }

• Così facendo, l’immagine sarà caricata poiché deve essere posta come sfondo di ul#tipo1. Tuttavia l’immagine sarà coperta dallo sfondo dei link stessi


INTRODUZIONE AI CSS


MENU VERTICALI: EFFETTO PULSANTE

#tipo2{ border:1px solid #333; }#tipo2 a:link,#tipo2 a:visited{border:3px solid #EEE;background:#EEE;color:#000;}#tipo2 a:hover,#tipo2 a:focus{border:3px outset #999;background:#FFF;color:#900;outline-style: none;}#tipo2 a:active{border:3px groove #333;background:#DDD;color:#f00;}


click*

INTRODUZIONE AI CSS


MENU VERTICALI: EFFETTO PULSANTE


• In questo caso, sono stati sfruttati tre differenti tipi di bordo per avere:– uno stato di riposo– uno stato di selezione– uno stato di attivazione

• Al passaggio del mouse, tramite la dichiarazione border:3px outset #999, il collegamento assumerà l’aspetto di un pulsante

• Al momento dell’attivazione del collegamento, tramite la dichiarazione border:3px groove #333, il collegamento assumerà l’aspetto di un pulsante premuto

• Agendo sul colore dei link e sugli sfondi, l’effetto è completato e perfezionato• Si noti che a riposo il bordo è piatto e dello stesso colore dello sfondo

(border:3px solid #EEE). Ciò è necessario per evitare che la comparsa di bordi prima inesistenti provochi movimenti nelle voci del menu

• Si noti infine che in luogo di agire sullo stile del bordo, è possibile agire sul colore dei singoli lati di un bordo piatto, così da avere più controllo sul risultato finale

INTRODUZIONE AI CSS


MENU ORIZZONTALE

• Per realizzare menu orizzontali possono essere utilizzati diversi metodi come ad esempio:– tag <a> flottanti– tag <a> posizionati in modo assoluto– tag <a> lasciati come elementi in linea

• Il metodo più diffuso e forse meno problematico è quello di utilizzare tag <a> flottanti


INTRODUZIONE AI CSS


MENU ORIZZONTALE

• Il codice HTML utilizzato è il seguente:<ul id="menu">

<li id="primo"><a href="#">Collegamento 1</a></li>

<li><a href="#">Collegamento 2</a></li>

<li><a href="#">Collegamento 3</a></li>

<li><a href="#">Collegamento 4</a></li></li>

</ul>

• Al primo elemento della lista è assegnato l’identificatore primo per una più semplice gestione dei bordi


INTRODUZIONE AI CSS


MENU ORIZZONTALE

Il codice CSS utilizzato è il seguente:ul#menu { margin:0;padding:0; }#menu li { display:inline; }ul#menu {border-top:1px solid #900;border-bottom:1px solid #900;color:#000;background:#eef;float:left;width:100%;}#menu a { float:left; padding:5px 15px;border-right:1px solid #900;}#menu #primo a{ border-left:1px solid #900; }#menu a:link,#menu a:visited{ color:#444; background:#eef; }#menu a:hover,#menu a:focus,#menu a:active{ background:#900;color:#FFF;}


INTRODUZIONE AI CSS


MENU ORIZZONTALE

• Innanzitutto si inseriscono le regole per azzerare la normale formattazione della lista

• I collegamenti associati al menu sono flottanti per cui si dispongono uno di fianco all’altro

• Tramite i bordi laterali, i collegamenti sono separati tra loro• Per contenere i collegamenti flottanti è bene che il box realizzato dal tag <ul>

sia anch’esso flottante. Bisognerà di conseguenza impostarne la larghezza.• I bordi superiori e inferiori sono realizzati tramite il box realizzato dal tag <ul>• Al passaggio del mouse si ha un effetto roll-over agendo su colore e sfondo

dei collegamenti


INTRODUZIONE AI CSS


MENU ORIZZONTALE

Se le diverse voci del menu sono associate diverse aree del sito può essere utile una soluzione del tipo “a scheda”:

<li class="on">…</li>

#menu li.on a:link,#menu li.on a:visited,#menu li.on a:hover,#menu li.on a:focus, #menu li.on a:active{padding-bottom:6px;background:#FFF;color:#000;margin-bottom: -1px;position: relative;z-index: 10;}


class="on"

INTRODUZIONE AI CSS


MENU ORIZZONTALE

• Rispetto alle altre linguette, quella attiva ha il valore del padding inferiore impostato a 6px anziché 5px. Il pixel in eccesso viene gestito tramite il margine inferiore

• Il colore dello sfondo è il medesimo dello sfondo della pagina per avere l’effetto a linguetta

• Il posizionamento relativo e lo z-index servono a gestire correttamente le sovrapposizioni


INTRODUZIONE AI CSS


SECONDA PARTE

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

INTRODUZIONE AI CSS



• In alcuni casi può essere utile gestire loghi, banner e grafica in generale sia in forma testuale sia in forma grafica

• Esistono tecniche CSS che permettono di sostituire un testo con una immagine senza ricorrere all’apposito tag <img />

• Le diverse tecniche consistono nello sfruttare gli sfondi per inserire le immagini e nel nascondere il testo in diversi modi

SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

INTRODUZIONE AI CSS




• Si vuole ottenere il seguente risultato: convertire una stringa in una immagine tramite CSS

ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA

INTRODUZIONE AI CSS



<h1><span>ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA</span></h1>

body{position : relative;z-index : 1;}h1{width : 130px;height : 150px;background : url(panda.jpg);font-size : 70%}h1 span {position : relative;z-index : -1;}


INTRODUZIONE AI CSS



• La larghezza del box generato da <h1> è pari alla dimensione dell’immagine (130×150px)

• Per nascondere il testo, si porta l’elemento <span> dietro <h1> attraverso la proprietà z-index

• Essendo lo spazio occupato dal testo maggiore dello spazio a disposizione, occorre ridurre la dimensione del testo


INTRODUZIONE AI CSS



• Qualora l’immagine non fosse caricata, il testo ritornerebbe visibile

• Il testo assolve dunque il compito di testo alternativo

• A differenza di una stringa contenuta nell’attributo alt, il testo può essere marcato tramite XHTML


INTRODUZIONE AI CSS



• Nel caso ci fosse anche un collegamento interno al tag <h1> tutto sarebbe altrettanto semplice:<h1><a href="…"><span> … </span></a></h1>

• Si può tuttavia utilizzare <h1> come fosse <body> e <a> come fosse <h1>

• L’immagine di sfondo è applicata all’elemento <a> anziché all’elemento <h1>

• L’oggetto con z-index=1 è l’elemento <h1> anziché l’elemento <body>

• È bene eliminare anche la sottolineatura del collegamento poiché potrebbe comunque apparire sopra l’immagine, essendo l’elemento <span> interno al link a essere posto dietro l’immagine e non il link stesso

h1{width:130px;height:150px;font-size: 70%;z-index: 1;position: relative;}h1 span {z-index: -1;position: relative;}h1 a{height:100%;width:100%;display:block;text-decoration: none;background:url(panda.jpg);}


INTRODUZIONE AI CSS


ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD

• Associando le tecniche FIR ai collegamenti, è possibile sfruttare le pseudo classi :hover ecc. per creare degli effetti rollover che non richiedono javascript

• Inoltre si può evitare di caricare in anticipo i diversi stati dell’immagine sfruttando una sola immagine per i diversi stati

• Si voglia ad esempio creare un effetto roll-over col logo della OLSP

• In una unica immagine inseriamo due diversi stati della medesima figura (in B&N e a colori)

SECONDA PARTE: ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD

INTRODUZIONE AI CSS


ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD

h1{width:130px; height:150px;font-size: 70%;z-index: 1; position: relative;}h1 span { z-index: -1;position: relative }h1 a{height:100%; width:100%;display:block; text-decoration: none;background:url(panda2.jpg);}h1 a:hover,h1 a:focus, h1 a:active {background-position: 0 -150px;}

SECONDA PARTE: ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD

INTRODUZIONE AI CSS


SECONDA PARTE

NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

INTRODUZIONE AI CSS



• Quando si realizza una pagina XHTML + CSS è bene specificare meccanismi di navigazione interna, utili in caso di navigazione con programmi utente dalle ridotte capacità grafiche

• Questi meccanismi di navigazione, tuttavia, potrebbero essere inutili o poco chiari a chi usasse programmi utente in grado di interpretare a pieno i CSS

• Il modo più banale di nascondere tali contenuti via CSS è usare la dichiarazione display : none associata ad un’apposita classe (ad es. .nascosto):

<h1>ORGANIZZAZIONE …</h1><p class="nascosto">[<a href="#SKIP" accesskey=".">Salta il menu di navigazione</a>]</p><ul>

<li><a href="#">…</a></li>…

</ul><p><a id="SKIP"></a>Lorem ipsum…</p>

SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

INTRODUZIONE AI CSS



SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

• Tale regola potrebbe essere interpretata anche da screen reader• Tali meccanismi potrebbero essere associati ad access-key che utili

indipendentemente dal programma utente• Un metodo migliore per nascondere i contenuti potrebbe dunque

essere quello di seguito indicato:.nascosto{width:0;height:0;overflow:hidden;position:absolute;top:-1000em;}• Le prime tre dichiarazioni dovrebbero essere sufficienti a generare un

box dall’ingombro nullo il cui contenuto è del tutto invisibile• Tuttavia alcuni browser richiedono anche le ultime due dichiarazioni

che portano il box totalmente al di fuori dalla finestra del browser

INTRODUZIONE AI CSS


SECONDA PARTE

FORMATTARE I MODULI

INTRODUZIONE AI CSS


FORMATTARE I MODULI

• Nel formattare i moduli sarebbe possibile utilizzare i vari attributi per la gestione dei diversi tipi di campi:– <input type="text" />– <input type="password" />– <input type="radio" />– <input type="submit" />– …

• Attraverso un selettore del tipo input[type='...'] permetterebbe di distinguere i diversi elementi senza ricorrere a classi o attributi id

SECONDA PARTE: FORMATTARE I MODULI

INTRODUZIONE AI CSS


FORMATTARE I MODULI

• Tra le cose più utili nella formattazione di un modulo tramite i CSS è l’allineamento fra etichette e campi del modulo

• Fra i vari metodi possibili due sono i metodi più semplici:

1. allineamento tramite box flottanti

2. allineamento tramite i margini• La struttura XHTML di riferimento è la seguente:

<p><label …>…</label> <input type="text" … /></p>

<p><label …>…</label> <input type="text" … /></p>


INTRODUZIONE AI CSS


FORMATTARE I MODULI

• Tramite box flottanti#f1 label {display:block;float:left;width:7em;text-align:right;padding-right:.5em;}• Tramite i margini#f2 label {display:block;line-height:1.4em;height:1.4em; width:7em;text-align:right;}#f2 input {margin:-1.4em 0 0 8em;display: block !important;display: inline;}


L’etichetta ha una larghezza e un’altezza noti a priori

Il campo, tramite i margini, è spostato in modo da affiancare l’etichetta

Hack: Mozilla vuole display:block, ma con IE si avrebbe un errore di formattazione

L’etichetta ha una larghezza e un’altezza noti a priori

Il campo, tramite i margini, è spostato in modo da affiancare l’etichetta

Hack: Mozilla vuole display:block, ma con IE si avrebbe un errore di formattazione

INTRODUZIONE AI CSS


SECONDA PARTE

BANNER ESPANDIBILI CON I CSS

INTRODUZIONE AI CSS



SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

• Ultimamente si sono visti diversi siti internet con banner pubblicitari che si espandono al passaggio del mouse

• Tramite CSS ciò può essere realizzato tramite le solite pseudo-classi del tag <a>, senza Javascript

• Le soluzioni più semplici sono almeno 2:– Tecniche FIR, in cui lo stato :hover permette

uno spazio maggiore per mostrare lo sfondo/banner per intero

– Tramite il tag <img> e la proprietà overflow:hidden del tag <a>

INTRODUZIONE AI CSS




• È didatticamente più interessante il secondo metodo:

<div id="banner">

<a href="…"><img src="b.jpg" … /></a>

</div>

<p>Lorem ipsum …</p>• Poiché il blocco contenente l’immagine (<a>) dovrà

espandersi sopra al testo, è opportuno che questo sia posizionato in modo assoluto e che esista un contenitore di riferimento (anche per la posizione del testo sottostante): div#banner

INTRODUZIONE AI CSS



#banner {width:468px; height:60px;position:relative;}#banner a:link,#banner a:visited {width:468px;height:60px;position:absolute;top:0;left:0;z-index:100;overflow:hidden;}#banner a:hover,#banner a:focus {height:240px;}


INTRODUZIONE AI CSS




• Il contenitore ha le dimensioni del banner ridotto ed è posizionato in modo relativo per fornire un riferimento al posizionamento assoluto del link

• Il link è posizionato in modo assoluto così da potersi espandere liberamente

• Quando il link non è attivato la sua dimensione è pari a quella del banner ridotto. Attraverso la dichiarazione overflow:hidden l’immagine al suo interno (più alta di un fattore 4) viene mostrata solo parzialmente

• Quando il collegamento è attivato, l’altezza del link diventa tale da mostrare il banner per intero

INTRODUZIONE AI CSS


SECONDA PARTE

EMULARE I FRAME CON I CSS

INTRODUZIONE AI CSS


EMULARE I FRAME CON I CSS

• Tramite CSS è possibile riprodurre un’impaginazione simile a quella che si otterrebbe con i frame

• La cosa sarebbe relativamente semplice con la dichiarazione position:fixed, che però non è supportata da Internet Explorer

SECONDA PARTE: EMULARE I FRAME CON I CSS

INTRODUZIONE AI CSS


FRAME VERTICALI

<div id="fix"><ul> … </ul>

</div><div id="frame">

<p>Lorem ipsum …</p></div>

html,body{height:100%;margin:0;padding:0;}#fix {position:fixed;width:160px; height:100%;overflow:auto;padding:0 20px;}#frame {position:absolute;left:200px;top:0;padding:0 20px}


L’altezza di <html> e <body> è 100% per regolare l’altezza del blocco fisso

Il blocco fisso utilizza la proprietà overflow per mostrare i contenuti che non entrassero interamente nella finestra

Il secondo blocco è posizionato in modo assoluto per essere indipendente dal blocco fisso

INTRODUZIONE AI CSS


FRAME VERTICALI

• Per Internet Explorer è necessario aggiungere le seguenti regole:

html,body{overflow:hidden; }#fix{width /**/:200px;position:absolute;top:0;left:0;}#frame{position:static;margin-left: 200px;height:100%; overflow:auto;}

• La prima regola elimina la barra di scorrimento della finestra del browser

• La seconda regola posiziona il primo blocco in modo assoluto. Sono ereditate le proprietà sull’altezza e sulla barra di scorrimento. La larghezza è regolata in base al box model errato, ma solo per IE5.x (grazie al commento fra dichiarazione e valore)

• La terza regola rende statico il terzo blocco che gestirà autonomamente un’eventuale barra di scorrimento


INTRODUZIONE AI CSS


FRAME ORIZZONTALI


<div id="top">…</div><div id="frame">

<p>Lorem ipsum …</p></div>

html,body{ margin:0; padding:0; }#top {position:fixed;height:3em; width:100%;line-height: 3em;}#frame {padding:3em 20px 1em 20px}

Poiché il blocco posizionato in modo fisso si comporta come un box posizionato in modo assoluto che però non segue lo scorrimento della pagina, affinché tutto funzioni è sufficiente che il secondo blocco abbia il padding superiore pari all’altezza del blocco superiore

INTRODUZIONE AI CSS


FRAME ORIZZONTALI

• Per Internet Explorer è necessario ricorrere a degli script come IE7: http://dean.edwards.name/IE7/


INTRODUZIONE AI CSS


SECONDA PARTE

STILI ALTERNATIVI

INTRODUZIONE AI CSS


STILI ALTERNATIVI

• Esistono tre tipi di foglio di stile collegato:• Fogli di stile permanenti

– Sono sempre attivi• Fogli di stile preferiti: divengono preferiti i fogli di stile a cui è

associato un valore per l’attributo title del tag <link/>– Sono attivi al momento di caricare la pagina– Sono disattivati quando l’utente sceglie uno stile alternativo

(tramite gli appositi menu dei browser più evoluti)• Fogli di stile alternativi: divengono alternativi i fogli di stile quelli

collegati tramite tag tag <link/> cui è associato l’attributo rel="alternate stylesheet" ed un valore per l’attributo title – Non sono attivi al momento di caricare la pagina– Sono attivati quando l’utente sceglie lo stile alternativo


INTRODUZIONE AI CSS


STILI ALTERNATIVI

• Esempio: www.zeldman.com<style type="text/css"

media="all">@import "/c/c04.css";</style>

<link rel="alternate stylesheet" type="text/css" media="all" title="darker" href="/c/darker.css" />

<link rel="alternate stylesheet" type="text/css" media="all" title="lighter" href="/c/lighter.css" />


INTRODUZIONE AI CSS


STILI ALTERNATIVI

• Per i browser che non supportano gli stili alternativi (come Internet Explorer) è tuttavia possibile usare il Javascript

• In rete si trovano decine di script (http://www.alistapart.com/articles/alternate/)• Il principio è quello di agire sulla proprietà disabled dell’oggetto <link/>

tramite javascriptfunction setActiveStyleSheet(title) {var i, a, main;for(i=0; (a=document.getElementsByTagName("link")[i]); i++)

{ if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled =

false; } }}


INTRODUZIONE AI CSS


SECONDA PARTE

I CSS E LA LEGGE 04/2004

INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Alcuni requisiti della legge chiamano in causa, direttamente o indirettamente, i CSS

• L’esempio proposto è stato realizzato tenendo a mente tali requisiti

• Un template, tuttavia, è coinvolto, per sua stessa natura, solo in un sotto insieme dei requisiti; questo sottoinsieme comprende anche, ma non solo, requisiti che coinvolgono i CSS.

SECONDA PARTE: ESEMPIO PRATICO

INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 1Enunciato: […] Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. […] evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina […] ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico;

• L’enunciato indica implicitamente (rispetto dell’aspetto semantico) e direttamente che per formattare una pagina è bene utilizzare i CSS


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 4Enunciato: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

• È bene evitare di affidare ai CSS in generale e al colore in particolare un’informazione.

• Se ad esempio si elimina la sottolineatura ai link differenziandoli dal testo solo per il colore si corre il rischio di violare il requisito


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 6Enunciato: Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) […]

• Quando si definisce un colore per il testo (o lo sfondo) è bene verificare quali colori potrebbe ereditare lo sfondo (o il testo)


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 9Enunciato: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.

• Il rispetto di questo requisito permette di sfruttare i CSS per formattare al meglio elementi strutturali quali TH o CAPTION.


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 11Enunciato: Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.

• Un errore piuttosto comune è utilizzare i CSS senza tuttavia aver realmente separato i contenuti dalla loro formattazione: molte pagine realizzate con i CSS fanno un uso improprio dell’elemento DIV trascurando del tutto la struttura della pagina


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 12• Enunciato: La presentazione e i contenuti testuali di una

pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.

• I CSS sono coinvolti indirettamente; il dibattito si concentra sulla possibilità o meno di utilizzare layout a larghezza fissa.


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• Requisito n. 21• Enunciato: […] per facilitare la selezione e l’attivazione dei

collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta.

• Coinvolge indirettamente i CSS, ma non è chiaro se la distanza indicata comprenda tutta l’area sensibile del link o solamente il testo


INTRODUZIONE AI CSS


LEGGE 04/2004 E CSS

• La verifica tecnica comprende la seguente analisi:5) i contenuti della pagina siano fruibili in caso di utilizzo delle funzioni previste dai browser per definire la grandezza dei caratteri;

• Il punto non è affatto chiaro: vorrebbe indicare di non utilizzare i pixel per dimensionare i caratteri (per il noto problema di Internet Explorer per Windows) tuttavia il testo non afferma ciò.

Documents

INTRODUZIONE AI CSS