Gli stili e le proprietà

In questa sezione troverete alcune proprietà tipiche del testo o degli elementi di un layout in CSS.
In grassetto verrà fornito un esempio, ed in seguito spiegato lo stesso e i diversi valori che la stessa proprietà può assumere.

font-family: Verdana, Tahoma, sans-serif;

Definisce una famiglia di font, è bene dichiarare più di un font per essere sicuri che la resa sul browser sia corretta.

font-size: 12px;

Definisce la grandezza del font. Può essere espressa in pixel, ems, percentuale, point, picas e exes.

Le unità più idonee e comuni sono, tuttavia, solo pixel, ems, percentuale.

Pixel
Questa unità di misura è la più diffusa e permette di avere buoni risultati su diversi browser e di poter misurare con precisione quasi millimetrica ogni cosa.
N.B. (Accessibilità): I pixel però non tengono conto delle preferenze che l'utente può aver impostato sul proprio browser (grandezza carattere), inoltre Internet Explorer (il browser più diffuso ma quello anche, ahimè, più ricco di bug) non ingrandisce né diminuisce il testo espresso in pixel.
Questo può causare non pochi problemi se si ha un'utenza con problemi di vista.

Ems
Questa unità di misura è detta "relativa" perché rappresenta l'altezza di default della lettera "M" così come è impostata dall'utente stesso.
N.B. (Accessibilità): L'utente sarà capace di dimensionare come desidera il testo, per far fronte anche a problemi di vista.
Inoltre gli Ems vengono correttamente interpretati anche da Internet Explorer.
La corretta sintassi di un testo di normale-media grandezza è: font-size: 1em;. 1em corrisponde alla grandezza impostata precisamente dall'utente.
Ricordiamo che gli em utilizzano anche la virgola (il punto cioè) e quindi 0.8 em, 1.4em e così via. Fate delle prove!

Percentuali
Questa unità è relativa come gli Ems e possiamo affermare che font-size: 100%; sia l'equivalente che dire font-size: 1em;.
Ovvero sarà la dimensione di testo impostata dall'utente.
Inoltre, essendo anche questa una unità relativa, sarà possibile dimensionare il testo come si vuole, con tutti i browser.

text-align: left;
Definisce il tipo di allineamento del testo.
text-align: left; definisce un allineamento a bandiera sinistra (ovvero allineato a sinistra).
text-align: right; definisce un allineamento a bandiera destra (ovvero allineato a destra).
text-align: center; centra il testo all'interno del suo contenitore.
text-align: justify; giustifica il testo all'interno del contenitore.

border: 1px solid #000000;
I bordi sono molto importanti, soprattutto quando dobbiamo "visualizzare" precisamente il confine di un box che abbiamo costruito con i CSS.
Nell'esempio abbiamo visto un bordo solido (una riga continua) di 1px di spessore e di colore nero.
Specificando solo border: come proprietà staremo impostando lo stile per tutti e quattro i bordi dell'elemento, che sono :

• border-right (bordo di destra)
• border-left (bordo di sinistra)
• border-top (bordo superiore)
• border-bottom (bordo inferiore)

Il tipo di border ha differenti proprietà, le più comuni sono:

• solid (linea continua)
• dotted (linea fatta di puntini)
• dashed (linea fatta di trattini)
• outset (rilievo verso l'esterno)
• inset (incassamento verso l'interno)

Inoltre i pixel con i quali si dà la width (che indica, generalmente, la larghezza di un elemento) devono essere coerenti alla pagina.
Inutile fare 20 px di larghezza (già abbastanza) quando poi vi vedete scombinare il layout.Anche questa sarà una lezione che riprenderemo in seguito.
N.B. (Consigli): Mi raccomando di usare sempre la sintassi mostrata: ovvero prima dichiarare il tipo di border (border-right, border-top, border ...) poi dichiarare la grandezza (1px, 4px) il tipo (solid, dotted ) altrimenti non il codice non mostrerà il risultato desiderato.

background-color: #cccccc;
Questa proprietà determina il colore di sfondo di una pagina o di un elemento.
In questo caso ho scelto un grigio, di default infatti la pagina viene visualizzata bianca e l'elemento si asseconda alle priorità, in ordine gerarchico, già definite dal foglio di stile.
Altre proprietà importanti associate al background sono :

background-image: url(http://www.sito.com/immagine.jpg); dove all'interno della parentesi va inserito l'URL associato all'immagine.
background-repeat: no-repeat; Di default, se si mette un'immagine sfondo di una pagina, questa viene ripetuta fino alla fine della pagina.
Per evitare che questo accada e per visualizzare solo UNA volta l'immagine, basterà inserire questa proprietà con l'attributo di no-repeat.
Se invece vogliamo far sì che l'immagine si ripeta solo verticalmente, inseriremo repeat-y e se vogliamo farla ripetere solo orizzontalmente, inseriremo repeat-x.
Se vogliamo invece lasciarla ripetere, inseriremo repeat, oppure nulla (ma è sempre meglio dichiarare le nostre intenzioni ai browser!!).
background-position sancisce la posizione dell'immagine di sfondo all'interno del suo elemento.
Gli attributi di posizione sono :

• top (posizionato in alto)
• center (posizionato al centro)
• bottom (posizionato in basso)
• right (posizionato a destra)
• left (posizionato a sinistra)

Le proprietà si possono combinare, ad esempio, background-position: top center