Slide CSS

(X)HTML + CSS
HTML vs XHTML
• Prologo distinto!
• Tag denotati sempre in minuscolo!
• Tutti i tag aperti devono essere chiusi!
• I valori degli attributi vanno sempre inclusi fra
coppie di virgolette. Es.: class=”pippo” !
• I tag di apertura privi di tag di chiusura si
denotano nel seguente modo: <tag />
Es.: <br />
Elementi Blocco vs elementi inline
Il tag SPAN
• Utilizzato molto frequentemente in
XHTML per applicare proprietà a porzioni
di testo.
<p> questo è un
<span> blocco di testo </span>
incluso in un paragrafo
</p>
Struttura di un documento (X)HTML
Codice (X)HTML Albero
<html> !
<head>
<title>
Struttura del documento
</title>
</head>
<body>
<h1>Titolo</h1>
<div> <p>Primo
<a href="pagina.html">
paragrafo
</a>
</p>
</div>
<p>Secondo Relazioni:!
<b>paragrafo</b>
</p> - Genitore-Figlio!
</body>
</html> - Antenato-Discendente
CSS + (X)HTML
Codice (X)HTML
definisce la struttura del !
documento
Codice CSS
definisce la presentazione del !
documento (foglio di stile)
Includere un foglio di stile in un
documento (X)HTML (1)
Modo 1: collegare un foglio di stile esterno
a un documento XHTML
Nell’intestazione (<head>... </head) del

documento (X)HTML specificare
<link rel="stylesheet" type="text/css"

href="nome-stile-da-includere.css" />
Modo II: includere un foglio di stile in un
documento XHTML
Nell’intestazione (<head>... </head) del

documento (X)HTML specificare
<style type="text/css">
... regole di stile ...
</style>
Modo III: fogli in linea ovvero modifiche
puntuali delle proprietà dei tag di un
documento XHTML
La dichiarazione avviene a livello dei singoli tag. La sintassi

generica è la seguente:
<tag style="regole_di_stile"> ... </tag>

oppure
<tag style="regole_di_stile" />
Sintassi regole CSS
• Il selettore serve a definire la parte del

documento su cui verrà applicata la regola!
• La proprietà definisce un aspetto

dell'elemento da modificare attraverso un
valore dato. !
• Ereditarietà delle proprietà

Selettori: selettore di elementi
• È costituito da un singolo tag (X)HTML

h1 {color: #000000;}
p {background: white;
font: 12px Verdana, arial, sans-serif;}
!
table {width: 200px;}
Selettori: selettore del discendente
• seleziona tutti gli elementi discendenti di un

altro elemento nell’albero (X)HTML
body p {color: green;}
<body>
A tutti i paragrafi del documento !

<p> <div> <p> si applica la proprietà color: green
<p>
Selettori: selettore del figlio
• seleziona tutti gli elementi figli di un altro

elemento nell’albero (X)HTML
(discendenza diretta o di I livello)
body > p {color: red;}
Solo ai paragrafi del primo livello !

si applica la proprietà color: green
Selettori: selettore dell’attributo
• seleziona gli elementi in base ai loro
attributi di un altro elemento nell’albero
(non molto supportato dai browsers)
a [ href ] {background: red;}
!
contiene attributo href
!
a [ href = "http://www.google.it" ] {color: red;}
contiene attributo href con valore http://www.google.it
!
img [ alt t= "foto" ] {margin: 10px;}
!
il valore dell’attributo alt contiene foto
!
img [ alt |= "figura" ] {margin: 10px;}
il valore dell’attributo alt inizia con la parola figura

Selettori: le classi
• permettono di applicare un insieme di
proprietà a tutti gli elementi (X)HTML che
le referenziano
In (X)HTML si deve referenziare la classe mediante attributo
class
<h1 class=”testorosso”> titolo </h1>
<p class=”testorosso”> blablabla </p>
Nel foglio di stile si deve definire la classe
.testorosso {color: red;

font: 14pt arial,sans-serif;}
Alcune pseudoclassi
a:link {color:red;} /* link non visitati */
a:visited {color:blue;} /* link visitati */
a:hover {color:yellow;} /* link sorvolati */
a:active {color:lime;} /* link attivi */
Disporre le definizioni in questo ordine, altrimenti le regole

a cascata possono non far attivare alcune delle pseudoclassi
Alcuni pseudoelementi
Lo pseudoelemento :first-letter si applica alla prima lettera
del contenuto di un elemento (e.g., un paragrafo)!
p:first-letter { font-size:34pt; color:red;}
Lo pseudoelemento :first-line si applica alla prima linea del

contenuto di un elemento (e.g., un paragrafo)!
p:first-line { font-size:34pt; color:red;}

Selettori: identificatori
• un’identificatore permette di applicare un
insieme di proprietà a un singolo elemento
(X)HTML che lo referenzia.
In (X)HTML si deve referenziare l’identificatore mediante
attributo id
<h1 id=”sfondoverde”> titolo </h1>
Nel foglio di stile si deve definire l’identificatore
#sfondoverde{background-color: green;}
Errore se aggiungo una linea di codice XHTML del tipo

<p id=”sfondoverde”> blablabla </h1>
Uso restrittivo di classi, pseudoclassi
e identificatori
E’ possibile restringere l’applicazione di classi identificatori e
pseudoclassi a specifici tag.
Esempi:
p.sfondoverde{background-color: green;}
div#sfondoverde{background-color: green;}
a:hover.sfondoverde{background-color: green;}
<p id=”sfondoverde”> blablabla </p>

Gestione colore
• la proprietà color permette di selezionare
il colore di primo piano
Valori possibili per color
black | navy | blue | maroon | purple | green | red |
teal | fuchsia | olive | gray | lime | aqua | silver |
yellow | white
oppure
Notazione rgb easecimale #RRGGBB
oppure
Notazione rgb rgb(RRR%,GGG%,BBB%)

Gestione sfondo
• la proprietà background-color definisce il
colore di sfondo
h1 {background-color:rgb(100%,0%,0%);}
• la proprietà background-image permette di

selezionare un’immagine di sfondo!
p {background-image:url(sfondo.gif);}
• la proprietà background-repeat permette di

ripetere l’immagine di sfondo. Valori: repeat,
repeat-x, repeat-y, no-repeat.
p {background-repeat:repeat-y;}
Gestione sfondo
• la proprietà background-position permette
di decidere la posizione dell’immagine di
sfondo. Valori: percentuali, unità di misura,
top, left, bottom, right.
body { background-image: url(back_400.gif);

background-repeat: no-repeat;
background-position: center center; }
• la proprietà background-attachment
imposta il comportamento dell’immagine di
sfondo rispetto agli elementi in primo piano.
Valori: scroll, fixed.
Gestione sfondo
• la proprietà background riassume le
proprietà precedenti
selettore {background: background-color

background-image
background-repeat
background-attachment
background-position;}
body { background: url(sfondo.gif)

repeat-x
fixed; }
Gestione testo
• la proprietà font-family definisce una lista
di font utilizzabili
h1 {font-family: arial, Verdana, sans-serif;}
• la proprietà font-size definisce la dimensione

del font
h1 {font-family: arial, Verdana, sans-serif;
font-size: 14mm; }
• la proprietà font-weight definisce il peso

del grassetto. Valori: 100,200,300...,900
font-weight: 900; }
Gestione testo
• la proprietà font-style lo stile del font.
Valori: normal, italic, oblique.
font-style:italic; }
• la proprietà line-height definisce l’interlinea.

Valori assoluti o con unità di misura.
p {font-family: arial, Verdana, sans-serif;
line-height: 1.5; }
• la proprietà font riassume le proprietà

precedenti
p {font: 700 12px/1.5 "Times New Roman",serif;}
Gestione testo
• la proprietà text-indent permette di indentare la
prima riga di un testo.Valori: unità di misura,
percentuale.
p {text-indent: 10mm;}
• la proprietà text-align permette allineare del testo.

Valori: left, right, center, justify
p {text-align: right;}
• la proprietà text-decoration descrive il tipo di

decorazione da aggiungere al testo. Valori:
underline, overline, line-through, none
Gestione testo
• la proprietà letter-spacing permette di definire lo
spazio fra i singoli caratteri.
p {letter-spacing: 10mm;}
• la proprietà word-spacing permette di definire lo

spazio fra le parole di un testo.
p {word-spacing: 3cm;}
Gestione elementi blocco: box model
Gestione elementi blocco: box model
• Proprietà margin-left, margin-right,
margin-top, margin-bottom
• Proprietà margin
Valori possibili (anche negativi) auto, valore percentuale,
valore con unità di misura
div {margin-left: 50px;}

!
p {margin: 10px 5%;}
!
img {margin-left: auto; /* centra un’immagine */
margin-right: auto;} /* rispetto al contenitore*/
Gestione elementi blocco: padding
• Proprietà padding-left, padding-right,

padding-top, padding-bottom
• Proprietà padding
Valori possibili (solo maggiori o uguali a 0) auto, valore
percentuale, valore con unità di misura
div {padding-left: 1cm;}

!
p {padding: 10mm 4px 3mm 6%;}
Gestione elementi blocco: i bordi
• Controllo del colore, spessore, stile dei
singoli bordi via
border-top-color, border-top-style,
border-top-width, border-bottom-color,
border-bottom-style, border-bottom-width,
border-right-color, border-right-style,
border-right-width, border-left-color,
border-left-style, border-left-width
Valori per lo stile del bordo:
none,hidden,dotted,dashed,solid,double,groove,
ridge,inset,outset
• Controllo del colore, spessore, stile dei 4
bordi via
selettore { border-width: <valori>;

border-style: <valori>;
border-color: <valori>; }
div { border-width: 1px 2px 1px 2px;

border-style: solid;
border-color: black red black red; }
• Controllo colore, spessore, stile dei 4 bordi

selettore {border: <spessore> <stile> <colore>;}
div { border: 10mm dotted blue;}

Gestione liste
• la proprietà list-style-image definisce

l’immagine da utilizzare come marcatore
delle voci della lista
ul {list-style-image: url(immagine1.gif);}
ol {list-style-image: url(immagine2.gif);}
!
li {list-style-image: url(immagine3.gif);}
Gestione liste
• la proprietà list-style-position definisce la
posizione del marcatore di voce di lista
rispetto al testo delle voci di lista. Valori:
outside, inside
• la proprietà list-style-type definisce il tipo di marcato

delle voci di lista.
Valori: disc, circle, square, decimal,
decimal-leading-zero, lower-roman,
upper-roman, lower-alpha, upper-alpha,
lower-greek
Gestione liste
• la proprietà list-style riassume le proprietà

precedenti.
<selettore> {list-style: <valore tipo>

<valore posizione>
<valore immagine>; }
!
ul li {list-style: outside url(immagine.gif);}
Gestione elementi
• la proprietà display cambia la natura di un

elemento.Valori comunemente utilizzati:
block, inline
img {display: block;}

Gestione elementi flottanti
• la proprietà float sposta un elemento sul

lato sinistro/destro del suo blocco
contenitore.Valori: left, right, none
img {float: left;}
• la proprietà clear impedisce che a fianco di

un elemento ci siano altri elementi con
proprietà float. Valori: left, right, both,
none
h1 {clear: left;}
Gestione elementi flottanti
Tableless layout
• È possibile strutturare un documento (X)HTML utilizzando i
blocchi <div> unitamente a un uso opportuno degli
identificatori CSS.
• L’idea è di associare ad ogni componente della struttura (area

principale, header, footer, barra di navigazione,...) un blocco
<div> il cui formato dipende da una o più regole CSS.
• Alcuni layout (strutture) possibili:!
• layout monolitico (rigido, fluido, elastico)!
• layout su due colonne (rigido, fluido, elastico)!
• ...
Layout monolitico
• un layout monolitico è composto da quattro sezioni: !
• Header (intestazione)!
• Menu Navigazione!
• Area contenuti!
• Footer
Layout monolitico (XHTML)
• Il codice XHTML di un layout monolitico può essere
specificato nel modo seguente:
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Layout monolitico fluido (CSS)
• Il codice CSS di un layout monolitico può essere di tipo
fluido: al variare delle dimensioni della finestra del browser
variano le dimensioni delle sezioni contenute nel layout. !
• non è necessario dimensionare i contenitori (fluido puro)

body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 12pt}
!
div#header{background-color: red;}
!
div#navigation{background-color:#00000}
!
div#content{padding:0 1.5mm;background-color:yellow;}
!
div#footer{padding:0.5mm; background-color:purple;
color:#00000; text-align:center;}
Layout monolitico rigido (CSS)
rigido: al variare delle dimensioni della finestra del browser
non variano le dimensioni del le sezioni contenute nel layout.
/* Esempio di layout monolitico rigido

ottimizzato per risoluzione 800x600 */
!
body{margin:0; padding: 0}
div#container{
width: 760px;
margin: auto; /*centra il container rispetto al
body */
text-align: left; /*allineamento a sx del container*/
}
div#header{background:red}
div#content{background:yellow;height:560px}
div#navigation{background:gray}
div#footer{background:blue}
Layout monolitico elastico (CSS)
elastico: la dimensioni del container è legata alla dimensione
del font (tramite l’uso dell’unità di misura em) layout. !
• 1em equivale alla larghezza della lettera M per il font

considerato. E’ un’ unità di misura relativa.!
body{
font-size: 12pt; /*dimensionamento del font */
}
div#container{
width: 50em; /* dimensionamento in em del container
principale */
margin: auto; /*centra il container*/
text-align: left; /*allineamento a sx*/
}
!
div#header{background:red;}
div#content{background:yellow}
div#footer{background:blue}
Layout a due colonne (XHTML)
• Il codice XHTML prevede le stesse sezioni del layout
monolitico (header, menu navigazione, content, footer). !
• Cambia il posizionamento del menu navigazione, che verrà

affiancato al content mediante opportune regole CSS.
<html>
<head>
...
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Layout a 2 colonne fluido/rigido
• Il codice CSS di un layout a 2 colonne può essere di tipo fluido: al variare
delle dimensioni della finestra del browser variano le dimensioni delle sezioni
contenute nel layout.!
• Possiamo applicare diverse modalità di layout (rigida, fluida, elastica) a colonne

diverse.
div#navigation{
float: right; /*sposta la sezione menu a dx del content */
width: 150px; /* colonna navigazione rigida */
}
!
div#container{
margin: 0px auto; /*centra il container */
text-align: left; /*ripristina l' allineamento*/
background:yellow
}
!
div#header{background:red;}
div#content{background:yellow}
div#footer{background:blue;clear:right}

Slide CSS

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

Slide CSS

Caricato da

Copyright:

Formati disponibili

(X)HTML + CSS

Nell’intestazione (<head>... </head) del

<link rel="stylesheet" type="text/css"

Nell’intestazione (<head>... </head) del

La dichiarazione avviene a livello dei singoli tag. La sintassi

<tag style="regole_di_stile"> ... </tag>

• Il selettore serve a definire la parte del

• La proprietà definisce un aspetto

• Ereditarietà delle proprietà

• È costituito da un singolo tag (X)HTML

• seleziona tutti gli elementi discendenti di un

body p {color: green;}

A tutti i paragrafi del documento !

• seleziona tutti gli elementi figli di un altro

Solo ai paragrafi del primo livello !

il valore dell’attributo alt inizia con la parola figura

Nel foglio di stile si deve definire la classe

.testorosso {color: red;

Disporre le definizioni in questo ordine, altrimenti le regole

Lo pseudoelemento :first-line si applica alla prima linea del

p:first-line { font-size:34pt; color:red;}

Errore se aggiungo una linea di codice XHTML del tipo

<p id=”sfondoverde”> blablabla </p>

Notazione rgb rgb(RRR%,GGG%,BBB%)

• la proprietà background-image permette di

• la proprietà background-repeat permette di

body { background-image: url(back_400.gif);

selettore {background: background-color

body { background: url(sfondo.gif)

• la proprietà font-size definisce la dimensione

• la proprietà font-weight definisce il peso

• la proprietà line-height definisce l’interlinea.

• la proprietà font riassume le proprietà

• la proprietà text-align permette allineare del testo.

• la proprietà text-decoration descrive il tipo di

• la proprietà word-spacing permette di definire lo

div {margin-left: 50px;}

• Proprietà padding-left, padding-right,

div {padding-left: 1cm;}

Valori per lo stile del bordo:

selettore { border-width: <valori>;

div { border-width: 1px 2px 1px 2px;

• Controllo colore, spessore, stile dei 4 bordi

div { border: 10mm dotted blue;}

• la proprietà list-style-image definisce

• la proprietà list-style-type definisce il tipo di marcato

• la proprietà list-style riassume le proprietà

<selettore> {list-style: <valore tipo>

• la proprietà display cambia la natura di un

img {display: block;}

• la proprietà float sposta un elemento sul

• la proprietà clear impedisce che a fianco di

• L’idea è di associare ad ogni componente della struttura (area

• Alcuni layout (strutture) possibili:!

• layout monolitico (rigido, fluido, elastico)!

• layout su due colonne (rigido, fluido, elastico)!

• non è necessario dimensionare i contenitori (fluido puro)

/* Esempio di layout monolitico rigido

• 1em equivale alla larghezza della lettera M per il font

• Cambia il posizionamento del menu navigazione, che verrà

• Possiamo applicare diverse modalità di layout (rigida, fluida, elastica) a colonne

Potrebbero piacerti anche