Asbafo
a- a+

I font e il testo

 

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:

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

 

7.3 Grassettatura

 
Il testo può essere più o menograssettato utilizzando l'elemento di stilefont-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 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

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

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

 
    <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

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

 

7.8 Allineamento del testo

 
L'elemento di stile utilizzato per allineare iltesto è 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>
 
 

 

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:

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

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

 

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:

  • 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 inmaiuscolo,</p>     <p class="minuscolo">e questa tutta in minuscolo.</p>     </body></html>

 



Ti potrebbe interessare anche

commenta la notizia