Ascolta la musica di GrooveRadio

MircoWeb

  ctrl+d per aggiungermi ai preferiti

Fonts


Css con Front Page
La sintassi
Creare un foglio
Applicare uno stile
Le classi
Gli elenchi
I moduli
I puntatori
Css in linea
Sfondi
Testo
Selettori
Links
Margini e bordi
Fonts
Le tabelle
Le immagini e i piani

Css con FP

 

Tipi di fonts

L'elemento di stile font-family consente di scegliere un font per una pagina oppure per una parte di essa. In altre parole, scrivendo un pagina con il font predefinito, essa apparirà nel browser con il carattere indicato come valore dell'elemento font-family.

Ecco un esempio:

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

Come avrai potuto osservare, come valore non è stato assegnato solo il carattere Verdana, ma, in sequenza, anche l'Arial, il Times New Roman e la famiglia dei "serif".

Non è indispensabile indicarne più d'uno, ma se chi visualizza la pagina non ha installato sul suo PC il Verdana, visualizzerà il testo come fosse stato scritto in Arial, se non ha neppure l'Arial come Times New Roman e, se non ne ha nessuno dei tre, con un generico font della famiglia "serif".

Le famiglie di font sono: serif, sans-serif, cursive, fantasy, o monospace.

Un font che abbia nel suo nome degli spazi, come il Times New Roman ad esempio, deve essere preceduto e seguito da apici, cioè in questo modo 'Times New Roman'

 

Lo stile del font

Al font prescelto può anche essere assegnato uno stile con l'elemento font-style. Questo elemento ha tre possibili valori:

normal (normale)

italic (corsivo)

oblique (corsivo più accentuato)

Vediamo nell'esempio i tre valori applicati a tre titoli:

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

 

Grassettatura

Il testo può essere più o meno grassettato utilizzando l'elemento di stile font-weight.

Valori ammessi sono:

bold (grassetto)

bolder (grassetto accentuato)

lighter (grassetto leggero)

100 (grassetto molto leggero)

200

300

400

500

600

700

800

900 (grassetto molto accentuato)

Vediamo l'esempio pratico:

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

accentuato</em></p>

</body>

</html>

 

Nota: la seconda riga appare in corsivo perché racchiusa nel tag <em> e non per effetto del foglio di stile.

 

Dimensioni del font

Con questo elemento di stile puoi variare le dimensioni del font.

Si possono usare valori assoluti

xx-small (piccolissimo)

x-small (molto piccolo)

small (piccolo)

medium (medio)

large (grande)

x-large (molto grande)

xx-large (grandissimo)

oppure valore relativi

smaller (più piccolo)

larger (più grande)

o ancora unità di misura come

px (pixels)

cm (centimetri)

mm (millimetri)

pt (punti)

pc (pica equivalenti a 12 punti)

o una percentuale.

Ecco un esempio:

<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 in corsivo perché racchiusa nel tag <em> e non per effetto del foglio di stile.

 

Assegnazione contemporanea di più elementi di stile al font

Ovviamente anche in questo caso gli elementi di stile riferiti ai font e gli altri elementi possono combinarsi tra loro in un unica stringa: si utilizza l'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:

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

 

Combinazioni complesse

Usando l'esempio di cui al paragrafo precedente puoi assegnare elementi di stile diversi anche ad altre parti 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:

<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; color:red }

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

rosso </q></p>

</body>

</html>

 

Come avrai potuto osservare all'interno del normale tag del paragrafo <p> è stato inserito un altro tag <q> che identifica in HTML la citazione breve ed è a questo tag che è stato assegnato lo stile per differenziarlo dal tag <p>.

Non usando questo accorgimento tutti i paragrafi sarebbero stati uguali al primo.

Un buon risultato si sarebbe ottenuto invece ricorrendo ad una classe o ad un selettore di identità, già oggetto nella quarta lezione.

Rientro del testo

L'elemento di stile che consente di assegnare un rientro alla prima riga di un blocco di testo è text-indent.

Il valore può essere espresso in unità di misura come

px (pixels)

cm (centimetri)

mm (millimetri)

pt (punti)

pc (pica equivalenti a 12 punti)

o in percentuale.

Vediamo un esempio:

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

 

Allineamento del testo

L'elemento di stile utilizzato per allineare il testo è text-align.

Valori ammessi sono:

left (a sinistra)

right (a destra)

center (centrato)

justify (giustificato)

Vediamo un esempio con un paragrafo allineato al centro ed un altro allineato a destra, con l'ausilio, in questo caso, di una classe:

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

 

Decorazione del testo

E' un elemento che abbiamo già trattato quando 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:

none (nessuna decorazione)

underline (testo sottolineato)

overline (linea sopra il testo)

line-through (linea attraverso il testo)

blink (intermittenza del testo)

Quest'ultimo valore NON E' SUPPORTATO DA MICROSOFT© EXPLORER in nessuna delle sue versioni.

Vediamo un esempio, aiutandoci ancora con le classi:

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

orizzontale</p>

</body>

</html>

 

Spaziatura tra le lettere e tra le parole

Per assegnare uno spazio predefinito tra una lettera e l'altra della stessa parola si usa l'elemento di stile letter-spacing, mentre per assegnare uno spazio predefinito tra una parola e la successiva si usa l'elemento di stile word-spacing.

Il valore può essere espresso in unità di misura come

px (pixels)

cm (centimetri)

mm (millimetri)

pt (punti)

pc (pica equivalenti a 12 punti)

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>

 

Trasformazione del testo

L'elemento di stile text-transform serve a far sì che un paragrafo o una parte della pagina, in qualunque modo sia stata realmente scritta, appaia tutta in caratteri maiuscoli, tutta in caratteri minuscoli oppure con la prima lettera di ciascuna parola in maiuscolo.

Valori ammessi sono:

capitalize (con la prima lettera di ciascuna parola in maiuscolo)

uppercase (con tutte le lettere in maiuscolo)

lowercase (con tutte le lettere in minuscolo)

none (come è stata scritta)

Aiutandoci con le classi, vediamo un esempio:

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

maiuscolo,</p>

<p class="minuscolo">e questa tutta in minuscolo.</p>

</body>

</html>

Navigazione alternativa:

Servizi:

Mail list:

Il luogo ideale per esprimere i tuoi dubbi e chiacchierare con gli iscritti

Forum:

Cose serie e leggere postate in internet

HELLBRAIN

Qualche notizia sul mio conto per scoprire chi sono

Ricerca in questo sito:

non trovi qualcosa? con questo motore di ricerca interno le cose non miglioreranno!

Link preferiti:

hai un tuo sito preferito, magari il tuo? puoi metterlo qui!

Awards

Candida il tuo sito e scopri chi è stato premiato!

Chat

Scegli un nick e dai appuntamento qui ai tuoi amici!

Guestbook

E per ultimo, il libro degli ospiti

 

Vota questo sito!

 


segnala ad un amico

 

 

 

 
    /)/)
   ( '.')
o(_('')('') Dubbi e incertezze? Iscriviti alla nostra mail list

Qualcosa non va? Segnalamelo !

Questo sito sostiene
Scarica ZipGenius GRATIS
Scarica ZipGenius
GRATIS

Home page

mappa del sito

ultimi aggiornamenti