Proprietà di presentazione dei testi, gestione dei colori, assegnazione di classi .

COME GESTIRE LE PROPRIETà DI PRESENTAZIONE DEI TESTI CON I FOGLI DI STILE (CSS)

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>;}

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette (es. "Times New Roman"). Quando la pagina viene caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile userà il secondo, e così via . Nel caso di impossibilità di utilizzo dei font prescelti, verrà usato il font principale della famiglia generica indicata presente nel sistema.

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;}

Il valore può essere numerico (100 = più leggero ... 700 = grassetto ... 900 = più pesante) , oppure espresso con termini che ne descrivono l'aspetto (normal = valore predefinito , bold = grassetto).


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;}

Il valore in questione può essere : normal (il testo rimane normale) , italic (il testo diventa corsivo).


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;}

Tali valori sono utili per marcare le parole con delle righe (sottolineature ecc.).
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;}

I possibili valori sono : normal (il testo rimane normale) , small-caps (il testo si trasforma).


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;}


10) La proprietà white-space


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;}

I valori sono specificati dai seguenti termini:
- 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 | white

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