biblioverifica ijf24 Festival Internazionale del Giornalismo 2024
Sistemi lezione xv - cenni su css
1. Sistemi Di Elaborazione
Dell’informazione
Dott. Antonio Calanducci
Lezione XV: Cenni su CSS
Corso di Laurea in Scienze della Comunicazione
Anno accademico 2009/2010
2. 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
3. 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
4. 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
5. wdwdwdwdwdw
CSS: regole
• Unfoglio di stile è un’insieme di regole stilistiche che
definiscono il look & feel degli elementi
• ogniregola è 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; ... }
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 5
6. wdwdwdwdwdw
CSS: alcune proprietà
per lo sfondo per il testo
background-color font-style
background-image font-weight
font-size
per i margini font-family
margin-left text-align
margin-right text-transform
margin-top text-color
margin-bottom text-decoration
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 6
7. 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
8. 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
9. 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
11. 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
12. 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
13. wdwdwdwdwdw
CSS: file esterno
• Ilmetodo 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
14. 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
15. wdwdwdwdwdw
CSS: classi
• permettedi 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
• Utilizzando
regole è possibile associare lo stile ad uno o più tag e
blocchi
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 15
16. wdwdwdwdwdw
Classi: esempio
<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>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 16
17. 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>
A. Calanducci - Sistemi: Lezione XV - Catania, 04/06/2010 17
18. 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
