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

CSS - Dipartimento di Ingegneria dell`Informazione