View
2
Download
0
Category
Preview:
Citation preview
Università degli Studi di PadovaFacoltà di Lettere e Filosofia
Indice:
Prof. Maristella Agosti, Ing. Marco Dussin
Progettazione di siti web (ING-INF/05)LMSGC, mutuato da LMLIN e Sc. Stat. – a.a. 2010-11
Cascading Style Sheets: CSS
Cascading Style Sheets (CSS): motivazioni Dove si interviene con i CSS?
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin
• Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri e la presentazione ovvero l'aspetto attraverso il quale i contenuti sono mostrati all'utente.
• Inizialmente le pagine Web erano state pensate soprattutto per i contenuti, con pochissime possibilità di personalizzazione della presentazione.
Cascading Style Sheets (CSS): motivazioni
2
Imag
e fro
m h
ttp://
ww
w.a
lista
part.
com
/
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin
Cascading Style Sheets (CSS): motivazioni
3
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin
Cascading Style Sheets (CSS): motivazione
4
• Per ovviare a queste limitazioni stilistiche, i designer di pagine Web adottarono man mano diverse tecniche, che possiamo così sintetizzare e affiancare ad un semplice esempio:
• l’uso di estensioni HTML proprietarie;• http://update.microsoft.com/windowsupdate/
• la conversione del testo in immagini;
• http://www.dams.lettere.unipd.it/
• il posizionamento del testo utilizzando tabelle annidate;• http://www.lettere.unipd.it/
• la creazione di programmi sostitutivi all’HTML.• http://www.viaggiatreno.it/
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin
• Separazione presentazione e contenuto: CSS + HTML
• CSS1: 1996 CSS2: 1998 CSS3: Working Draft
• Specifica W3C: http://www.w3.org/Style/CSS/
• Permettono agli autori di esprimere il proprio gusto grafico preservando la semplicità del codice HTML così come è stato progettato
Cascading Style Sheets (CSS): motivazioni
5
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin
Cascading Style Sheets (CSS): motivazioni
6
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 7
Dove si interviene con i CSS?
• Caratteristiche degli elementi nella pagina: visibilità, dimensioni, bordi, spaziature …
• Posizionamento degli elementi nella pagina: alto, basso, sinistra, destra, posizionamenti relativi ed assoluti …
• Testo: dimensione, colore, font, allineamento, sistema di interlinea, decorazioni, spaziare lettere e parole …
• Stili: diversi per titoli, sottotitoli, paragrafi, liste …
• Sfondo: colore, immagini, immagini ripetute o centrate …
• Bordi: tabelle, pagina, immagini, blocchi di testo …
• Ancora: colore, colore dopo visita, colore selezione …
• Altro: caratteristiche del puntatore, lettere capitali, ecc…
Università degli Studi di PadovaFacoltà di Lettere e Filosofia
Indice:
Prof. Maristella Agosti, Ing. Marco Dussin
Progettazione di siti web (ING-INF/05)LMSGC, mutuato da LMLIN e Sc. Stat. – a.a. 2010-11
CSS e pagine Web: prima parte
Elementi di una pagina Web Costruire una pagina Web Elementi blocco ed elementi inline DIV e SPAN: due elementi “speciali” Struttura di una pagina Web I selettori
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 9
Elementi di una pagina Web
• Una pagina Web è un insieme di elementi disposti uno difianco all’altro nello spazio (chiamato canvas) messo adisposizione dal browser per la loro visualizzazione.
• Tali elementi “galleggiano” sullo spazio, cercando di occuparloal meglio.
Imag
e fro
m h
ttp://
ww
w.a
lista
part.
com
/
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 10
Costruire una pagina Web
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 11
Costruire una pagina Web
<html>
<head>
<title>Turismo a Padova</title>
</head>
<body>
</body>
</html>
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 12
Elementi blocco
• Elementi blocco: se inseriti nel testo determinano una nuova riga e possono contenere altri elementi. Essi tendono ad occupare tutta la larghezza a loro disposizione.
<h1> ... <h6> Testate<p> Paragrafo <ul>, <ol>, <dl> Liste (unordered, ordered e definition) <li>, <dt>, <dd> Elemento di lista, termine da definire, definizione<table> Tabella <blockquote> Blocco di citazione <pre> Blocco di codice pre-formattato <form> Una “maschera” per l’inserimento dati (form)
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 13
Costruire una pagina Web
<html>
<head>
<title>Turismo a Padova</title>
</head>
<body>
<h1>Arte e cultura</h1>
<h2>Monumenti</h2>
<p>Padova ha molti monumenti famosi e importanti.</p>
<h2>Visite guidate e itinerari</h2>
<h2>Musei</h2>
<h1>Ospitalità</h1>
<h2>Alberghi</h2>
<h2>B&B e ostelli</h2>
<h1>Enogastronomia</h1>
<h2>Ristoranti</h2>
<h2>Agriturismi</h2>
<h1>News ed eventi</h1>
</body>
</html>
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 14
Elementi inline
• Elementi inline: possono essere inseriti all’interno di altri elementi di blocco e possono contenere a loro volta altri elementi inline, ma non di blocco. Tendono ad occupare minor spazio possibile in larghezza. Non forzano la creazione di una nuova riga
<a> Ancora<strong> Rende il testo marcato (usato al posto di <b>)<em> Aggiunge enfasi (usato al posto di <i>)<img /> Immagine <br> Line-break<input> Campi di inserimento dati di un elemento <form><abbr> Abbreviazione<acronym> Acronimo
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 15
Costruire una pagina Web
<p><a href=“http://www.padovanet.it/”>Padova</a> ha <strong>molti monumenti <em>famosi</em> e<em>importanti</em></strong>.</p>
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 16
DIV e SPAN: due elementi “speciali”
• Vi sarete accorti che gli elementi blocco e inline presentati finora vengono visualizzati dal browser con un loro “stile” particolare, nella dimensione del testo, nella scelta di un font grassetto piuttosto che corsivo, e via dicendo.
• Sono stati quindi introdotti, anche in seguito all’avvento dei CSS, due elementi “base” e “privi di stile”, da personalizzare a piacimento:
• <div></div> è l’elemento blocco base
• <span></span> è l’elemento inline base
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 17
Box Model: canvas …e non solo!Una pagina HTML è un insieme di box rettangolari: elemento blocco o in linea la loro gestione fa parte del box model. Canvas
Margine SuperioreBordo Superiore
Padding Superiore
Hei
ght
Width
Area del contenuto
Margine Inferiore
Padding Inferiore
Bordo Inferiore
Mar
gine
Sin
istr
o
Margine D
estro
Padd
ing
Sini
stro
Padding Destro
Bor
do S
inis
tro B
ordo Destro
Box Rettangolare
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 18
Box Model: canvas …e non solo!Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box .
Area del contenuto valore della proprietà width per il valore della proprietà height.
Larghezza di un box
margine sinistro + bordo sinistro + padding sinistro + larghezza del contenuto + padding destro + bordo
destro + margine destro
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 19
Struttura di una pagina Web
La struttura di una pagina Web è gerarchica
struttura ad alberoHTML
HEAD
TITLE
BODY
P H2 H2
ASTRONG
<html>
<head>
<title>Turismo a Padova</title>
</head>
<body>
<h1>Arte e cultura</h1>
<h2>Monumenti</h2>
<p> <a href=“http://www.padovanet.it/”>Padova</a> ha <strong>molti monumenti <em>famosi</em> e <em>importanti</em></strong>.</p>
<h2>Itinerari</h2>
<h2>Visite guidate</h2>
<h2>Musei</h2>
<h1>Ospitalità</h1>
<h2>Alberghi</h2>
<h2>B&B e ostelli</h2>
<h1>Enogastronomia</h1>
<h2>Ristoranti</h2>
<h2>Agriturismi</h2>
<h1>News ed eventi</h1>
</body>
</html>
Gli elementi sono in un rapporto genitore-figlio.
H1
EM
… …
……
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 20
Struttura ad albero ed ereditarietà
Livello 0
Livello 1
Livello 2
Livello 3
Livello 4
Nodo Radice
Ereditarietà le proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti
HTML
HEAD
TITLE
BODY
H1 H2 P
IMGA
P
A BR
STRONG
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 21
I selettori
• Ogni elemento della pagina può essere identificato utilizzando i “selettori”:
• ogni tag HTML è un selettore:* indica tutti gli elementi della pagina;a indica tutti gli elementi della pagina con tag a;a , b indica tutti gli elementi della pagina con tag a oppure b;a b indica tutti gli elementi della pagina con tag b contenuti in elementi con tag a, a qualsiasi livello di profondità (sfruttando l’ereditaritetà);a > b indica tutti gli elementi della pagina con tag b figli di elementi con tag a, quindi ad un livello di profondità;a + b indica l’elemento b adiacente all’elemento a.gli ultimi due selettori non sono ben supportati da tutti i browser
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 22
I selettori
• identificatori: possono essere associati agli elementi per definire una entità unica all’interno del documento: sono vietati identificatori duplicati. Sono alfanumerici con la sola eccezione del carattere underscore _ .
<img id=“logo” src=“…”/><p id=“numero_di_telefono”>0123456</p>
#logo indica l’elemento (che, ricordo, è unico) della pagina con identificatore logo.
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 23
I selettori• classi: utilizzate per creare gruppi di elementi con lo stesso comportamento. Sono alfanumeriche con la sola eccezione del carattere underscore _ .<p class=“saluto” id=“informale”>ciao</p><div id=“frasi”><span class=“saluto” id=“formale_am”>buongiorno</span><span class=“saluto” id=“formale_pm”>buonasera</span> </div>.saluto indica tutti gli elementi della pagina con classe saluto;span.saluto indica tutti gli elementi della pagina con tag span e contemporaneamente classe saluto;div span.saluto indica tutti gli elementi della pagina, contenuti nel tag div, con tag span e contemporaneamente classe saluto;#frasi saluto indica tutti gli elementi contenuti in quello con identificatore frasi e con classe saluto.… e via dicendo, valgono le regole presentate prima
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 24
I selettori: esempio
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 25
Lorem Ipsum: una curiosità
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Cos’è? Un passaggio “fittizio” usato dall’industria tipografica fin dal 1500 per verificare il layout delle pagine
• Dove? Ad esempio nel sito Web http://www.lipsum.com/ è possibile generare un numero di paragrafi variabile da usare nelle proprie pagine in costruzione
• Significato? In genere si pensa sia una passaggio costruito da parole scelta a caso, invece è un insieme di passaggi presi da Cicerone, 45 a.c. : “I termini estremi del bene e del male”
Università degli Studi di PadovaFacoltà di Lettere e Filosofia
Indice:
Prof. Maristella Agosti, Ing. Marco Dussin
Progettazione di siti web (ING-INF/05)LMSGC, mutuato da LMLIN e Sc. Stat. – a.a. 2010-11
CSS e pagine Web : seconda parte
Come è fatto un CSS Incorporare i CSS nelle pagine
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 27
Esempio di uso dei CSS
<html>
<head>
<link rel="stylesheet" href="styleES1.css" />
</head>
<body>
<h1>Esempio numero 1</h1>
<p class="p1">Elemento paragrafo 1</p>
<p class="p1">Elemento paragrafo 2</p>
<p class="p1">Elemento paragrafo 3</p>
</body>
</html>
.p1{
color:orange;
font-weight:bold;
}
Pagina HTML: esempio1.html CSS: styleES1.css
Si dice alla pagina HTML che deve caricare e applicare il
foglio di stile CSS.
p1 = classe definita nel CSS
Scrivi una volta applica dove vuoi!
La classe p1 è definita nel CSS ed è applicata agli elementi
nella pagina HTML
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 28
Come è fatto un CSS?
• Un CSS è formato da regole.
• Le regole sono formate 3 parametri:
• selettore
• proprietà
• valore
h1 color : red;
Selettore { proprietà : valore;}
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 29
Raggruppare selettori e regole
h1 color : red;
Selettore { proprietà:valore ; proprietà:valore; … ; }
h1 background : white;
h1 color:red; background:white;
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 30
h1 color : red;
selettore 1, selettore 2, … , selettore n { proprietà:valore; }
h2 color : red;
h1, h2 color:red;
Raggruppare selettori e regole
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 31
CSS interni ed esterni
• Un foglio di stile si dice ESTERNO se è definito in un file separato (file.css) dalla pagina HTML.
• Un foglio di stile di dice INTERNO quando il suo codice è inserito direttamente nella pagina HTML.
• I CSS possono essere collegati, incorporati o in linea
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 32
CSS collegati: mediante link<html>
<head>
<link rel="stylesheet" type="text/css” media=“screen” href="styleES1.css" /></head>
<body>
</body>
</html>
1. rel: descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet fogli di stile alternativi.
2. href: serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio.
4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 33
CSS collegati: mediante @import
<html>
<head>
<style>
@import url(styleES1.css);
</style>
</head>
<body>
</body>
</html>
Miglior modo per risolvere i problemi di compatibilità tra browser.
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 34
CSS incorporati<html>
<head>
<title>CSS INCORPORATI</title>
<style type="text/css">
body {
background: #FFFFCC;
}
.p1{
color:orange;
font-weight:bold;
}
</style>
</head><body></body></html>
.
Il foglio di stile è incorporato nella pagina HTML e non in un file esterno. Deve essere inserito all’interno del tag <head>.
La dichiarazione del foglio di stile è all’interno del tag <style>.
• attributo type obbligatorio
• attributo media opzionale
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 35
CSS in linea
La dichiarazione dello stile avviene all’interno dei singoli tag HTML mediante l’attributo style
Si perde buona parte dei vantaggi dati dall’uso dei CSS, ma possono essere utili in alcun casi particolari.
<h1 style="color: red; background: black;”> Titolo 1 </h1>
Tag HTML <h1>
Definizione del CSS in linea
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 36
<html>
<head>
<link rel="stylesheet" href=”styleES1.css" />
<style type="text/css">
.p2{
color:blue;
font-weight:bold;
}
</style><title>Struttura del documento</title>
</head>
<body>
<h1>Esempio uso dei fogli di stile: </h1>
<p class="p1">CSS collegato mediante file esterno</p>
<p class="p2">CSS incorporato</p>
<p style="color:red; font-weight:bold;">CSS in linea</p> </body></html>
Esempio dichiarazione CSS
CSS collegato via link
CSS incorporato
CSS in linea
Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 37
CSS: attributo MEDIAL’attributo MEDIA può accompagnare sia l’elemento LINK che l’elemento STYLE Si definiscono stili diversi per supporti diversi.
<link rel="stylesheet" type="text/css” media=“screen” href="styleES1.css" />
* all: il CSS si applica a tutti i dispositivi di visualizzazione.
* screen: valore usato per la resa sui normali browser web.
* print: il CSS viene applicato in fase di stampa del documento.
* projection: usato per presentazioni e proiezioni a tutto schermo.
* aural: da usare per dispositivi come browser a sintesi vocale.
* braille: il CSS viene usato per supporti basati sull'uso del braille.
* embossed: per stampanti braille.
* handheld: palmari e simili.
* tv: web-tv.
Recommended