Corso  css, Appunti di Diritto di internet e dei social media. Università degli Studi della Campania Luigi Vanvitelli
marimi
marimi29 marzo 2016

Corso css, Appunti di Diritto di internet e dei social media. Università degli Studi della Campania Luigi Vanvitelli

PDF (1 MB)
59 pagine
434Numero di visite
Descrizione
corso di css3
20 punti
Punti download necessari per scaricare
questo documento
Scarica il documento
Anteprima3 pagine / 59

Questa è solo un'anteprima

3 pagine mostrate su 59 totali

Scarica il documento

Questa è solo un'anteprima

3 pagine mostrate su 59 totali

Scarica il documento

Questa è solo un'anteprima

3 pagine mostrate su 59 totali

Scarica il documento

Questa è solo un'anteprima

3 pagine mostrate su 59 totali

Scarica il documento
Corso di Web Programming - 5. Cascading Style Sheets (CSS)

Corso di Web Programming 5. Cascading Style Sheets (CSS)

Paolo Milazzo

Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/∼milazzo

milazzo di.unipi.it

Corso di Laurea in Informatica Applicata A.A. 2010/2011

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 1 / 59

Sommario

1 Introduzione ai CSS

2 CSS e HTML Usare CSS in HTML I tag <div> e <span>

3 La sintassi di CSS Definizione Alcune proprietà di base

4 Il modello visuale di CSS Il box model Il posizionamento degli elementi

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 2 / 59

Introduzione ai CSS (1)

HTML è nato con l’idea di descrivere i contenuti in maniera separata rispetto agli aspetti di presentazione

Le prime versioni dei browser permettevano agli utenti di definire l’aspetto dei vari elementi dei documenti HTML visualizzati (dimensione dei font, colori, ecc...)

Successivamente la diffusione e l’evoluzione dei siti web ha reso sempre più importante la gestione centralizzata degli aspetti di presentazione

HTML si è cos̀ı arricchito di tag e attributi tipografici che sono poi finiti anche nella definizione degli standard del linguaggio

La possibilità di visualizzare documenti HTML in dispositivi di natura diversa e l’interazione con le applicazioni hanno poi stimolato una separazione tra gli aspetti di contenuto e quelli di presentazione, favorendo la nascita di linguaggi di stile specializzati

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 3 / 59

Introduzione ai CSS (2)

Cascading Style Sheets (CSS) è il linguaggio di stile che, tra le numerose proposte, si è imposto come “compagno” standard di HTML

La particolarità di questo linguaggio è che prevede (e incoraggia) la presenza di fogli di stile multipli, che agiscono uno dopo l’altro in cascata

Questo permette di avere controllo sia da parte dell’autore che del lettore di un documento HTML (ogniuno di quali può applicare uno o più fogli di stile al documento)

Un’altra caratteristica vincente di CSS è l’indipendenza dall’insieme di elementi e attributi HTML

I si può usare con qualunque versione di HTML I si può usare anche con linguaggi di markup simil-HTML (tipicamente

XML)

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 4 / 59

Introduzione ai CSS (3)

Esistono diversi livelli di specifica di CSS:

CSS level 1 (1991): è un linguaggio di formattazione visiva. Permette di specificare caratteristiche tipografiche e di presentazione di ogni elemento di un documento HTML

CSS level 2 (1998): attualmente in versione 2.1, introduce il supporto ai media multipli (es. aural) e un linguaggio di layout sofisticato e complesso

CSS level 3 è ancora in fase di sviluppo e migliora/estende la gestione di layout sofisticati, colori, sfondi, bordi, animazioni, trasformazioni, etc...

Il supporto dei browser a CSS è complesso e difficile da realizzare. Attualmente, comunque, le versioni più recenti dei principali browser suportano abbastanza fedelemente la versione 2.1

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 5 / 59

Usare CSS in HTML (1)

CSS fornisce informazioni sull’aspetto di elementi di un documento HTML descritti tramite i tag

Un foglio di stile CSS è costituito da regole simili alla seguente:

p { font-family: Arial; font-size: 12pt; }

che stabilisce che tutti per visualizzare il contenuto di tutti i tag <p> nel documento deve essere usato font Arial di dimensione 12 punti

HTML 4 prevede che tutti i tag di un documento possano avere attributi id e class

I id deve essere associato ad un identificativo univoco di un’occorrenza di un tag nell’intero documento (non può essere ripetuto)

I class deve essere associato ad un identificativo di classe che può essere usato più volte nel documento

CSS può usare i valori di id e class per specificare che una regola si applica ad uno specifico elemento del documento o a tutti gli elementi della stessa classe (vedremo...)

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 6 / 59

Usare CSS in HTML (2)

Il concetto di cascata in CSS significa che regole successive che si possono applicare ad un elemento del documento HTML devono essere applicate in sequenza

Ad esempio, applicando in sequenza: I p { font-family: Arial; font-size: 12pt; } I p { color: red; font-size: 11pt; } I p { margin-left: 15pt; color: green; }

otterremo lo stesso risultato di I p { font-family: Arial; font-size: 11pt;

margin-left: 15pt; color: green; } Questa funzionalità è utile in particolare in due casi:

I Quando si prevede di applicare più fogli di stile (insiemi di regole) allo stesso documento HTML

I Quando si vogliono applicare regole generali (ad esempio a tutti i tag <p>) + regole specifiche per singoli elementi o classi (ad esempio a tutti i tag <p class="menu">)

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 7 / 59

Usare CSS in HTML (3)

HTML prevede l’uso di fogli di stile CSS in quattro modi diversi: I Posizionato direttamente nel tag di riferimento tramite l’attributo

style I All’interno di un tag <style> I Importato dal tag <style> I Indicato dal tag <link>

Vediamo degli esempi....

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 8 / 59

Usare CSS in HTML (4)

CSS posizionato direttamente nel tag di riferimento tramite l’attributo style:

<html> <head>

<title>Pagina di prova</title > </head> <body>

<h1 style="color:blue;">Questo titolo deve essere blu</h1> <p>Contenuto della pagina di prova</p>

</body> </html>

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 9 / 59

Usare CSS in HTML (5)

CSS all’interno di un tag <style>:

<html> <head>

<title>Pagina di prova</title > <style type="text/css">

h1 { color: blue; } </style>

</head> <body>

<h1>Questo titolo deve essere blu</h1> <p>Contenuto della pagina di prova</p>

</body> </html>

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 10 / 59

Usare CSS in HTML (6)

CSS importato dal tag <style>:

<html> <head>

<title>Pagina di prova</title > <style type="text/css"> @import url(extfile.css)

</style> </head> <body>

<h1>Questo titolo deve essere blu</h1> <p>Contenuto della pagina di prova</p>

</body> </html>

dove extfile.css è il seguente

h1 { color: blue; }

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 11 / 59

Usare CSS in HTML (7)

CSS indicato dal tag <link>:

<html> <head>

<title>Pagina di prova</title > <link type="text/css" rel="stylesheet" href="extfile.css">

</head> <body>

<h1>Questo titolo deve essere blu</h1> <p>Contenuto della pagina di prova</p>

</body> </html>

dove extfile.css è il seguente

h1 { color: blue; }

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 12 / 59

I tag <div> e <span> (1)

Con CSS si possono specificare regole di presentazione da associare a qualunque tag

Talvolta, però, si vorrebbero definire regole da applicare I ad un’intera porzione del documento HTML (che potrebbero includere

molti tag diversi), I o a un piccolo frammento di testo all’interno di un paragrafo (che

potrebbe non essere delimitato da un tag)

Per rendere possibile la definizione di queste regole in HTML sono stati definiti i tag <div> e <span>

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 13 / 59

I tag <div> e <span> (2)

Il tag <div> viene usato per delimitare un’area (anche rilevante) del documento HTML a cui applicare delle regole stilistiche comuni;

Esempi di utilizzo: I per suddividere il documento in sezioni, ogniuna delimitata da un bordo

colorato I per isolare l’area che contiene l’indice del sito in modo da posizionarla

alla sinistra della pagina

Il tag <span> viene usato per identificare un piccolo frammento (tipicamente di testo) all’interno di un paragrafo, una lista, una tabella, ecc...

Esempi di utilizzo: I Per creare un’effetto evidenziatore su singole parole o porzioni di frase

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 14 / 59

I tag <div> e <span> (3)

Tecnicamente, la differenza tra <div> e <span> consiste nel fatto che:

I <div> appartiene alla categoria degli elemento di tipo block (come i paragrafi, le tabelle, ecc...) , ovvero elementi che, se usati in sequenza, vengono visualizzati uno sotto l’altro con un po’ di spazio tra uno e l’altro

I <span> appartiene alla categoria degli elementi di tipo inline (come <strong>, <b>, ecc...), ovvero elementi che, se usati in sequenza, vengono visualizzati uno accanto all’altro

Gli attributi id e class potranno poi essere usati per differenziare le varie occorrenze di <div> e <span> nel documento e applicarvi regole di stile diverse

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 15 / 59

I tag <div> e <span> (4) Facciamo un esempio di uso di <div> e <span>:

<html> <head><title >Prova div e span</title ></head>

<style type="text/css"> div.titolo {

text -align: center; color: red;

} span#qp {

background -color: yellow; }

</style>

<body> <div class="titolo">

<h1>Titolo principale </h1> <h2>Sottotitolo </h2>

</div>

<div class="corpo"> <p>Questo &egrave; il corpo del documento in cui evidenziamo

<span id="qp">questa parte</span> tramite l’uso del tag span</p>

</div> <body>

</html>

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 16 / 59

I tag <div> e <span> (5)

Il risultato dell’esempio:

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 17 / 59

La sintassi di CSS (1)

Un foglio di stile CSS è costituito da una sequenza di regole

Ogni regola consiste di un selettore e di una o più dichiarazioni racchiuse tra parentesi graffe (e ogniuna terminata da “;”)

Ogni dichiarazione consiste di una proprietà ed un valore (separati da “:”)

selettore { proprietà1:valore1; proprietà2:valore2; ...}

Il selettore è solitamente il tag di cui la regola specifica l’aspetto

Le proprietà sono caratteristiche di stile che possono essere associate agli elementi. Sono definite dalla specifica di CSS e sono in tutto 53 per CSS level 1 e ben 121 per CSS level 2

I valori dipendono dalla proprietà a cui sono assengati...

p { font-family:Arial; font-size:12pt; }

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 18 / 59

La sintassi di CSS (2)

selettore { proprietà1:valore1; proprietà2:valore2; ...}

Il selettore può avere una delle seguenti forme:

Selettore di tipo. Un tag (senza parentesi <,>): body, p, table, div, span, . . .

Selettore di prossimità. Hanno tre forme: E F, E>F e E+F, dove E ed F sono tag. Significano che la regola si applica agli elementi F che siano discendenti (ossia contenuti), figli diretti o immediatamente seguenti ad elementi E

Selettore di attributi. E[attr] e E[attr=val]. Significano che la regola si applica agli elementi E in cui l’attributo attr è usato con qualunque valore o con valore specificato

...segue

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 19 / 59

La sintassi di CSS (3)

selettore { proprietà1:valore1; proprietà2:valore2; ...}

Il selettore può avere una delle seguenti forme:

Selettore di classe. Può avere due forme E.val e E#val, che corrispondono a E[class="val"] e E[id="val"]. Significano che la regola si applica a tutti gli elementi E in cui gli attributi class e id, rispettivamente, sono assegnati a val, Si può omettere E, e in questo caso la regola si applica a tutti gli elementi in cui class vale val, o all’elemento (unico) in cui id vale val, qualunque esso sia

Selettore di pseudo-classe. Può avere una delle seguenti forme: I E:first-child si applica all’elemento che è primo figlio di E (per ogni

occorrenza di E nel documento) I E:link e E:visited si applicano ai link non ancora o già visitato I E:hover, E:active e E:focus si applicano agli elementi solo quando

vi passi sopra il mouse, vi si clicchi sopra o l’elemento è selezionato

...segue Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 20 / 59

La sintassi di CSS (4)

selettore { proprietà1:valore1; proprietà2:valore2; ...}

Il selettore può avere una delle seguenti forme:

Selettore di pseudo-elementi. Può avere una delle seguenti forme: I E:first-line si applica alla prima riga di testo contenuta all’interno

di E I E:first-letter si applica alla prima lettera contenuta all’interno di E I E:before e E:after si possono usare per aggiungere qualcosa

(un’immagine, un testo,....) immeditamente prima o dopo l’elemento E

Selettore universale. Ha la forma * e si applica a tutti gli elementi del documento HTML

Raggruppamento di selettori. Indicando più selettori separati da virgole si ottiene che la regola viene applicata a tutti i selettori specificati

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 21 / 59

Un po’ di esempi (1)

Per fare un po’ di esempi consideriamo il seguente (body di) documento HTML

<body> <h1>Ricetta: la <span class="piatto">pasta al pomodoro </span></h1> <p>Vediamo ora come preparare un’ottima <span class="piatto">pasta

al pomodoro.</span> Innanzitutto , mettere a bollire in una pentola capiente abbondante acqua.</p>

<p>Tagliare a fettine sottili la <span class="ingr">cipolla </span> e soffriggerla con l’<span class="ingr">olio</span> in una padella fino a quando non sar&agrave; ben dorata. In seguito aggiungere i <span class="ingr">pomodori </span> e il <span class="ingr">basilico </span>.</p>

<p>Quando bolle l’acqua , salarla e versare gli <span class="ingr"> spaghetti </span>. Una volta che gli spaghetti sono cotti , scolarli e aggiungervi il sugo di pomodoro.</p>

</body>

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 22 / 59

Un po’ di esempi (2) Vediamo come il browser visualizza il documento HTML:

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 23 / 59

Un po’ di esempi (3)

Primo foglio di stile:

body { background -color: #CCFF88; font -family: sans -serif;

}

h1 { color: red; text -align: center;

}

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 24 / 59

Un po’ di esempi (4)

Secondo foglio di stile:

span.ingr { background -color: yellow;

} p:first -letter { font -size: 300%; float: left;

}

Paolo Milazzo (Università di Pisa) WebProg 5 - CSS A.A. 2010/2011 25 / 59

commenti (0)

non sono stati rilasciati commenti

scrivi tu il primo!

Questa è solo un'anteprima

3 pagine mostrate su 59 totali

Scarica il documento