1) La scelta del font : Proprietà font-family
Possiamo usare solo alcune tipologie di font che siano visualizzabili su quasi tutti i dispositivi per i testi che abbiamo intenzione di inserire sul web.
Infatti, se si vuole far vedere un oggetto con un font particolare, esso dovrà essere programmato come immagine.
I font si dividono sostanzialmente in cinque macrofamiglie :
- serif (ad esempio Times New Roman)
- sans-serif (ad esempio Arial)
- cursive (ad esempio Comic Sans)
- monospace (Courier)
- font liberi (fantasy : ad esempio Allegro BT)
La dichiarazione sintattica da fare nei fogli di stile è :
selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}
Un esempio di scelta del font per una parte del contenuto della pagina che stiamo progettando, può essere:
dentro la sezione content del foglio di stile : div
{font-family: comic sans, cursive;}2) La proprietà font-size
E' la proprietà che serve per definire le dimensioni del testo.
La sintassi da dichiarare nel foglio di stile è :
selettore {font-size: valore;}
dove il valore può essere indicato in pixel (px) , percentuale (%) , oppure con parole come small / medium /
large.
3) La proprietà font-weight
Questa proprietà è funzionale alla definizione della consistenza visiva del testo (grassetto).
La sintassi da dichiarare nel foglio di stile è :
selettore {font-weight: valore;}
4) La proprietà font-style
Serve per impostare il carattere corsivo del testo. La sintassi da dichiarare nel foglio di stile è :
selettore {font-style: valore;}
5) La proprietà line-height
Tale proprietà ha lo scopo di impostare uno spazio tra le righe del testo, in quanto permette di selezionare
l'altezza che le linee di testo devono avere.
La sintassi da dichiarare nel foglio di stile è :
selettore {line-height: valore;}Il valore può essere:
- numerico, solitamente da 1 a 1.5 ( in questo caso l'altezza della riga risulterà uguale a quella del font moltiplicata per il valore scelto ).
- un'unità di misura , ad esempio pixel.
- percentule (rispetto al font).
- normal (deciso dal browser).
6) La proprietà text-align
Con questa proprietà si sceglie come allineare il testo. Il valore è infatti rappresentato da alcune parole chiave che specificano le possibili modalità :
- left : allinea il testo a sinistra
- right : allinea il testo a destra
- center : centra il testo
La sintassi da inserire nel foglio di stile è:
selettore {text-align: valore;}7) La proprietà text-decoration
Il testo può venire ulteriormente personalizzato aggiungendo dei valori nella seguente sintassi :
selettore {text-decoration: valore o valori;}
I termini per definirli nel foglio di stile sono:
- none : il testo rimane normale.
- underline : il testo sarà sottolineato.
- overline : il testo avrà una linea superiore.
- blink : il testo sarà lampeggiante.
8) La proprietà font-variant
Consente di trasformare il testo in maiuscoletto (lettere in maiuscolo rese con dimensioni uguali ai caratteri minuscoli ).
La sintassi è :
selettore {font-variant: valore;}
9) La proprietà text-transform
Essa serve per cambiare tutte le lettere del testo selezionato trasformandole in maiuscole/minuscole.
Inserendo i valori :
capitalize (la prima lettera di ogni parola viene trasformata in maiuscolo);
uppercase (tutto il testo diventa maiuscolo);
lowercase (tutto il testo diventa minuscolo).
La sintassi è :
selettore {text-transform: valore;}
Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti tra le parole del testo, e la scelta di limitare l'andare a capo delle righe.
La sintassi è :
selettore {white-space: valore;}
- none = gli spazi bianchi tra le parole sono ridotti a uno.
- pre = gli spazi bianchi e l'inizio delle nuove righe sono mantenuti come da linguaggio HTML.
- nowrap = gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata.
Esistono numerose altre proprietà inseribili nel foglio di stile , che si possono trovare nelle guide on-line :
http://www.html.it/pag/14226/gestione-del-testo-propriet-di-base/
(link da cui è tratta la lezione sulle proprietà di base)
DEFINIZIONE E GESTIONE DEI COLORI DEL TESTO
Per definire i colori possiamo usare 16 colori standard oppure prendere il colore da Gimp attraverso il codice HTML.
La proprietà di assegnazione del colore nel foglio di stile è :
selettore {color: valore;} dove il valore, nel caso dei colori standard, si identifica tra una lista di termini che identificano la palette VGA. 
black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | whitePer colori più personalizzati si utilizzano i codici con notazione esadecimale composti da sei elementi (lettere/numeri) che si riferiscono ai valori per i colori : RED, GREEN, BLUE (RGB). In questo caso i valori sono preceduti dal simbolo #.
Esempi :
p {color: purple;} div {color: #CC0000;}Il seguente link manda alla guida CSS sui colori : http://www.html.it/pag/14224/gestione-del-colore/
A QUALI ELEMENTI SI POSSONO ASSEGNARE LE PROPRIETà DEL TESTO ?
1) Ai <div> : il testo del contenuto risulta tutto uguale in base alle proprietà assegnate al div.
2) A uno specifico tag :
- Se si vuole assegnare proprietà differenziate al titolo del testo, all'interno della sezione content nel foglio di programmazione HTML (INDEX), si deve inserire il tag : <h1> titolo </h1>
- Lo stesso si può effettuare per suddividere il contenuto in paragrafi, inserendo la dicitura : <p> testo </p>
Dopo aver modificato il foglio INDEX, si modifica il foglio CSS spostando le proprietà prima genericamente assegnate al contenuto all'interno delle nuove sezioni : h1 , p , ecc.
3) Alle classi :
Le classi sono utilizzate per selezionare elementi specifici del testo che si desidera far vedere diversamente (per esempio evidenziare un termine all'interno di un paragrafo).
La sintassi da dichiarare nel foglio di stile è : . nome testo { proprietà }
Esempio : . testorosso {color : red ;}
Per assegnare all' HTML l'elemento classe, si usa un tag chiamato span. Esso si deve inserire prima della
porzione di testo di interesse e deve essere seguito da uno spazio e da un tag class come segue :
<span <class "nome della classe"> </span>
con centinaia di esempi e guide esplicative.
