CSS III Lezione: il testo

Lezione 3 : i CSS

Vediamo alcune proprietà per formattare il testo:

Per allineare il testo useremo:

• text-align : center; \* testo al centro*\
• text-align : left; \* testo a sinistra *\
• text-align : right; \* testo a destra *\
• text-align : justify; \* testo giustificato *\

Il grassetto e il corsivo del nostro testo sarà applicato con:

font-style: italic \* se vogliamo scrivere il testo in corsivo*\

a font-style è possibile associare:

• italic
• normal
• oblique
• inherit

font-weight: bold \* se vogliamo scrivere testo in grassetto *\

Le proprietà di font-weigth sono:

• normal
• bold
• bolder
• lighter
• inherit

Per il testo sottolineato:

1. text-decoration: underline; \*testo sottolineato*\

Le proprietà di text-decoration sono:

• overline (linea sopra il testo)
• underline (sottolineato)
• line-through  (sbarrato)
• blink (lampeggiante -non IE)
• none (nessuno)

Per decidere di quanto il testo deve rientrare:

text-indent: 10px

text-indent: 10%

Per lo spazio tra i caratteri:

letter-spacing: 6px;

Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:

font-family: Arial, verdana, Sans-serif;

La dimensione del font:

• font-size: 30px;
• font-size: 30pt;
• font-size: 30%;
• font-size: 8em;

Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.

I tag font possono essere raggruppati:

         p {
                
                font-weight: bold;
                font-size: 18px;
                font-family: Verdana, Arial,Sans-serif;
      font-style: italic; 

        }

Può essere riscritta come:

p {

font:bold, small-caps,italic, 18px ,Arial;

}

Con l'ordine:

font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.