Cascading style sheets
Sintassi
La sintassi dei fogli di stile è realizzata in tre parti: un elemento,
una proprietà e un valore secondo questa regola:
ELEMENTO {proprietà: valore}
L’elemento è normalmente il tag HTML al quale si vuole applicare
uno stile.
Per esempio:
BODY {color:black}
Indica che tutto il testo della pagina sarà di colore nero
1
Lezione 6
Cascading style sheets
Sintassi
Quando una proprietà ha un valore composto da più attributi questi
devono essere racchiusi tra virgolette, per esempio
P {font-family: “sans serif”}
Si possono assegnare più proprietà allo stesso elemento ma queste
devono essere separate da “;”, per esempio:
P {color: red;
font-family: “times new roman”
}
2
Lezione 6
Cascading style sheets
Sintassi
Si può definire lo stesso stile per più di un elemento, bisgona però
separare gli elementi con delle virgole, per esempio:
H1, H2 {color: red}
Ad una stessa proprietà possono corrispondere più valori, il browser
in questo caso riconoscerà come valida la prima che è in grado di
riconoscere, per esempio:
P {font-family: “sans serif”, courier, arial }
3
Lezione 6
Cascading style sheets
Inserimento delle pagine di stile
Pagine esterne
Una pagina di stile esterna è la soluzione migliore quando lo stile
viene applicato a più di una pagina. Questo permette di modificare
l’aspetto di un sito web modificando solo la pagina di stile.
La sintassi per inserire una pagina esterna, per esempio la pagina
mystyle.css è la seguente:
<HEAD>
<LINK rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</HEAD>
4
Lezione 6
Cascading style sheets
Inserimento delle pagine di stile
Pagine interne
Una pagina web interna può essere usata quando un singolo
documento deve avere un proprio stile.
Per inserire uno stile in una singola pagina si usa il tag STYLE tra i
tag HEAD come di seguito:
<HEAD>
<STYLE type=“text/css”>
H1 {color: red}
P {margin: 20px}
</STYLE>
5
Lezione 6
Cascading style sheets
Inserimento delle pagine di stile
Stili inline
Per usare gli stili inline si usa l’attributo STYLE nel tag di cui si vuole
modificare l’aspetto come di seguito:
<P STYLE=“color: red”>
</P>
Uno stile inline perde molti dei vantaggi delle pagine di stile.
Va usato solo quando uno stile deve essere applicato ad un solo
elemento una sola volta.
6
Lezione 6
Cascading style sheets
Ordine di inserimento
Quale stile viene usato quando siamo in presenza di più di uno stile
per un elemento?
Tutti gli stili seguono sempre questa priorità:
1. Stili inline
2. Pagina di stile interna (definita nel tag HEAD)
3. Pagina di stili esterna (definita nel file .css)
7
Lezione 6
Cascading style sheets
L’attributo media
Grazie ad esso siamo in grado di impostare un foglio di stile per ogni
supporto su cui la nostra pagina verrà distribuita. Una possibilità
davvero interessante e che andrà sempre più diffondendosi con
l'ampliarsi dei mezzi di diffusione delle pagine (X)HTML.
Dove prima c'era unicamente un browser, domani potranno sempre più
esserci palmari, cellulari e altri dispositivi. Per non parlare dei software
usati da disabili come i browser vocali. Ciascuno di questi supporti
presenta caratteristiche diverse in termini di memoria, ampiezza dello
schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è
praticamente impossibile, oltre che controproducente. La soluzione
ideale sta quindi nella creazione di fogli di stile ad hoc.
8
Lezione 6
Cascading style sheets
L’attributo media
L'attributo media può accompagnare sia l'elemento <LINK> che l'elemento
<STYLE>. Ecco due esempi di sintassi:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<style type="text/css" media="screen">...</style>
Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori
possibili per l'attributo:
1. all. Il CSS si applica a tutti i dispositivi di visualizzazione.
2. screen. Valore usato per la resa sui normali browser web.
3. print. Il CSS viene applicato in fase di stampa del documento.
4. projection. Usato per presentazioni e proiezioni a tutto schermo.
5. aural. Da usare per dispositivi come browser a sintesi vocale.
6. braille. Il CSS viene usato per supporti basati sull'uso del braille.
7. embossed. Per stampanti braille.
8. handheld. Palmari e simili.
9. tty. Dispositivi a carattere fisso.
10.tv.Web-tv.
9
Lezione 6
Cascading style sheets
L’attributo media
L'uso più tipico dell’attributo media consiste nel collegare al documento
vari fogli di stile adatti a ciascun supporto. Lo user agent che
visualizzerà la pagina sarà in grado, se conforme agli standard, di
caricare quello giusto:
<link rel="stylesheet" type="text/css" media="screen"
href="screen.css" />
<link rel="stylesheet" type="text/css" media="print, tv, aural"
href="print.css" />
10
Lezione 6
Cascading style sheets
Proprietà singole e a sintassi abbreviata
Nelle definizione delle regole è posssibile fare uso di proprietà singole
e proprietà a sintassi abbreviata. Con questa espressione
traduciamo il termine inglese shorthand properties reso spesso, alla
lettera, con il termine scorciatoie.
Le proprietà singole sono la maggior parte: impostano per un dato
elemento o selettore un singolo aspetto.
Con le shorthand properties, è possibile invece definire con una sola
dichiarazione un insieme di proprietà.
11
Lezione 6
Cascading style sheets
Fogli di stile alternativi
In un singolo documento è possibile collegare più fogli di stile.
Gli autori della specifica (X)HTML hanno esplicitamente previsto questo
scenario introducendo due valori possibili per l'attributo rel all'interno
dell'elemento <LINK>:
1. stylesheet
2. alternate stylesheet
Il primo identifica il foglio di stile che servirà a formattare normalmente
il documento, diciamo il CSS di default. Il secondo identifica un CSS
come alternativo rispetto a quello standard. Ecco un esempio di codice:
<link rel="stylesheet" type="text/css" href="stile.css" />
<link rel="alternate stylesheet" type="text/css"
href="stile_alternativo.css" />
Sta all'autore implementare un sistema che consenta all'utente di scegliere dinamicamente
lo stile alternativo sostituendolo al primo. La via più semplice è di farlo con un semplice
Javascript in grado di intervenire su proprietà e attributi dell'elemento <LINK>
12
Lezione 6
Cascading style sheets
Proprietà singole e a sintassi abbreviata
Esempio:
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a
quelli adiacenti. È possibile definire per ciascuno di essi un valore
usando quattro proprietà singole separate:
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
La regola sarebbe questa:
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}13
Lezione 6
Cascading style sheets
Proprietà singole e a sintassi abbreviata
Lo stesso risultato si può ottenere usando la proprietà a sintassi
abbreviata margin:
div {margin: 10px 5px 10px 5px;}
Oppure
div {margin: 10 px}
14
Lezione 6
Cascading style sheets
Proprietà dello sfondo
Le proprietà di sfondo permettono di controllare il colore (o l’immagine)
di background della pagina web.
15
Proprietà
Valori
ammessi
Descrizione
backgroundcolor
Nome, valore,
RGB, valore
esadecimale
Red, rgb(255,
0, 0)
#000000,
Trasparent
Colore
trasparente
Lezione 6
Permette di
impostare il
colore di
sfondo
Cascading style sheets
Proprietà dello sfondo
Esempio:
body {
background-color: #6ACC00;
}
16
Lezione 6
Cascading style sheets
Proprietà dello sfondo
17
Proprietà
Valori ammessi
background-image
1. url dell’immagine Permette di
2. none (nessuna
impostare una
immagine
immagine di sfondo
background-repeat
1. Top left
2. Top center
3. Top right
4. Center left
5. Center right
6. Center center
7. Bottom left
8. Bottom right
9. Bottom center
10.-x, -y
11.No-repeat
Lezione 6
Descrizione
Permette scegliere
come ripetere
l’immagine di
sfondo
Cascading style sheets
Proprietà dello sfondo
Proprietà
Valori ammessi
Descrizione
backgroundattachment
1. Scroll (si muove
con il testo)
2. Fixed (immagine
fissa)
Indica se l’immagine
di sfondo è fissa o so
muove con la pagina
18
Lezione 6
Cascading style sheets
Proprietà dello sfondo
Esempio:
body {
background-image: url(halloween.jpg);
background-repeat: no-repeat;
background-position: left;
background-attachment: scroll;
}
19
Lezione 6
Cascading style sheets
Proprietà del testo
Le proprietà del testo permettono di scegliere uno stile per il testo, una
dimensione, un colore ecc..
Proprietà
Valori ammessi
Descrizione
color
1. Rgb, esadecimale, nome
colore
Imposta il colore di un testo
letter-spacing
1. Normal
2. Value (valore in pixel)
Permette di definire la
spaziatura tra le lettere del
testo
text-align
1.
2.
3.
4.
Center
Left
Right
Justify
Permette di definire
l’allineamento del testo
text-decoration
1.
2.
3.
4.
5.
None
Underline
Overline
Blink
Line-through
Aggiunge decorazioni al
testo
20
Lezione 6
Cascading style sheets
Proprietà del testo
body {
background-color: transparent;
color: #4169E1;
}
p{
letter-spacing: normal;
text-align: center;
text-decoration: underline;
}
21
Lezione 6
Cascading style sheets
Proprietà del testo
Le proprietà del testo permettono di scegliere uno stile per il testo, una
dimensione, un colore ecc..
Proprietà
Valori ammessi
Descrizione
text-indent
1. Valore
Indenta la prima linea del
testo
text-transform
1.
2.
3.
4.
Controll il maiuscolo e il
minuscolo
22
None
Capitalize
Uppercase
lowercase
Lezione 6
Cascading style sheets
Proprietà del testo
body {
background-color: transparent;
color: #4169E1;
}
p{
letter-spacing: normal;
text-align: center;
text-decoration: underline;
text-indent: 20px;
text-transform: capitalize;
}
23
Lezione 6
Cascading style sheets
Font
Le proprietà del carattere permettono di cambiare la forma del
carattere, il grado di grassetto, la dimensione del testo ecc..
Proprietà
Valori ammessi
Descrizione
font-family
1.
2.
3.
4.
5.
6.
Definisce la forma del carattere
font-size
1. Xx-small
2. X-small
3. Small
4. Medium
5. Large
6. Xx-large
7. X-large
8. Smaller
9. Larger
10. Valore in pixel
24
Serif
Sans-serif
Monospace
Cursive
Fantasy
Nome carattere a scelta
Definisce la dimensione del
testo
Lezione 6
Cascading style sheets
Proprietà del testo
p{
letter-spacing: normal;
text-align: center;
text-decoration: underline;
text-indent: 20px;
text-transform: capitalize;
font-family: fantasy;
font-size: 30px;
}
25
Lezione 6
Cascading style sheets
Font
Proprietà
Valori ammessi
Descrizione
font-style
1. Normal
2. Italic
3. oblique
Sceglie tra normale e
obliquo
font-variant
1. Normal
2. Small-caps
Imposta il maiuscolo
font-weight
1.
2.
3.
4.
5.
Imposta il grado di
grassetto
26
Normal
Bold
Bolder
Lighter
100/200/300/400/500/60
0 (400 è valore normale,
700 è grassetto)
Lezione 6
Cascading style sheets
Proprietà del testo
p{
letter-spacing: normal;
text-align: center;
text-decoration: underline;
text-indent: 20px;
text-transform: capitalize;
font-family: sans;
font-size: 30px;
font-style: italic;
font-variant: normal;
font-weight: 700;
}
27
Lezione 6
Cascading style sheets
Liste
Le proprietà delle liste permettono di scegliere tra diversi marcatori di
una voce di lista o di impostare una immagine come marcatore.
Proprietà
Valori ammessi
Descrizione
list-style-image
1. None
2. url
Permette di definire una
immagine come marcatore
list-styleposition
1. Inside
2. Outside
Posiziona il marcatore
list-style-type
1.
2.
3.
4.
5.
6.
7.
8.
9.
Permette di definire la
forma del marcatore
28
None
Disc
Circle
Square
Decimal
Lower-roman
Upper-roman
Lower-alpha
Upper-alpha
Lezione 6
Cascading style sheets
Liste
ul {
list-style-image: url(quote.gif);
list-style-position: outside;
}
29
Lezione 6
Cascading style sheets
I box
Il riquadro o box è formato da un’area per il contenuto che può essere
un testo o una immagine, da una spaziatura (padding) che racchiude
l’area del contenuto, da un bordo e da un margine.
Top
Margin
Border
Padding
Left
Contenuto
Bottom
30
Lezione 6
Right
Cascading style sheets
I box
Le dimensioni di un box dipendono da diversi fattori.
La larghezza del box è determinata
dalla somma dell’ampiezza del
contenuto e delle ampiezze di
sinistra e destra del margine,
del bordo e del padding.
Analogamente per l’altezza.
31
Lezione 6
Cascading style sheets
I box
Proprietà
Valori ammessi
Descrizione
margin
1. Valore
2. Auto
3. %
Definisce la distanza tra il
bordo del box e il bordo del
browser
border-width
1.
2.
3.
4.
Spessore del bordo
border-style
1. None
2. Hidden
3. Dotted (punteggiato)
4. Dashed (tratteggiato)
5. Solid (linea continua)
6. Double (doppio)
7. Groove (incassato)
8. Ridge (in rilievo)
9. Inset (all’interno)
10.Outset (all’esterno)
32
Thin
Medium
Thick
Valore
Stile del bordo
Lezione 6
Cascading style sheets
I box
Proprietà
Valori ammessi
Descrizione
padding
1. Valore
2. %
Definisce la distanza
tra il contenuto e il
margine del box
height
1. Valore
2. Auto
3. %
Imposta l’altezza del
box
width
1. Valore
2. Auto
3. %
Imposta la larghezza
del box
Display
1. None
2. Block (aggiunge una riga prima e dopo il
box)
3. Inline (senza interruzione di riga)
4. list-item (viene considerato come la voce di
una lista)
5. Run-in (il browser sceglie tra block e inline)
33
Lezione 6
Cascading style sheets
I box
Proprietà
Valori ammessi
Descrizione
position
1. Static (statica rispetto al browser)
2. Relative (sposta l’elemento a partire dalla
posizione assunta dal browser)
3. Absolute (in un punto qualsiasi della
pagina)
4. Fixed (come absolute, ma supporta lo
“scrolling”)
Posiziona l’elemento
1. Valore
Specifica la posizione
dell’elemento rispetto al
valore specificato
1.
2.
3.
4.
Specifica come deve
essere visualizzato il
contenuto di un box se
oltrepassa le dimensioni
Top
Bottom
Right
Left
•
•
•
•
Overflow
34
Visible
Hidden
Auto
Scrolling
Lezione 6
Cascading style sheets
I floating box
La proprietà float viene usata per trascinare un box a sinistra o a destra
sulla linea corrente.
Un box “flottante” viene trattato come un box e viene trascinato a
sinistra o a destra fino a che il suo margine esterno non tocca il
margine del box che lo contiene.
Proprietà
Valori ammessi
Descrizione
float
1. Left
2. Right
3. None
Sposta il box a sinistra o a
destra sulla linea corrente
35
Lezione 6
Cascading style sheets
Esempi
Vogliamo costruire con l’aiuto di un foglio di stile un menu orizzontale.
Per farlo useremo le liste.
<body>
Esempio di menu con css
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
<p>Testo Testo Testo Testo Testo Testo
Testo Testo Testo Testo Testo Testo Testo Testo </p>
</body>
36
Lezione 6
Cascading style sheets
Esempi
ul {
float: left;
width: 100%;
}
li {
display: inline;
}
37
Lezione 6
Cascading style sheets
Esempi
a{
margin-left: 5px;
margin-right: 5px;
color: white;
font-weight: bold;
background-color: Purple;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
}
38
Lezione 6
Cascading style sheets
Esempi
39
Lezione 6
Cascading style sheets
Esempi
Si possono definire molte altre proprietà per i link.
ul {
float: left;
width: 100%;
}
li {
display: inline;
}
40
Lezione 6
Cascading style sheets
Esempi
a{
margin-left: 5px;
margin-right: 5px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
color: white;
font-weight: bold;
background-color: Purple;
text-decoration: none;
}
41
Lezione 6
Cascading style sheets
Esempi
a:hover {
color: Purple;
background: White;
text-decoration: none;
font-weight: bold;
}
42
Lezione 6
Cascading style sheets
Esempi
43
Lezione 6
Scarica
