CSS
Dott. Nicole NOVIELLI
[email protected]
http://www.di.uniba.it/intint/people/nicole.html
CSS:
Cascading Style Sheet
! Tecnologia W3C per la definizione dello stile di una
pagina web
! Contenuto e presentazione sono separati
Vantaggi:
! chi sviluppa il contenuto di un documento .html può
ignorare la definizione degli elementi di stile
! È possibile modificare completamente lo stile di un
documento web senza modificarne il contenuto,
semplicemente facendo riferimento ad un diverso
CSS
! Regola generale: è sempre consigliabile separare lo
la definizione dei contenuti e la definizione dello
stile di una pagina web
CSS validator
! Cosi come per l’XHTML anche per i CSS è possibile
fare riferimento a servizi di validazione
! È buona norma validare un CSS prima di utilizzarlo
per essere sicuri che sia correttamente eseguito
dalla maggior parte dei browser esistenti
jigsaw.w3.org/css-validator/
Come dichiarare lo stile di
un documento
! Inline styles: non è il modo migliore perché non
separa davvero la presentazione dal contenuto
! Embedded style sheets: consentono di incluedere
un intero CSS in un documento XHTML
! External style sheets: documenti esterni che
contengono esclusivamente regole CSS di
definizione dello stile
! Vantaggioso se si vuole uniformare lo stile di diverse
pagine web (ad es.: definizione dello stile di un intero
sito)
! Attua effettivamente la separazione tra stile e
contenuto: per modificare lo stile di tutte le pagine
del sito è sufficiente modificare l’unico CSS esterno
Inline styles
Nell’esempio, l’attributo ‘style’
ridefinisce, nell’ambito del tag
<p>, lo stile del testo, come
mostrato nell’immagine
c
Embedded Style Sheets <style>
<style>
viene incluso nell’head del
documento e ne definisce
lo stile
L’attributo ‘type’ definisce
il tipo di dati MIME
I CSS usano il tipo ‘text/
css’
‘em’, ‘h1’, ‘p’, ‘.special’
sono gli elementi per cui si
vuole definire lo stile
Embedded Style Sheets <style>
Embedded Style Sheets <style>
Definizione di style class
External Style Sheets
styles.css
/* External stylesheet */
body
{ font-family: arial, helvetica, sans-serif }
a.nodec { text-decoration: none }
a:hover { text-decoration: underline }
li em { font-weight: bold }
h1, em { text-decoration: underline }
ul
{ margin-left: 20px }
ul ul { font-size: .8em; }
I CSS esterni sono riusabili: questo riduce l’entità di lavoro del
programmatore di pagine web
La separazione tra contenuto e stile è una buona pratica da applicare
nello sviluppo di pagine web
Collegare un CSS esterno
Come per gli Embedded CSS, il collegamento va specificato nell’head del
documento .html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 5.5: external.html -->
<!-- Linking an external style sheet. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Linking External Style Sheets</title>
<link rel = "stylesheet" type = "text/css” href = "styles.css" />
</head>
<body>
...
</body>
</html>
Uso degli stili definiti dal CSS esterno
Avviene come per gli embedded
Posizionare elementi: posizionamento assoluto
Per controllare l’effettiva posizione (absolute positioning) degli oggetti in un
documento XHTML è possibile utilizzare la proprietà position degli oggetti nella
definizione di un foglio di stile
Definire la posizione assoluta di un oggetto significa impostarne la distanza dai
margini superiore (top), inferiore (bottom), sinistro (left) o destro (right)
Es.:
(1) definisco uno stile chiamato ‘bgimg’
.bgimg { position: absolute;
top: 0px;
left: 0px;
z-index: 1 }
L’immagine sarà posizionata a
partire dall’angolo in alto a
sinistra del documento (a zero
pixel di distanza)
(2) Lo richiamo nel <body> per impostare la posizione dell’immagine ‘bgimg.gif’>
<body>
…
<img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" />
…
</body>
Posizionare gli elementi
Per controllare l’effettiva posizione (absolute positioning) degli oggetti in un
documento XHTML è possibile utilizzare la proprietà position degli oggetti nella
definizione di un foglio di stile
Definire la posizione assoluta di un oggetto significa impostarne la distanza dai
margini superiore (top), inferiore (bottom), sinistro (left) o destro (right)
Es.:
(1) definisco uno stile chiamato ‘bgimg’
.bgimg { position: absolute;
top: 0px;
left: 0px;
z-index: 1 }
La proprietà ‘z-index’ definisce un
indice di sovrapposizione degli
elementi: elementi con z-index
superiore risultano sovrapposti ad
elementi con z-index superiore
(2) Lo richiamo nel <body> per impostare la posizione dell’immagine ‘bgimg.gif’>
<body>
…
<img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" />
…
</body>
Effetto di z-index
L’immagine blu risulta in
background (z-index:1)
L’immagine arancio le si sovrappone
nel livello immediatamente
superiore
(z-index:2)
Il testo è in foreground rispetto ad
entrambe (z-index:3)
z-index:1
z-index:2
z-index:3
Posizionamento relativo
Posizionamento di un elemento rispetto ad un altro elemento del documento
Il posizionamento rispetta l’ordine di collocazione degli elementi nella pagina:
attenzione ad evitare la sovrapposizione tra elementi!
Esempio
Il posizionamento del testo nell’esempio avviene rispetto all’altezza del
font (la x-height del font) -> vediamo come…
Posizionamento relativo
L’uso di ‘ex’ effettua il
posizionamento di un oggetto
rispetto all’altezza del font
minuscolo
<span>
! Non effettua cambi visuali nelle proprietà di un testo
così com’è ma effettua il ‘raggruppamento’ degli
elementi di testo contenuti nel suo scope
! un testo racchiuso tra <span></span> può essere
oggetto di definizione di proprietà di stile con i CSS
! È utilizzato per raggruppare elementi ‘inline’ in un
documento
! É un modo per individuare un frammento di testo o
parte di un documento
! Una volta che il testo è racchiuso in un tag <span> è
possibile modificarne proprietà di stile o manipolarlo
con script (ad es. con JavaScript)
<div>
! Anche il tag <div> consente di definire dei
raggruppamenti
! A differenza di <spam> raggruppa elementi a livello
di ‘blocco’ (block-level element)
Es.:
<div style="color:green">
! <h3>This is a header</h3>
! <p>This is a paragraph.</p>
</div>
Definire il background
! CSS consente di definire il background di blocchi di
elementi
! Nell’esempio in figura, l’aspetto del background
rimane invariato anche se si scorre la pagina
Definire il background
Per definire la posizione di
un oggetto posso combinare
le keyword ‘top’, ‘left’,
‘bottom’, ‘right’
Definisco l’inclusione di un’immagine (background-image: logo.gif) nel
background, la posizione (background-position: bottom right) l’eventuale
ripetizione del background, che in questo caso non è impostata
(background-repeat: no-repeat) e il colore (background-color: #eeeeee)
Definire il background
Definisce l’impostazione del
rientro del paragrafo
Definisco l’inclusione di un’immagine (background-image: logo.gif) nel
background, la posizione (background-position: bottom right) l’eventuale
ripetizione del background, che in questo caso non è impostata
(background-repeat: no-repeat) e il colore (background-color: #eeeeee)
Dimensione degli elementi
! È possibile definire, oltre al posizionamento, anche le dimensioni
effettive degli elementi inclusi nella pagina
<div style = "width: 20%">
Here is some text that goes in a box
which is set to stretch across twenty
percent of the width of the screen.
</div>
<div "width: 80%; text-align:
center”> Here is some CENTERED
text that goes in a box which is set to
stretch across eighty percent of
the width of the screen.
</div>
<div style = "width: 20%; height: 150px; overflow: scroll">
This box is only twenty percent ofthe width and has a fixed
height. What do we do if it overflows? Set theoverflow property
to scroll!
</div>
Dimensione degli elementi
! È possibile definire la dimensione degli elementi sia rispetto alla
percentuale di schermo occupata
style = "width: 20%"
! Sia rispetto alla sua larghezza o altezza assoluta (ad esempio rispetto
alla larghezza della dimensione del font). Se voglio definire un blocco
che è largo dieci volte la larghezza di un font minuscolo scriverò
style = "width: 10em"
Box model e text flow
! Box model: un ‘contenitore’ virtuale nel cui scope
ricadono tutti gli elementi definiti a livello di blocco
(raggruppamenti di tipo ‘block-level’)
CONTENUTO
Padding
Border
s
Border
Border-width, border-color e border-style consentono dimodificare i bordi
Posso anche definire lo stile di parte dei
bordi di un blocco (es. boder-top-color,
border-left-color…)
Border
Border-width, border-color e border-style consentono dimodificare i bordi
La linea tra i blocchi è dovuta all’uso del
<div>
Elementi ‘floating’
! float è una proprietà che consente di rimuovere un elemento dal normale
flusso del docuemento e spostarlo su uno dei lati (destro o sinistro) del blocco
a cui appartien.
! Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto
rispetto a quello indicato come valore di float.
Elementi ‘floating’
Elementi ‘floating’
<head>
<style type = "text/css">
…
div.floated { …
float: right;
…}
…
</style>
</head>
Definisco lo stile…
<body>
<div class = "section">
<div class = "floated">Corporate
Training and Publishing</div>
<p> Deitel Associates, Inc. is an
… Object Technology.</p>
</
div>
…</body>
… lo uso nel body
Margini
! La proprietà ‘margin’ consente di settare lo spazio tra l’interno del
bordo di un blocco e il resto del contenuto della pagina
p {…
margin: .5em
…}
Padding
! La proprietà ‘padding’ determina la distanza tra l’interno del bordo
e il contenuto del blocco. margin-top, margin-right, margin-left e
margin-bottom. Nell’esempio seguente la distanza è impostata pari
a .2em per tutti i margini interni
p {…
padding: .2em
…}
Eredità e conflitti
! Per la definizione degli stili è valido il concetto di
ereditarietà
! È possibile definire stili a partire da stili esistenti
! In questo caso, il nuovo stile eredità tutte le
proprietà dello stile ‘padre’
! In caso i conflitti la direttiva valida è quella più
specifica ed a livello gerarchico più basso
(ridefinizione degli attributi nello stile ‘figlio’)
Riferimenti
! Harvey M. Deitel and Paul J. Deitel, Internet & World
Wide Web: How to Program, Ed. Pearson International
Edition
! http://www.w3.org/
! www.deitel.com/books/iw3htp4 (per il codice di
esempio degli esercizi)
