Upload
antonio-calanducci
View
799
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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”>
<!-- regole CSS -->
</STYLE>
8
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
HTML: albero dei blocchi
10
wdwdwdwdwdw
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
Riferimenti• CSS
- http://css.html.it/
- http://www.w3schools.com/css/css_reference.asp
18