3-CSS Novielli Da Uniba

CSS
Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html
CSS:
pagina web
Cascading Style Sheet
!! Tecnologia W3C per la definizione dello stile di una !! 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 lXHTML 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 un intero CSS in un documento XHTML
!! Embedded style sheets: consentono di incluedere !! 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 lunico CSS esterno
Inline styles
Nellesempio, lattributo style ridefinisce, nellambito del tag <p>, lo stile del testo, come mostrato nellimmagine
Embedded Style Sheets <style>

<style> viene incluso nellhead del documento e ne definisce lo stile Lattributo 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
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 lentit 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 nellhead 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">   <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 leffettiva 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 } Limmagine sar posizionata a partire dallangolo in alto a sinistra del documento (a zero pixel di distanza)
(2) Lo richiamo nel <body> per impostare la posizione dellimmagine bgimg.gif> <body> <img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" /> </body>
Posizionare gli elementi

Per controllare leffettiva 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 dellimmagine bgimg.gif> <body> <img src = "bgimg.gif" class = "bgimg" alt = "First positioned image" /> </body>
Effetto di z-index
Limmagine blu risulta in background (z-index:1) Limmagine 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 lordine di collocazione degli elementi nella pagina: attenzione ad evitare la sovrapposizione tra elementi! Esempio
Il posizionamento del testo nellesempio avviene rispetto allaltezza del font (la x-height del font) -> vediamo come
Posizionamento relativo
Luso di ex effettua il posizionamento di un oggetto rispetto allaltezza 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

documento
oggetto di definizione di propriet di stile con i CSS
!! utilizzato per raggruppare elementi inline in un !! 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
!! Nellesempio in figura, laspetto del background

rimane invariato anche se si scorre la pagina
Per definire la posizione di un oggetto posso combinare le keyword top, left, bottom, right
Definisco linclusione di unimmagine (background-image: logo.gif) nel background, la posizione (background-position: bottom right) leventuale ripetizione del background, che in questo caso non impostata (background-repeat: no-repeat) e il colore (background-color: #eeeeee)
Definisce limpostazione del rientro del paragrafo
Definisco linclusione di unimmagine (background-image: logo.gif) nel background, la posizione (background-position: bottom right) leventuale 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 alluso 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. rispetto a quello indicato come valore di float.
!! Il contenuto che circonda l'elemento scorrer intorno ad esso sul lato opposto
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 linterno del
bordo di un blocco e il resto del contenuto della pagina p { margin: .5em }
Padding
!! La propriet padding determina la distanza tra linterno del bordo
e il contenuto del blocco. margin-top, margin-right, margin-left e margin-bottom. Nellesempio 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)

3-CSS Novielli Da Uniba

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

3-CSS Novielli Da Uniba

Caricato da

Copyright:

Formati disponibili

CSS

Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html

Cascading Style Sheet

!! Regola generale: sempre consigliabile separare lo

!! buona norma validare un CSS prima di utilizzarlo

Come dichiarare lo stile di un documento

Embedded Style Sheets <style>

Embedded Style Sheets <style>

Embedded Style Sheets <style>

Definizione di style class

External Style Sheets

Collegare un CSS esterno

Uso degli stili definiti dal CSS esterno

Posizionare elementi: posizionamento assoluto

Posizionare gli elementi

Luso di ex effettua il posizionamento di un oggetto rispetto allaltezza del font minuscolo

!! un testo racchiuso tra <span></span> pu essere

oggetto di definizione di propriet di stile con i CSS

!! Una volta che il testo racchiuso in un tag <span>

!! A differenza di <spam> raggruppa elementi a livello

Es.: <div style="color:green"> ! <h3>This is a header</h3> ! <p>This is a paragraph.</p> </div>

!! Nellesempio in figura, laspetto del background

Definisce limpostazione del rientro del paragrafo

Dimensione degli elementi

Dimensione degli elementi

style = "width: 20%"

Box model e text flow

CONTENUTO Padding Border s

La linea tra i blocchi dovuta alluso del <div>

lo uso nel body

!! In caso i conflitti la direttiva valida quella pi

!! http://www.w3.org/ !! www.deitel.com/books/iw3htp4 (per il codice di

Potrebbero piacerti anche