g. mecca – mecca@unibas.it – università della basilicata tecnologie di sviluppo per il web...

G. Mecca – mecca@unibas.it – Università della Basilicata G. Mecca – mecca@unibas.it – Università della Basilicata

Tecnologie di Sviluppo per il Web

Cascading Style Sheets (CSS):

Concetti Fondamentali

versione 2.0Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons

(vedi ultima pagina)

2G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Concetti Fondamentali

Idea Generale Sintassi Selettori Semantica

Ereditarietà e Cascata “Box Model” Lunghezze Compatibilità

CSS >> Sommario

3G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Idea Generale

Obiettivo di CSSspecificare caratteristiche di formattazione

per i riquadri corrispondenti agli elementi di una pagina XHTML

Caratteristiche di formattazionedimensioni, spaziatura, colorebordi, margini, allineamento, posizionetipo di carattere, dimensione, colore...

CSS >> Concetti Fondamentali >> Idea Generale

4G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Idea Generale

Struttura di un foglio di stileinsieme di regole per la presentazione dei

riquadri Cosa deve contenere una regola

un riferimento al riquadro o ai riquadri (“selettore”)

una serie di “dichiarazioni” di formato, ovverola “proprietà” da cambiareun “valore” per la proprietà

CSS >> Concetti Fondamentali >> Idea Generale

5G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Idea Generale

CSS >> Concetti Fondamentali >> Idea Generale

h2 {h2 { color: maroon;color: maroon; font-size: 14pt;font-size: 14pt;}}

img {img { border: none;border: none;}}

regola

selettore

dichiarazione

proprietà valore

6G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Classificazione delle Proprietà (CSS1) Font

proprietà dei fontes: font-family

Colorcaratteristiche dello

sfondoes: color

Textformato del testoes: text-align

Boxstabilisce margini e

spaziaturaes: margin-top

Classificationtipo di visualizzazioneformato delle listees: list-style-image

Totale: 50 proprietà122 in CSS2

CSS >> Concetti Fondamentali >> Idea Generale

7G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Idea Generale

Semanticale dichiarazioni vengono applicate ai riquadri

selezionatinel seguito: diremo indifferentemente

riquadri o elementi Ereditarietà

i valori delle proprietà dei riquadri esterni vengano ereditate dai riquadri interni

es: tipo di font

CSS >> Concetti Fondamentali >> Idea Generale

8G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Idea Generale

Nel seguito della lezionedettagli sulla sintassidettagli sulla semantica

In particolareselettoriereditarietà e cascatamodello dei riquadriunità di misuratipi di dispositivo

CSS >> Concetti Fondamentali >> Idea Generale

9G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Sintassi

Regola<selettore> { <lista di dichiarazioni> }

Dichiarazione<proprietà>: <valore>;

Esempioh2 { color: maroon;h2 { color: maroon; font-size: 14pt; } font-size: 14pt; }

img { border: none; }img { border: none; }

CSS >> Concetti Fondamentali >> Sintassi

>> primo.css

10G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

E’ il modo in cui viene indicato il riquadro Vari possibili modi

nome dell’elemento corrispondente:viene applicato ai riquadri di tutti gli elementi con quel nome; es: img { border: none; }img { border: none; }

riquadro singolo: attributo id di XHTMLsotto-classe di riquadri di elementi con un

certo nome: attributo class di XHTML

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

11G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

Inoltreoltre ai riquadri degli elementi strutturali del

documento (h1, p, ul, table, a, img ecc.)il linguaggio XHTML consente di definire ulteriori

riquadri >> “elementi di raggruppamento” Elemento di raggruppamento

introduce un nuovo riquadro nel documento che raggruppa uno o più riquadri

per consentire di specificare una regola di stile per tutto il gruppo

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

12G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

spanelemento in linearaggruppa uno o più elementi in linea testo,

img, a, ...) in un unico riquadro in linea div

elemento a livello di bloccoraggruppa uno o più elementi in linea o a

livello di blocco in un unico riquadro a livello di blocco

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

13G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

Elementi singoliattributo “id” degli elementi HTMLselettore <nome>#<id>

Esempio: indirizzo in corsivo<p <p id=“indirizzo”id=“indirizzo”> … </p>> … </p>p#indirizzop#indirizzo { text-style: italic; { text-style: italic; font-size: 12pt; } font-size: 12pt; }

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

14G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

Un ulteriore esempionome del dipartimento in rosso

Nel codice HTMLstringa D.I.F.A. - Universit&agrave; della

Basilicata Soluzione: elemento span

<span <span id=“dip”id=“dip”>D.I.F.A. - Universit&agrave; >D.I.F.A. - Universit&agrave; della Basilicata</span>della Basilicata</span>

span#dipspan#dip { color: maroon; } { color: maroon; }

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

15G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Selettori

Classe di elementiattributo “class” degli elementi HTMLselettore <nome>.<classe>

Esempio: titolo e coda in bianco su rossotitolo: <div <div class=“barra”class=“barra”> </div>> </div>

piè di pagina: <div <div class=“barra”class=“barra”> </div>> </div>div.barradiv.barra { background-color: maroon; { background-color: maroon; color: white; color: white; text-align: center;} text-align: center;}

CSS >> Concetti Fondamentali >> Sintassi >> Selettori

>> secondo.css

16G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Semantica

Semantica delle regolele dichiarazioni vengono applicate ai riquadri

degli elementi che corrispondono al selettore Due meccanismi fondamentali

ereditarietà: un elemento può ereditare caratteristiche dai suoi antenati

cascata (“cascade”): la stessa proprietà di un elemento può essere definita più volte

CSS >> Concetti Fondamentali >> Semantica

17G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Ereditarietà

Ereditarietàalcune proprietà sono ereditate dai

predecessori (es: font)altre no (es: sfondo); vedi standard; in CSS2: proprietà “inherit”esempio: body {body { font-family: Arial;font-family: Arial; background-image:url(“icons/quadretti.jpg”); background-image:url(“icons/quadretti.jpg”);

}}

CSS >> Concetti Fondamentali >> Semantica >> Ereditarietà

18G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Cascata

Proprietà ridefinite: conflittivari fogli di stile (standard del browser, vari

fogli di stile dell’autore, foglio dell’utente)varie dichiarazioni nello stesso foglioes: foglio standard: p { font-size: 12pt; }p { font-size: 12pt; }es: foglio dell’autore: p { font-size: 9pt; }p { font-size: 9pt; }

Cascatale dichiarazioni hanno precedenze diversesi applicano “in cascata”

CSS >> Concetti Fondamentali >> Semantica >> Cascata

19G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Cascata

Algoritmo di risoluzione dei conflittitrova tutte i valori per la proprietà di un riquadrose più di una, pesa per origine (prima autore, poi

utente, poi standard)se più di una con lo stesso peso, pesa per specificità

(prima id, poi classe, poi nome)se più di una con la stessa specificità, pesa per

ordine di apparizione (prima le ultime)se nessuna, ereditarietà

CSS >> Concetti Fondamentali >> Semantica >> Cascata

20G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Esempio

Dichiarazioni per <p id=“indirizzo”>

CSS >> Concetti Fondamentali >> Semantica

bodyhead

title

#PCDATA

htmlxmlns=http://www.w3.org/

1999/xhtml

p

id=indirizzo

…

link link

rel=stylesheet

href=primo.css

rel=stylesheet

href=secondo.css

…

21G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Esempio

Dichiarazioni per <p id=“indirizzo”>dichiarazioni dello stile standard

es: color: black;dichiarazioni ereditate da <body>

es: font-family: Arial; dichiarazioni con selettore p; es: font-size: 9pt;dichiarazioni con selettore p#indirizzo

font-style: italic; font-size: 12pt; Conflitto sulla dimensione del font

prevale la proprietà con selettore più specifico

CSS >> Concetti Fondamentali >> Semantica

ATTENZIONE:importanza dellacorrettezzasintattica

>> terzo.css

22G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Modello dei Riquadri (“Box Model”) Elementi XHTML

ad ogni elemento corrisponde un riquadro Elementi a livello di blocco

heading, block, list: producono un’interruzione di linea

Elementi in lineainline: non producono interruzioni di linea

CSS >> Concetti Fondamentali >> Modello dei Riquadri

23G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Modello dei Riquadri (“Box Model”) Flusso di visualizzazione

disposizione dei riquadri nella finestra del br.riquadro contenuto nel riquadro del padre

Riquadro: articolato in vari spazicontenuto (“content”)riempimento (“padding”)bordo (“border”)margine (“margin”)

CSS >> Concetti Fondamentali >> Modello dei Riquadri

24G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

riempimento(padding)

Modello dei Riquadri (“Box Model”)

CSS >> Concetti Fondamentali >> Modello dei Riquadri

contenuto

bordo(border)

margine(margin)

top

bottom

left

righttop

bottom

left

righttop

bottom

left

right

25G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Modello dei Riquadri (“Box Model”) Proprietà relative al riquadro

margin-top, margin-bottom, margin-left, margin-right (lunghezze)

padding-top, padding-bottom, padding-left, padding-right (lunghezze)

border-top-width, border-bottom-width, border-left-width, border-right-width (lungh.)

border-color, border-stylewidth, height (solo per el. a livello di blocco)

CSS >> Concetti Fondamentali >> Modello dei Riquadri

26G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Modello dei Riquadri: Esempi

body {padding-left: 30pt;padding-right: 30pt;padding-top: 10pt;padding-bottom: 10pt;}

a {color: white;background-color: blue;padding-left: 5pt;padding-right: 5pt; }

a.linkImg {background-color: transparent;}

h2 {margin-top: 5pt;margin-bottom: 2pt;}

p {margin-top: 0pt;margin-bottom: 0pt; }

div.barra {padding-top: 10pt;padding-bottom: 10pt;border-color: yellow;border-style: solid;border-width: thick; }

CSS >> Concetti Fondamentali >> Modello dei Riquadri

>> quarto.css

27G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Alterazione del Flusso

Proprietà “float” e “clear” Float

sposta a destra o a sinistra un riquadrofuori dal flusso ordinario (“fluttuante”)gli altri riquadri scorrono attornol’elemento viene considerato a livello di

blocco anche se è in lineautilizzo tipico: immagini

CSS >> Concetti Fondamentali >> Modello dei Riquadri >> Alt. del Flusso

28G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Alterazione del Flusso

Esempio<img class=“aDestra” … /><img class=“aDestra” … />img.aDestra { float: right;img.aDestra { float: right;

margin-bottom: 10pt; margin-top: 10pt;}margin-bottom: 10pt; margin-top: 10pt;}

Clearimpedisce lo scorrimentoclear: left; clear: right; clear: both;div.barra {clear: both; width: 400pt; }div.barra {clear: both; width: 400pt; }

Possono sostituire le tabelle

CSS >> Concetti Fondamentali >> Modello dei Riquadri >> Alt. del Flusso

>> quinto.css

29G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Lunghezze

Vari modi per esprimere lunghezzeassolute; unità: in, cm, mm, pt (1 pt=1/72 in)relative; unità: em, px (pixel)percentuali; es: 90%parole chiave; es: small, x-small

In generaleevitare di utilizzare unità assoluteportabilità tra i dispositivi e flessibilità

CSS >> Concetti Fondamentali >> Lunghezze

30G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Lunghezze Relative

Unità suggeritaem: lunghezze relative alla dimensione dei

font em

1em = dimensione in pt. pari alla dimensione del font per il riquadro in questione

eccezione: font-size; relativo alla dimensione del font per il riquadro del padre

CSS >> Concetti Fondamentali >> Lunghezze

31G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Lunghezze Relative: Esempi

body {font-family: Arial;background-image:url("icons/quadr.jpg");font-size: 1em; padding-left: 2em;padding-right: 2em;padding-top: 1em;padding-bottom: 1em;}

h2 {color: maroon;font-size: 1.5em;margin-top: 0.5em;margin-bottom: 0.5em; }

a { background-color: blue;color: white;padding-left: 0.5em;padding-right: 0.5em; }

div.barra {color: white;background-color: maroon;text-align: center;padding-top: 0.5em;padding-bottom: 0.5em;border-color: navy;border-style: solid;border-width: 0.2em;clear: both; }

p {font-size: 0.9em;margin-top: 0;margin-bottom: 0; }

p#indirizzo {font-style: italic;font-size: 1.1em;}

...

CSS >> Concetti Fondamentali >> Lunghezze

>> sesto.css

32G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Compatibilità

Internet Explorer 5primo con compatibilità del 99% con CSS1

Versioni recentiInternet Explorer 6 e successiveMozilla 1.0 e successiviNetscape 6.2 e successiviOpera 6 e successiviottima compatibilità con CSS1alcune proprietà di CSS2

CSS >> Concetti Fondamentali >> Compatibilità

33G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

CSS >> Concetti Fondamentali >> Compatibilità

Compatibilitàfonte: http://www.westciv.com/style_master/academy/browser_support

34G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Compatibilità

Problemabrowser incapaci di visualizzare il foglio di stile CSS

Problema generalesviluppo indipendente dal browser

I Casobrowser che non supportano per nulla la graficaes: Lynx o browser per disabilisoluzione semplice: accertarsi che il materiale sia

“accessibile” anche in assenza di grafica (>>)

CSS >> Concetti Fondamentali >> Compatibilità

35G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Compatibilità

II Casobrowser con supporto parzialeNetscape Navigator 4 e Internet Explorer 4cercano di interpretare lo stile ma generano errori di

visualizzazionegli errori possono pregiudicare la visibilità

es: font bianco su sfondo biancosi tratta di un problema molto più serioanche se ormai meno rilevante (le versioni 4 vanno

sparendo)

CSS >> Concetti Fondamentali >> Compatibilità

36G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Compatibilità

In generaleè necessario verificare la visualizzazione

della pagina con browser diversiche includono le ultime versioni di Mozilla,

Internet Explorer e Opera oltre che Netscape 4 e Lynx

Obiettivoaccertarsi che il contenuto sia fruibileNON che la grafica sia la stessa

CSS >> Concetti Fondamentali >> Compatibilità

37G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Compatibilità

Un trucco per escludere i vecchi browser“nascondere” lo stile al browsercreare uno stile vuoto con una singola

istruzione @import per lo stile principaleeventualmente seguito stile secondario per i

vecchi browser

CSS >> Concetti Fondamentali >> Compatibilità

>> dummy.css

38G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Riassumendo

Idea Generale Sintassi Selettori Semantica

Ereditarietà e Cascata “Box Model” Lunghezze Compatibilità

CSS >> Sommario

39G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Ringraziamenti

Nel passaggio dalla versione 1.0 alla versione 1.2 di questo documento ho utilizzato alcuni utili suggerimenti di Paolo Merialdo (merialdo@dia.uniroma3.it), che ha utilizzato il materiale didattico nel suo corso di “Sistemi Distribuiti” a Roma Tre

CSS >> Ringraziamenti

40G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

CSS >> Concetti Fondamentali >> Compatibilità

Compatibilità

fonte: http://webreview.com

41G. Mecca - Tecnologie di Sviluppo per il WebG. Mecca - Tecnologie di Sviluppo per il Web

Termini della Licenza

Termini della Licenza

This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.

Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.