domenica 27 Settembre 2020

Download in corso

Softwareone.it

07-01-2019

CSS Stilizzare il Testo

Iniziamo dalla base font che permette di impostare le dimensioni del testo, il carattere da utilizzare, il corsivo ed il grassetto.

Esempio

div {font-size: 11px;font-family: verdana;font-style: italic;font-weight: bold;}

La proprietà font-size permette di impostare il testo in pixel o in altre unità di misura, ad esempio:

font-size: 10em;

o in percentuale, ma consiglio di adottare i pixel con la specifica “px”. 
La proprietà font-family permette di impostare uno o più caratteri, come nell’esempio che segue:

font-family: verdana arial sansserif;

I caratteri i cui nomi sono composti da più di una parola vanno scritti tra singoli apici:

font-family: 'times new roman';

Le proprietà font-style e font-weight accettano come principali valori, oltre ai già visti “italic” (corsivo) e “bold” (grassetto) accettano il valore “normal” per eliminare gli eventuali già presenti corsivo e/o grassetto:

div.NORMALE {font-style: normal;font-weight: normal;}

Abbiamo tre proprietà text:

  • text-decoration – la sottolineatura del testo;
  • text-indent – la tabulazione del testo;
  • text-transform – maiuscole e minuscole nel testo.

Vediamo un esempio

div.SOTTOLINEATO {
    text-decoration: underline;
    }

La proprietà text-decoration accetta i valori “none” (nessuna sottolineatura), “underline” (sottolineatura bassa) oppure “overline” (sottolineatura alta)

div.TABULAZIONE {text-indent: 100px;}

La proprietà text-indent specifica in pixel (o nell’unità di misura scelta) lo spazio di tabulazione da sinistra che si desidera impostare

div.MAIUSCOLO {
         text-transform: uppercase;
}
 div.MINUSCOLO {
         text-transform: lowercase;
}
div.INIZIALI_MAIUSCOLE {
       text-transform: capitalize;
}

Vediamo adesso come allineare il testo e come gestire altre stilizzazioni di giustificazione.

Esistono le proprietà:

  • text-align – allinea il testo in orizzontale;
  • vertical-align – allinea il testo in verticale;
  • letter-spacing – definisce lo spazio tra le lettere;
  • word-spacing – definisce lo spazio tra le parole;
  • line-height – definisce la distanza tra una riga e l’altra del testo di uno stesso elemento.

Esempio completo

<table width="500">
   <tr>
      <td id="A">Prima cella</td>
      <td id="B">Seconda cella</td>
   </tr>
</table>

CSS di esempio

td {
        font-size: 11px;
        font-family: verdana;
}
#A {
       vertical-align: top; /* OPPURE middle OPPURE bottom */
        width: 200px;
       letter-spacing: 10px; 
}
 #B {
       vertical-align: top;
       text-align: center; /* OPPURE left OPPURE right */
       width: 300px;
       word-spacing: 30px;
      line-height: 10px;
}

I commenti sono chiusi.

Pubblicità