CSS Cascading Style Sheet · CSS: Cascading Style Sheet ! Tecnologia W3C per la definizione dello...

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

c

Nell’esempio, l’attributo ‘style’ ridefinisce, nell’ambito del tag <p>, lo stile del testo, come mostrato nell’immagine

Embedded Style Sheets <style>

<style> viene incluso nell’head del documento e ne definisce lo stile

‘em’, ‘h1’, ‘p’, ‘.special’ sono gli elementi per cui si vuole definire lo stile

L’attributo ‘type’ definisce il tipo di dati MIME I CSS usano il tipo ‘text/css’

Definizione di style class

External Style Sheets

/* 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; }

styles.css

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

<?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">

  <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>

Come per gli Embedded CSS, il collegamento va specificato nell’head del documento .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)

.bgimg { position: absolute; top: 0px; left: 0px; z-index: 1 }

Es.: (1) definisco uno stile chiamato ‘bgimg’

<body> … <img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" /> … </body>

(2) Lo richiamo nel <body> per impostare la posizione dell’immagine ‘bgimg.gif’>

L’immagine sarà posizionata a partire dall’angolo in alto a sinistra del documento (a zero pixel di distanza)

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)

.bgimg { position: absolute; top: 0px; left: 0px; z-index: 1 }

Es.: (1) definisco uno stile chiamato ‘bgimg’

<body> … <img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" /> … </body>

(2) Lo richiamo nel <body> per impostare la posizione dell’immagine ‘bgimg.gif’>

La proprietà ‘z-index’ definisce un indice di sovrapposizione degli elementi: elementi con z-index superiore risultano sovrapposti ad elementi con z-index superiore

Effetto di z-index

z-index:1

z-index:2

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: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

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)

Per definire la posizione di un oggetto posso combinare le keyword ‘top’, ‘left’, ‘bottom’, ‘right’

Definire il background

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)

Definisce l’impostazione del rientro del paragrafo

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’)

s

Border

Padding

CONTENUTO

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)

CSS Cascading Style Sheet · CSS: Cascading Style Sheet ! Tecnologia W3C per la definizione dello...

Documents

Transcript of CSS Cascading Style Sheet · CSS: Cascading Style Sheet ! Tecnologia W3C per la definizione dello...