A Sbafo! Tutto per il web gratis e in italiano...

 AVVISO

   Aggiungi ai preferiti  

:: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 13
:: Home

Grafica
:: Sfondi
:: Pulsanti
:: Linee
:: Gioielli
:: Puntini
:: Gif animate
:: Clipart
:: Icone
:: Set completi

Risorse
:: Caratteri
:: Applet e Javascript
:: Suoni
:: Programmi
:: Manuali

Servizi
:: Spazio web
:: Contatori di accessi
:: Libri degli ospiti
:: Crea i tuoi metatag

Richieste
:: Pulsanti
:: Assistenza
:: Scrivici

Varie
:: Dicono di noi
:: Note legali
 
Crea il tuo sito con noi...
In collaborazione
Testi e Manuali
Pubblicità
Pubblicità
Noi sosteniamo
C'E' BISOGNO ANCHE DI TE
 
Indice di questo manuale Indice di tutti i manuali Area download

Giochiamo con i fogli di stile

Versione 1.0

Manuale scritto da Seatiger Team™ nel mese di agosto 2002

A SBAFO! Tutto per il web gratis e in italiano...

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 7

I fonts ed il testo

 

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

anteprima
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 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.
Nota anche che 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'
 

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

anteprima

 

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

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

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

anteprima
Nota: anche in questo esempio la seconda riga appare in corsivo perché racchiusa nel tag <em> e non 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 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>

anteprima

 

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

anteprima
Nota: 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.
 

 
Torna alla pagina precedente Vai alla pagina successiva
Pagina precedente Pagina successiva
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Registrazione dominio, spazio illimitato, 5 caselle di posta, a soli 24,79 euro all'anno iva inclusa.

www. .

Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori.

Webmaster: Seatiger Team