|
|
| L'elemento di
stile font-family consente discegliere un font per una pagina oppure
per una partedi essa. In altre parole, scrivendo un pagina con ilfont
predefinito, essa apparirà nel browser conil carattere indicato come
valore dell'elementofont-family.
Ecco un esempio: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font-family: Verdana, Arial, 'Times
New Roman', serif
}
</style>
</head>
<body>
<p>Questa pagina è stata scritta con il carattere
predefinito, ma ti appare come se fosse in Verdana e questo grazie al
foglio di
stile.</p>
</body></html> |
|||
| Nota:
come avrai potuto osservare, come valore nonè stato assegnato solo il
carattere Verdana, ma,in sequenza, anche l'Arial, il Times New Roman e
lafamiglia dei "serif". Non è indispensabile indicarne piùd'uno, ma se chi visualizza la pagina non hainstallato sul suo PC il Verdana, visualizzeràil testo come fosse stato scritto in Arial, se non haneppure l'Arial come Times New Roman e, se non neha nessuno dei tre, con un generico font della famiglia"serif". Le famiglie di font sono: serif, sans-serif, cursive,fantasy, o monospace. Nota anche che un font che abbia nel suo nome deglispazi, come il Times New Roman ad esempio, deve esserepreceduto e seguito da apici, cioè in questomodo 'Times New Roman' |
|||
7.2 Lo stile del font |
|||
Al font prescelto
può anche essere assegnato unostile con l'elemento font-style. Questo
elemento hatre possibili valori:
Vediamo nell'esempio i tre valori applicati a tre titoli: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font-style:italic } h1 {
font-style:normal } h2 {
font-style:oblique }
</style>
</head>
<body>
<p>Questa riga ti appare come fosse scritta in
corsivo</p>
<h1>Questo titolo ti appare scritto in carattere
normale</h1>
<h2>Quest'altro titolo ti appare scritto in
obliquo</h2>
</body></html> |
|||
7.3 Grassettatura |
|||
| Il testo può
essere più o menograssettato utilizzando l'elemento di
stilefont-weight.
Valori ammessi sono:
Vediamo l'esempio pratico: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font-weight:bold } em {
font-weight:900
}
</style>
</head>
<body>
<p>Questa riga appare in
grassetto</p>
<p><em>Questo riga appare in corsivo ed in
grassetto
moltoaccentuato</em></p>
</body></html>
|
|||
| Nota: la seconda riga appare in corsivo perchéracchiusa nel tag <em> e non per effetto delfoglio di stile. | |||
7.4 Dimensioni del font |
|||
| Con questo
elemento di stile puoi variare le dimensionidel font.
Si possono usare valori assoluti
oppure valore relativi
o ancora unità di misura come
o una percentuale. Ecco un esempio: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font-size:x-large } em {
font-size:10px }
</style>
</head>
<body>
<p>Questa riga appare scritta in carattere molto
grande</p>
<p><em>mentre questa appare in corsivo e di
10 pixels</em></p>
</body></html>
|
|||
| Nota: anche in questo esempio la seconda riga appare incorsivo perché racchiusa nel tag <em> enon per effetto del foglio di stile. | |||
7.5 Assegnazione contemporanea di più elementi di stile al font |
|||
| Ovviamente anche
in questo caso gli elementi di stileriferiti ai font e gli altri
elementi possonocombinarsi tra loro in un unica stringa: si
utilizzal'elemento generico di stile font.
Supponi di voler dare al testo di un normale paragrafo un grassetto, un corsivo, utilizzare il font Times New Roman (o in alternativa un font della famiglia "serif") della grandezza di 14 punti e di colore verde. Invece di utilizzare singolarmente gli attributi font-weight, font-style, font-size, font-family e color, con il solo elemento di stile font utilizzerai questa forma: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font: bold italic 14pt 'Times
New Roman', serif ;
color:green }
</style>
</head>
<body>
<p>Questa riga appare scritta in carattere Times New
Roman,</p>
<p>14
punti, in grassetto, corsivo ed
è di colore
verde</p>
</body></html>
|
|||
7.6 Combinazioni complesse |
|||
| Usando l'esempio
di cui al paragrafo precedentepuoi assegnare elementi di stile diversi
anche ad altreparti della stessa pagina.
Supponi ancora di voler dare al testo di un normale paragrafo un grassetto, un corsivo, utilizzare il font Times New Roman (o in alternativa un font della famiglia "serif") della grandezza di 12 punti e di colore verde e supponi di voler dare al testo contenuto in un altro paragrafo un grassetto, utilizzare un font Comic Sans MS (o in alternativa un Arial oppure un font della famiglia "serif") della grandezza di 18 punti ed in rosso, potresti utilizzare questa forma: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { font: bold italic 12pt 'Times
New Roman', serif ;
color:green } q { font-family: 'Comic Sans Ms', Arial, serif;
font-size:18px;
font-weight:bold; font-style:normal;
}
</style>
</head>
<body>
<p>Questa parte appare scritta in Times New Roman, 12 punti,
in grassetto, corsivo ed in
verde</p><p><q>Quest'altra
appare in Comic Sans Serif, 18
pixels, in grassetto ed inrosso
</q></p>
</body></html>
|
|||
| Nota:
come avrai potuto osservare all'interno delnormale tag del paragrafo
<p> è statoinserito un altro tag <q> che
identifica in HTMLla citazione breve ed è a questo tag cheè stato
assegnato lo stile per differenziarlodal tag <p>. Non usando questo accorgimento tutti i paragrafisarebbero stati uguali al primo. Un buon risultato si sarebbe ottenuto invecericorrendo ad una classe o ad un selettore diidentità, già oggetto nella quartalezione. |
|||
7.7 Rientro del testo |
|||
| L'elemento di
stile che consente di assegnare unrientro alla prima riga di un blocco
di testo ètext-indent.
Il valore può essere espresso in unità di misura come
o in percentuale. Vediamo un esempio: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { text-indent:100px }
</style>
</head>
<body>
<p>La prima riga di questo testo appare rientrata di 100 pixels
rispetto al resto del paragrafo: anche questo effetto si può ottenere
con un elemento di stile.</p><p>Ovviamente
l'elemento di stile verrà applicato a ciascun paragrafo presente nella
pagina e quindi anche questa seconda riga subirà la stessa
sorte.</p>
</body></html>
|
|||
7.8 Allineamento del testo |
|||
| L'elemento di
stile utilizzato per allineare iltesto è text-align.
Valori ammessi sono:
Vediamo un esempio con un paragrafo allineato al centro ed un altro allineato a destra, con l'ausilio, in questo caso, di una classe: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { text-align:center } .destra
{ text-align:right }
</style>
</head>
<body>
<p>Questo paragrafo risulta centrato sulla
pagina.</p><p class="destra">Quest'altro
parametro, al quale è associato una classe, risulta allineato a
destra.</p>
</body></html>
|
|||
7.9 Decorazione del testo |
|||
| E' un elemento
che abbiamo già trattatoquando abbiamo parlato dei link.
Ovviamente una decorazione si può assegnare anche a dei paragrafi di testo con l'elemento di stile text-decoration. Valori ammessi sono:
Quest'ultimo valore NON E' SUPPORTATO DA MICROSOFT© EXPLORER in nessuna delle sue versioni. Vediamo un esempio, aiutandoci ancora con le classi: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { text-decoration:none }
.sopra { text-decoration:overline
} .mezzo {
text-decoration:line-through }
</style>
</head>
<body>
<p>Questo paragrafo risulta assolutamente
normale.</p>
<p class="sopra">Quest'altro parametro, al quale è associato una
classe, risulta sovrastato da una
linea.</p>
<p class="mezzo">Mentre quest'ultimo paragrafo è sbarrato da una
rigaorizzontale</p>
</body></html>
|
|||
7.10 Spaziatura tra le lettere e tra le parole |
|||
| Per assegnare uno
spazio predefinito tra una lettera el'altra della stessa parola si usa
l'elementodi stile letter-spacing, mentre per assegnare unospazio
predefinito tra una parola e la successiva siusa l'elemento di stile
word-spacing.
Il valore può essere espresso in unità di misura come
Vediamo un esempio: |
|||
<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { letter-spacing:7pt; word-spacing:10px
}
</style>
</head>
<body>
<p>Usando questo elemento di
stile</p>
<p>ogni lettera di ciascuna parola
</p>
<p>sarà distanziata di 7 punti</p>
<p>ed ogni parola sarà
distanziata</p>
<p> dalla successiva di 10 pixels.</p>
</body></html>
|
|||
7.11 Trasformazione del testo |
|||
| L'elemento di
stile text-transform serve a farsì che un paragrafo o una parte della
pagina, inqualunque modo sia stata realmente scritta, appaiatutta in
caratteri maiuscoli, tutta in caratteriminuscoli oppure con la prima
lettera di ciascunaparola in maiuscolo.
Valori ammessi sono:
Aiutandoci con le classi, vediamo un esempio: |
|||
1.<html>
<head>
<title>Titolo del
documento</title>
<style type="text/css">
BODY { background:#FFFFD1; color:#000000
}
p { text-transform:none}
.maiuscolo
{text-transform:uppercase}
.minuscolo
{text-transform:lowercase}
.iniziale
{text-transform:capitalize}
</style>
</head>
<body>
<p>Tutte le frasi di questa pagina sono state scritte
allo stesso
modo,</p>
<p class="maiuscolo">ma questa appare tutta in
maiuscolo,</p>
<p class="iniziale">questa appare con l'iniziale di ogni
parola
inmaiuscolo,</p>
<p class="minuscolo">e questa tutta in
minuscolo.</p>
</body></html>
|
|
|
