Storia dei fogli di stile
HTML non consentiva di separare la formattazione dal contenuto.
Codice HTML sempre più complesso e pasticciato
<blockquote>
<p align="center"><font color="#006600" size="5" face="Arial,
Helvetica, sans-serif"><strong><em>paragrafo
con formattazione all'interno dei tag </em></strong></font></p>
</blockquote>
Il W3C interviene per mettere un po’ di ordine
Nel 1996 definizione dei fogli di stile (CSS Level 1 o CSS-1)
Nel 1998 aggiorna le specifiche: CSS-2
CSS: Cascading Style Sheets
1.
2.
3.
4.
Specifiche del formato del documento
tramite un linguaggio
Come modelli .dot di Word
Separazione del formato dal contenuto
Differenza con html: necessita di un tag
iniziale e finale per delimitare box dove
agisce lo stile
Vantaggi dei CSS
Separazione stile-contenuto
Contenuto con il minimo di struttura necessario
Stili specificati a parte
Possibilità di applicare lo stesso stile a più contenuti
Possibilità di riutilizzo di uno stesso contenuto con stili
diversi
Aderenza agli standard
Maggiore durata nel tempo del progetto
Maggiore compatibilità
Facilità di manutenzione
Maggiore controllo stilistico
Facilità di manutenzione
- I fogli di stile possono essere globali per il sito
Le regole stilistiche stanno in un posto solo e sono utlizzate da
tutte le pagine del sito
- Facilità di sviluppo e gestione
Più facile sviluppate siti consistenti dal punto di vista visuale
Facilità nella manutenzione del sito: se si vuole cambiare uno
stile si cambia in un posto solo
- Codice HTML semplificato e pulito
Eliminando tag e rientri forzati con decine di
Maggiore chiarezza sull’interpretazione da parte dei browser
- Visualizzazione delle pagine più rapida
Evitando tabelle annidate
Riducendo il peso dei file
Maggiore controllo stilistico
Con i fogli di stile si riescono a controllare aspetti stilistici che non
si possono controllare in altro modo
Le famiglie di tipi (font, dimensioni, interlinea)
La sottolineatura dei link
La possibilità di HOVER sui link
Divisione della pagina in sezioni (div, span) con stili diversi
Controllo di margini e bordi
I colori, gli sfondi
atro ...
- In HTML si puo' specificare il formato delle
singole istanze di elementi del documento ma
non di un tipo di elemento (es. H1,H2,ecc.)
<H1><FONT face="helvetica" color="blue“
size="+4">CAPITOLO 1</FONT></H1>
- CSS permette di dare specifiche di formato
per tutte le occorrenze di un elemento come
H1:
<STYLE>H1 {color: blue; background: red} </STYLE>
REGOLE CSS:
elemento html
selettore
<STYLE> H1 {color: blue; background: red} </STYLE>
attributo
valore
Fogli di stile esterni
Passi da seguire:
1. Si crea il foglio di stile
2. Si salva con estensione .css (es stile.css)
3. Nella sezione head della pagina HTML a cui vogliamo
applicare lo stile:
<head>
…
<link rel="stylesheet" type="text/css"
href="stile.css">
…
Nome del file
</head>
css esterno
Fogli di stile incorporati(embedded)
Se vogliamo definire uno stile che vale solo per il documento:
<head>
…
<style type="text/css">
<!-body {margin: 0;
font-family: helvetica, arial, sansserif
}
-->
</style>
</head>
I commenti servono per i browser che non
supportano i CSS e per evitare
l’indicizzazione da parte dei motori di
ricerca
Fogli di stile in linea (inline)
Per cambiare gli stili localmente in una porzione di un
documento
Supponiamo che lo stile del documento preveda il tipo
Arial, dimensione 12px, di colore nero …
<p style="color: red; font-style:
italic">
Questo è importante e lo voglio
mettere
in rosso e in corsivo!!
</p>
Tre modi di usare gli stili
•
IN LINEA All’interno dei tag:
<h1 style="font-color:red;font-size:12px">testo</h1>
Con i CSS si adoperano due TAG con lo scopo di fare da "contenitore”
<div></div> e <span></span>
Avrei potuto ottenere la stessa cosa usando un contenitore <div> a questo
modo:
<div style="font-color:red;font-size:12px"> testo </div>
INCORPORATI In una dichiarazione nel tag <head>
<head>
<title>La mia pagina web</title>
<style type="text/css">
<!-body,td{
font-family: Arial, Helvetica, sans-serif;
}
-->
</style></head>
ESTERNI In un foglio di stile associato a più pagine
File separato
<head>
<title>pagina web</title>
<link href="style.css" rel="stylesheet" type="text/css“ />
</head>
Il vantaggio dei CSS esterni
Sito web
CSS
h1 {
color:red
}
Titolo
Titolo
1
Un file di formattazione per tutto il sito
File con foglio di stile esterno:
<HTML><HEAD>
<LINK rel="stylesheet" type="text/css"
href="stile.css">
<HEAD> ...
Lo stesso documento apparira' in formati diversi a seconda
del foglio di stile collegato
Utenti con esigenze diverse e mezzi diversi di
visualizzazione
Formato aziendale per un sito
Il contenuto di uno style sheet:
valori e unità di misura
Colori
Con nome: red, gray, purple
Con i livelli RGB:
h1 { color: rgb(75%,60%,20%) }
Codice esadecimale
h1 { color: #ff0011 }
Unità di misura
Valori percentuali
Assolute: cm, mm, pt, pc
h1 { font-size: 12pt }
Relative: em, ex, px
h1 { font-size: 0.1em; line-height: 14px }
URL
#header { background-image: url(logo.gif) }
Esempio di cascata di stili
<HTML>
<HEAD>
<STYLE TYPE="text/css">
p {font-size:24pt;color:green;
border-width:thick;border-style:ridge;
border-color:red}
p.red {color:red}
</STYLE>
</HEAD>
<BODY>
<p class="red">Pippo</p>
<div style="background:orange;border-color:green">
<p>Pluto</p>
<p class="red" style="font-size:12pt;
background:yellow">Topolino</p>
</div>
</BODY>
<HTML>
Elementi di formattazione
Box top
Box left
Margin Space
Element height
Border Space
Box
height
Padding Space
ContentSpace
Element width
Box width
Concetti Base: Il box model
top margin
top border
top padding
left
left
border padding
content
high
left
margin
width
bottom padding
bottom border
bottom margin
right
padding
right
border
right
margin
Esempio di posizionamento:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#aposition{position:relative;left:30;top:20}
a {color:red}
p {font-size:24pt;color:green;border-width:thick;
border-style=ridge;border-color=red}
p.red {color:red}
</STYLE>
</HEAD>
<BODY>
<p class="red">Pippo</p>
<div style="background:orange;border-color=green;
position:absolute;left:100;top:150">
<p style="padding-left:20;margin:20">Pluto</p>
<span id="aposition">
<p class="red" style="font-size:12pt;
background-color:yellow">Topolino</p>
</span>
</div>
</BODY>
</HTML>
Elementi di formattazione
color:color
background-color:color
background-image:url
font-family:name
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|
larger|smaller|absoluteSize|relativeSize|percentage|lenght
font-style:normal|italic
font-weight:bold|bolder|lighter|normal|100|200|...|800|900
Elementi di formattazione
line-height:normal|length|percentage
text-align:left|center|right|justify
text-decoration:blink|line=through|overline|underline
text-indent:lenght|percentage
text-transform:none|capitalize|uppercase|lowercase
Elementi di formattazione
border-bottom-width,border-top-width,
border-right-width,border-left-width:thin|medium|thick|n
border-color:color
border-style:double|groove|none|inset|outset|ridge|solid
border-width:thin|medium|thick|length
margin:thickness thin thick
margin-bottom,margin-left,margin-right,margin-top :thickness
padding :thickness
padding-bottom,padding-left,padding-right,padding-top :thickness
Posizionamento elementi HTML
HTML visualizza elementi uno di seguito all'altro in base
a occorrenza nel documento
DHTML permette di posizionare un elemento dove
si vuole nel documento
Posizionamento assoluto e relativo
Primi e secondi piani
Possibilita' di cambiare posizione agli oggetti
Proprieta' di posizionamento:
top: y
left: x
width: ampiezza
height: altezza
z-index: profondita'
posizion: tipo di riferimento x y
clip: area visualizzata
visibility: visualizzazione o meno
float: posizionamento immagine slegata da testo
Esempi di posizionamento
<div style="position: absolute; top: 100px;
left=10%;z-index: 0">sono qui
<div>
<style>.logo {position: absolute; top: 100px;
left=10%}</style>
<div class="logo"><img src="file.gif"></div>
Assoluto e relativo hanno significato
rispetto ad un contesto:
<div>inizio contesto<span style="top: 50px;
left:50px; position: ...">span assoluto</span>fine
contesto</div>
inizio contesto fine contesto
span assoluto
inizio contesto
fine contesto
span relativo
Wrapping text on an element
<P> Un testo molto molto molto molto molto molto lungo.
Un testo molto molto molto molto molto molto lungo.
<SPAN STYLE=“float:right; width:120”>
<IMG SRC=“UrlOfMyImage.gif” height=“90” width=“120”>
</SPAN>
Un testo molto molto molto molto molto molto lungo.
Un testo molto molto molto molto molto molto lungo
</P>
Elementi di formattazione - liste
<LI>
<OL>
line-style:decimal|lower-alpha|lower-roman|upper-alpha|upper-roman
<UL>
line-style:circle|disc|square
Fine
Come si applica uno stile CSS
-1
- Si ridefinisce ogni singolo tag
h1 { color: red; }
h2, h3, h4 { color: green; font-family: serif; }
p { color: black; }
body { color: blue; }
- Si assegna una “class”
.contenuto { margin: 5px; }
h1.pagina { padding: 6px; }
----------------------<h1 class="pagina">Titolo</h1>
<p class="contenuto">Mio contenuto</p>
- Si ridefinisce un “id”
#header { background-color: red; }
----------------------<div id=“header”><img src=“logo.gif” /></div>
EREDITARIETA':
se un elemento non specifica una certa
proprieta' del formato, questa viene
ereditata dagli elementi sovrastanti
<div style="color:blue; font-style:italics">Testo
<span style="back: red">rosso</span>
</div>
Testo rosso
(Attenzione a background)
EREDITARIETA':
valori relativi a contesto
<div style="font-size: 20pt; font-weight: bold; color:
red">Testo
<span style="font-size: 80%; font-weight:
lighter">piu' piccolo</span>
</div>
Testo piu' piccolo
Ordinamento elementi: documento forma
un albero in base all'inclusione degli
elementi:
<body><h1>Capitolo <em> Uno</em>
</h1><div>Testo del capitolo</div>
</body>
em
h1
body
div
Descrittori
elemento HTML:
H1 {color: blue}
classe: si specifica le proprieta' di una
classe a cui possono appartenere le
occorrenze dei diversi elementi:
.italico {font-style: italic}
<div class="italico">Testo italico</div>
Combinazione di descrittori:
elementi annidati:
LI LI {font-size: smaller}
H1 DIV {font-size: smaller}
(Attenzione! L1, H1 {color: blue} e' un grouping)
classi limitate ad elementi:
h1.italico {font-style: italic}
<h1 class="italico">Capitolo italico</h1>
<h1>Capitolo normale</h1>
Identificatore unico: #nome
#qui {color: red}
<div id="qui">Testo identificato</div>
Permette di riferirsi ad una istanza tramite
Javascript: crea un oggetto nel DOM
Attenzione: se non e' unico si genera errore: "oggetto
non esistente"
Pseudoclassi:
p:first-letter {fontsize: 150%}
a:link {color: red}
a:visited {color: blue}
Javascript e Cascading Style
Sheets
Controllo proprieta' di stile per mezzo di
javscript
Creazione di effetti di movimento,
apparizione, visualizzazione parziale,
scrittura testo
Leggere differenze fra Netscape 4.0x e
Internet Explorer 4
ESTENSIONE MODELLO OGGETTI
Javascript si riferisce alle occorrenze di
elementi tramite gli identificatori unici:
<div id="io">testo</div>
In Netscape:
document.layers["qui"].color='blue';
in Explorer:
document.all.qui.style.color='blue';
ESEMPIO: oggetto che scompare
<div id="timido">
<a onMouseOver=
"javascript:document.layers['timido'].visibility=
'hidden';">Non avvicinarti</a><div>
<script language="javascript">
function movedown(layername){
document.layers[layername].top+=10;}
</script>
N.B.: codice per Netscape 4
CODICE COMPATIBILE CON N e IE:
var layerRef="", styleSwitch="";
function init(){
if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
}else{
var layerRef="document.all";
var styleSwitch=".style";}}
.style
document.layers
eval(layerRef
+ '["' + layername + '"]' + styleSwitch
+ '.'document.all
+ property + "=" + value);
argomenti
ESEMPIO:
<script language="javascript">
function setproperty(layername, property, value){
eval(layerRef + '["' + layername + '"]' +
styleSwitch + '.' + property + "=" + value);}
function movedown(layername){
eval(layerRef + '["' + layername + '"]' +
styleSwitch + '.top+=10');}
</script>