Sistemi Di Elaborazione
Dell’informazione
Dott. Antonio Calanducci
Lezione XV: Cenni su CSS
Corso di Laurea in Scienze della Comunicazione
Anno accademico 2009/2010
wdwdwdwdwdw
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ù browser
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
2
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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:
-
• le
-
proprietà:valore
regole vengono associate ai tag HTML
tag { proprietà1:valore1; proprietà2:valore2; ... }
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
5
wdwdwdwdwdw
CSS: alcune proprietà
per lo sfondo
background-color
background-image
per il testo
font-style
font-weight
font-size
per i margini
margin-left
margin-right
margin-top
margin-bottom
font-family
text-align
text-transform
text-color
text-decoration
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
6
wdwdwdwdwdw
CSS: esempi di regole
body { 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; }
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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”>
<!-- regole CSS -->
</STYLE>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
8
wdwdwdwdwdw
Esempio
<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>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
9
wdwdwdwdwdw
HTML: albero dei blocchi
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
10
wdwdwdwdwdw
HTML: ereditarietà degli stili
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)
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
11
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
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>
il Class selector (selettore), definito tra le
regole è possibile associare lo stile ad uno o più tag e
blocchi
• Utilizzando
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
15
wdwdwdwdwdw
Classi: esempio
<HEAD>
<STYLE TYPE="text/css">
H1 { font-style:italic; }
.hot { color:red; textdecoration:underline; }
</STYLE>
</HEAD>
<BODY>
<H1> Primo titolo </H1>
<H1 CLASS="hot"> Titolo da
evidenziare </H1>
</BODY>
</HTML>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
16
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; texttransform:uppercase; }
</STYLE>
</HEAD>
<BODY>
<I ID="speciale">prende caratteristiche
definite nel selettore</I>
</BODY>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
17
wdwdwdwdwdw
Riferimenti
• CSS
-
http://css.html.it/
-
http://www.w3schools.com/css/css_reference.asp
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010
18
Scarica
