Sistemi Di Elaborazione Dell’informazionewdwdwdwdwdw A. Calanducci - Sistemi: Lezione XV -...

Sistemi Di Elaborazione Dell’informazione

Dott. Antonio CalanducciLezione XV: Cenni su CSS

Corso di Laurea in Scienze della ComunicazioneAnno accademico 2009/2010

wdwdwdwdwdw

A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010

Fogli di stile (CSS)• Cascade Style Sheets (CSS)

- servono per facilitare la creazione di pagine HTML con un aspetto uniforme

- permettono di separare il contenuto del documento dalla sua presentazione

- permettono di modificare il look & feel di un documento in modo efficiente

- applicare lo stesso stile a più pagine

- sorgente HTML più pulito

- migliore compatibilità con più browser2

wdwdwdwdwdw


CSS: blocchi• Ogni documento HTML può essere visto come un insieme di

blocchi (contenitori) a cui assegnare stili diversi

- i tag HTML definiscono i blocchi

3

wdwdwdwdwdw


CSS: <DIV> e <SPAN>• i tag <DIV> e <SPAN> permettono di delimitare blocchi

- <DIV> definisce una divisione o sezione della pagina

- <SPAN> definisce un elemento inline (sulla stessa linea)

• vengono spesso usati con l’attributi ID e CLASS per associare un nome(ID) al blocco o una class

4

wdwdwdwdwdw


CSS: regole• Un foglio di stile è un’insieme di regole stilistiche che

definiscono il look & feel degli elementi

• ogni regola è costituita da un elenco di proprietà, ciascuna formata da due parti:

- proprietà:valore

• le regole vengono associate ai tag HTML

- tag { proprietà1:valore1; proprietà2:valore2; ... }

5

wdwdwdwdwdw


CSS: alcune proprietà

6

per lo sfondobackground-colorbackground-image

per i marginimargin-leftmargin-rightmargin-topmargin-bottom

per il testofont-stylefont-weightfont-sizefont-familytext-aligntext-transformtext-colortext-decoration

wdwdwdwdwdw


CSS: esempi di regolebody { color:black; background:yellow; }

p { font-size:120%; font-style:italic; color:green; }

h1 { margin-left:10%; margin-right:10%; }

h2 { font-family: "Times New Roman", Arial; }

A:link { color:red; text-decoration:none; }

A:visited { color:blue; }

7

wdwdwdwdwdw


CSS: <STYLE>• Possiamo inserire le regole CSS in tre posizioni differenti

1. nell’header del documento (tra <HEAD></HEAD>

2. inline

3. in un file .CSS separato

1. usando il tag <STYLE> in questo modo (dentro <HEAD>):

<STYLE TYPE=”text css”>



</STYLE>

8

wdwdwdwdwdw


Esempio

9

<HTML><HEAD>

<STYLE TYPE="text/css">

H1 {color:blue; font-style:italic;}

H2 {color:red; font-style:italic;}

H3 {color:yellow; font-style:italic;}

B {color:green; font-style:italic;}

</STYLE>

</HEAD><BODY BGCOLOR="#ffffff"><CENTER><H1> Prova CSS per H1 </H1><H2> Prova CSS per H2 </H2><H3> Prova CSS per H3 </H3><B> Prova CSS per B </B></CENTER></BODY></HTML>

wdwdwdwdwdw


HTML: albero dei blocchi

10

wdwdwdwdwdw


HTML: ereditarietà degli stili

11

se si assegna uno stile a tutti i

paragrafi anche gli elementi in

essi contenuti erediteranno (a cascata) lo stesso stile (a meno di nuove definizioni più interne)

wdwdwdwdwdw


CSS: inline• <STYLE> può essere usato anche come attributo dei

tag HTML dentro il <BODY>

• Es:

<H1 STYLE="color:red; text-transform:capitalize;">

Prova CSS per H1

</H1>

• NB: qui non servono le parentesi graffe, ma si usano i doppi apici

12

wdwdwdwdwdw


CSS: file esterno• Il metodo migliore spesso è quello di scrivere le regole di

stile in un file esterno

- può essere così condiviso da file HTML diversi

- file in formato testuale, con estensione .CSS

- es: <stili.css>

- per indicare al doc HTML di usare gli stili definiti in file.css si usa il tag LINK nella sezione HEAD:

- <HEAD>

- <LINK REL=”stylesheet” TYPE=”text/css” HREF=”stili.css”>

- </HEAD>13

wdwdwdwdwdw


Regole a cascata• Un file HTML può importare più stili esterni

- se per lo stesso tag sono presenti più stili in file diversi, vengono applicate delle regole “a cascata”

- è difficile prevedere a priori come il browser risolverà i conflitti tra stili diversi

- in ogni caso, hanno la priorità le regole definite all’interno del documento

14

wdwdwdwdwdw


CSS: classi• permette di definire un’insieme di proprietà stilistiche da

poter assegnare a tag diversi

<HEAD>

<STYLE TYPE="text/css">

H1 { font-style:italic; }

.hot { color:red; text-decoration:underline; }

</STYLE>

</HEAD>

• Utilizzando il Class selector (selettore), definito tra le regole è possibile associare lo stile ad uno o più tag e blocchi

15

wdwdwdwdwdw


Classi: esempio

16

<HEAD>

<STYLE TYPE="text/css">H1 { font-style:italic; }.hot { color:red; text-decoration:underline; }</STYLE></HEAD><BODY>

<H1> Primo titolo </H1><H1 CLASS="hot"> Titolo da evidenziare </H1>

</BODY></HTML>

wdwdwdwdwdw


CSS: identificatori• permettono di definire delle regole che

si applicano ad un solo elemento in un documento

• attributo ID per dare un nome ad un blocco

<HTML><HEAD><STYLE TYPE="text/css">P { color:blue; }#speciale { color:red; text-transform:uppercase; }</STYLE></HEAD><BODY><I ID="speciale">prende caratteristiche definite nel selettore</I></BODY>

17

wdwdwdwdwdw


Riferimenti• CSS

- http://css.html.it/

- http://www.w3schools.com/css/css_reference.asp

18

http://css.html.it

http://css.html.it

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/css/css_reference.asp

Sistemi Di Elaborazione Dell’informazionewdwdwdwdwdw A. Calanducci - Sistemi: Lezione XV -...

Documents

Transcript of Sistemi Di Elaborazione Dell’informazionewdwdwdwdwdw A. Calanducci - Sistemi: Lezione XV -...