Università degli Studi di Padova Facoltà di Lettere e...

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

/



3

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html


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/


• 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


5

http://www.w3.org/Style/CSS/�



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…


Indice:



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


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

/


Costruire una pagina Web



<html>

<head>

<title>Turismo a Padova</title>

</head>

<body>

</body>

</html>


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)



<html>

<head>


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


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



<p><a href=“http://www.padovanet.it/”>Padova</a> ha <strong>molti monumenti <em>famosi</em> e<em>importanti</em></strong>.</p>


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


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


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


Struttura di una pagina Web

La struttura di una pagina Web è gerarchica

struttura ad alberoHTML

HEAD

TITLE

BODY

P H2 H2

ASTRONG

<html>

<head>


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

… …

……


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


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


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.


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


I selettori: esempio


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”

http://www.lipsum.com/�


Indice:



CSS e pagine Web : seconda parte

Come è fatto un CSS Incorporare i CSS nelle pagine


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>



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


Come è fatto un CSS?

• Un CSS è formato da regole.

• Le regole sono formate 3 parametri:

• selettore

• proprietà

• valore

h1 color : red;

Selettore { proprietà : valore;}


Raggruppare selettori e regole

h1 color : red;

Selettore { proprietà:valore ; proprietà:valore; … ; }

h1 background : white;

h1 color:red; background:white;


h1 color : red;

selettore 1, selettore 2, … , selettore n { proprietà:valore; }

h2 color : red;

h1, h2 color:red;

Raggruppare selettori e regole


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


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.


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.


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


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


<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


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.

Università degli Studi di Padova Facoltà di Lettere e...

Documents

Transcript of Università degli Studi di Padova Facoltà di Lettere e...