CSS
Cascading Style Sheets
Il linguaggio per modificare
lo stile delle pagine per il
web
1
Fogli di stile - CSS
Servono per facilitare la creazione di pagine HTML
con un aspetto uniforme.
Permettono di separare il contenuto di un
documento da aspetti legati alla sua
presentazione.
Possiamo “dimenticare” alcuni tag e attributi
HTML.
2
Fogli di stile - CSS
3
Fogli di stile - CSS
Vantaggi
• Permettono di modificare il look & feel di un documento
in modo efficiente.
• Lo stesso stile può essere applicato a più documenti.
• Il sorgente HTML è più “pulito” e il download dei
documenti è più veloce.
• Si possono progettare pagine HTML per più browser.
4
Fogli di stile - CSS
Il Consorzio che si occupa della standardizzazione dei linguaggi
per il web (http://www.w3c.org) suggerisce di usare i CSS perché
facilitano la progettazione e la modifica delle pagine HTML.
1996, CSS1: servono per modificare l’aspetto degli elementi
nelle pagine HTML (colore, dimensione, caratteri…).
1998, CSS2: permettono funzioni più sofisticate e introducono la
possibilità di posizionamento per gli elementi nelle pagine HTML.
5
Livelli dei fogli di stile
I tre livelli dei fogli di stile (dal più basso al più alto)
•
inline (in linea)
•
a livello del documento
•
esterno
I primi si applicano al contenuto di un tag singolo.
I secondi all’intero documento.
I CSS esterni si applicano ad un numero arbitrario di documenti (tutti
quelli che includono il CSS).
Le regole di precedenza sono: inline, livello di documento, esterno.
•
Se un CSS esterno specifica un valore particolare per una proprietà in un certo
tag, questo valore viene usato finchè non venga specificato un valore diverso in
un CSS inline o a livello di documento.
6
CSS in linea
<style> può essere anche usato come attributo di altri tag HTML.
La forma generale è
style=“proprietà_1:valore_1; proprietà_2:valore_2; …; proprietà_n:valore_n”
Il raggio d’azione delle specifiche inline è ristretto al contenuto del tag in
cui appaiono.
<h1 style=“color:red; text-transform:capitalize;”>
Prova CSS per h1
</h1>
7
CSS a livello del documento
I CSS a livello del documento sono inseriti direttamente nel documento HTML tramite
l’elemento <style>.
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type=“text/css”>
<!-body{
background:#FFFFCC
}
-->
</style>
</head>
<body>…
Il codice inizia con l’apertura del tag <style>. Esso può avere due attributi:
•
type (obbligatorio)
•
media (opzionale)
8
CSS a livello del documento
L’attributo type indica al browser il tipo di specifica dello stile all’interno del tag
<style type=“text/css” …
Indica che il tipo è un CSS. L’attributo è necessario perché vi sono altri fogli di stile
che possono apparire nei tag <style> (ad es. quelli forniti da JavaScript).
L’attributo media (opzionale) permette di specificare vari dispositivi di visualizzazione
(monitor, stampanti, ecc.).
L’elenco delle regole del tag <style> appare in un commento HTML in quanto
contiene informazioni relative allo stile di presentazione dirette al browser e non
all’utente.
Ogni regola di stile in un elenco è costituita da due parti: un selettore che indica i tag
a cui viene applicata la regola ed un elenco di coppie valori-proprietà
elenco_nomi_tag{proprietà_1:valore_1; proprietà_2:valore_2; …;
proprietà_n:valore_n}
9
CSS a livello del documento
<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>
10
CSS esterni
Per caricare un CSS esterno in un documento la possibilità più
comune (e anche la più utilizzata) è quella che fa uso
dell’elemento <link>. La dichiarazione va sempre collocata
all’interno della sezione <head> del documento.
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel=“stylesheet” type=“text/css” href=“stile.css”>
</head>
<body>…
11
Fogli collegati
L’elemento <link> presenta una serie di attributi
• rel descrive il tipo di relazione fra il documento e il file
collegato. È obbligatorio. Per i CSS due sono i valori possibili:
stylesheet e alternate stylesheet
• href serve a definire l’URL assoluto o relativo del foglio di stile.
È obbligatorio
• type identifica il tipo di dati da collegare. Per i CSS l’unico
valore possibile è text/css. L’attributo è obbligatorio
• media: con questo attributo si identifica il supporto (schermo,
stampa, ecc.) cui applicare un particolare foglio di stile.
Attributo opzionale
12
CSS esterni
Il metodo migliore è quello di scrivere gli attributi di stile in
un file esterno, che può essere condiviso da più file HTML.
Il file che contiene gli stili deve essere un file in formato
testo (ASCII) con estensione .css.
file stile.css
h1
p
{color:red; text-transform:capitalize;}
{color:blue;}
13
Come è fatto un CSS: regole e
commenti
Esempio di CSS
• regole
• commenti (/* qui il commento */)
Un foglio di stile non è altro che
questo:
• Un insieme di regole, accompagnate,
volendo, da qualche nota di commento.
14
Come è fatta una regola
Una regola CSS è composta da due blocchi principali:
• Il selettore.
• Il blocco delle dichiarazioni.
Il selettore serve a definire la parte del documento cui verrà
applicata la regola.
• In questo caso, ad esempio, verranno formattati tutti gli elementi
<h1>: lo sfondo sarà rosso, il colore del testo bianco.
15
Come è fatta una regola
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due
parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono
sempre composte da una coppia:
•
proprietà
•
valore
•
La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, ecc.)
secondo il valore espresso.
•
Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da
rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà,
mentre è spesso possibile specificare più valori
{font:12px Verdana;}
16
I selettori
Una regola CSS viene applicata a un selettore.
• Semplice dichiarazione che serve a selezionare la parte o le parti di
un documento soggette ad una specifica regola.
• Vari tipi di selettore.
Selettore di elementi (type selector).
• È il più semplice dei selettori. È costituito da uno qualunque degli
elementi di HTML.
h1 {color:#000000;}
p {background:white; font:12px Verdana,Arial,sansserif;}
table {width:200px;}
17
Selettore di elementi (esempio)
body {
background:White;
font:12px Verdana,
Geneva, Arial,
Helvetica, sans-serif;
}
h1 {
background:silver;
color:black;
}
p{
color:Red;
}
<html>
<head>
<title>Selettore semplice</title>
<link href=“sel_type.css”
rel=“stylesheet”
type=“text/css”>
</head>
<body>
<h1>Selettore di elementi</h1>
<p>In questo CSS abbiamo usato
alcuni selettori di elementi.</p>
</body>
</html>
18
Le classi di stile
Le classi di stile possono essere utilizzate per permettere a occorrenze diverse dello
stesso tag di adottare specifiche di stile differenti contenute in un documento o in un
CSS esterno.
•
Per applicare due stili di un paragrafo ad un documento è possibile definire due classi nel tag
style
p.normal {elenco_valori_proprietà}
p.special{elenco_valori_proprietà}
All’interno del corpo del documento la particolare classe che viene scelta viene
specificata dall’attributo class nel tag corrispondente
<p class=“normal”>…</p> oppure
<p class=“special”>…</p>
Per applicare una classe di specifiche di stile al contenuto di più di un tag si può
ricorrere a una classe generica, definita da un nome privo del nome del tag
.italic {font-style:italic}
Nel corpo del documento si possono avere le seguenti righe
<h3 class=“italic”>Chapter 3</h3>
……
<p class=“italic”>…</p>
19
Le classi di stile
Nel file .css
h1 {font-style:italic;}
.imp {color:red; text-decoration:underline;}
Nel file .html
<body>
<h1>Primo titolo</h1>
<h1 class=“imp”>Titolo da evidenziare</h1>
<p class=“imp”>Paragrafo da evidenziare…</p>
…
</body>
</html>
20
Le proprietà e i valori di proprietà
Esistono diverse proprietà suddivise in sei
categorie:
• Di carattere.
• Di colore e sfondo.
• Di testo.
• Di caselle e layout.
• Degli elenchi.
• Dei tag.
21
Le proprietà di carattere
Sono proprietà che permettono di avere testi con caratteri,
stile, dimensioni differenti.
font-family: permette di specificare un elenco di nomi di
carattere
font-family: Arial, Helvetica, Courier
In questo caso il browser utilizzerebbe Arial (se lo supporta)
o in alternativa Helvetica o Courier.
• In caso di nome di carattere costituito da più di una parola si
usano le virgolette singole
font-family: ‘Times New Roman’
22
Le proprietà di carattere
font-size:10pt (valore assoluto in punti)
font-size:xx-small, x-small, medium (valore
relativo)
font-style:italic
font-weight:bold (normal, bolder, lighter)
Se si deve specificare più di una proprietà dei
font si usa:
font:bold 14pt ‘Times New Roman’
23
Le proprietà di elenco
Elenchi non ordinati
•
list-style-type può essere impostata a disc, circle, square o none (predefinito disc)
<h3>Some common single-engine aircraft</h3>
<ul style=“list-style-type:square”>
<li>Cessna Skyhawk</li>
<li>Beechcraft Bonanza</li>
<li>Piper Cherokee</li>
</ul>
<h3>Some common single-engine aircraft</h3>
<ul style=“list-style-type:square”>
<li style=“list-style-type:disc”>Cessna Skyhawk</li>
<li style=“list-style-type:square”>Beechcraft Bonanza</li>
<li style=“list-style-type:circle”>Piper Cherokee</li>
</ul>
Elenchi ordinati
•
list-style-type può essere impostata a decimal, upper-alpha, lower-alpha, upper-roman, lowerroman.
24
L’allineamento del testo
La proprietà text-align (possibili valori left, right,
center, justify) viene usata per posizionare il
testo orizzontalmente
p {text-align:right}
La proprietà float viene spesso impostata per
immagini e tabelle ed usata per specificare che il
testo “scorra” intorno agli elementi mobili. I
valori possibili per float sono left, right, none.
25
I margini
Le proprietà margin-left, margin-right,
margin-top, margin-bottom permettono di
impostare i margini intorno ad un
elemento HTML.
Esempio di gestione degli spazi intorno ad
una immagine
<img src=“prova.gif” style=“float:right; marginleft:0.35in; margin-right:0.35in” />
26
Il colore
La gestione del colore per i documenti web è abbastanza
“delicata”.
• Problemi legati alle prestazioni dei monitor a colori.
• I browser effettuano il rendering dei documenti gestendo i colori in
maniera differente l’uno dall’altro.
I documenti utilizzano tre insiemi di colori.
• Il set di colori più ridotto include solo quei colori di cui è garantita una
visualizzazione corretta da parte di tutti i browser e su tutti i monitor a
colori.
• Palette web (216 colori). Ok con i browser in ambiente Mac e Windows
(possibili problemi in ambiente Unix).
• Terzo insieme: 24 bit per colore (16 milioni di colori).
27
Il tag <span>
A volte è necessario applicare proprietà di carattere speciali
a porzioni di testo più piccole di un paragrafo (es. ad una
parola).
<p>It is sure fun to be in
<span>total</span> control of
text</p>
<p>It is sure fun to be in <span
style=“font-size:24pt; fontfamily:Arial;
color:red”>total</span> control of
text</p>
28
CSS
Molti manuali sono in rete, ad
esempio si veda http://css.html.it/
29
Scarica
