6. Proprietà di base: Sfondo

Grazie ai CSS possiamo facilmente assegnare un colore o un'immagine di sfondo, ripetuta o meno, ad un elemento nel web: dal body al paragrafo, dalla tabella all'input form.
Colore

La proprietà background-color permette di definire il colore di sfondo di un elemento.

Sintassi:

selettore { background-color: <valore>; }

Il valore deve essere un colore. Il colore verrà inoltre usato per riempire gli spazi non coperti da un'eventuale immagine di sfondo.

Esempio:

body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0) }

background-image

La proprietà background-image definisce un'eventuale immagine da usare per lo sfondo dell'elemento.

Sintassi:

selettore { background-image: <valore> }

dove <valore> può essere:

un URL assoluto o relativo che punti ad un'immagine (in questo caso bisognerà usare la notazione url(percorso)
none (valore di default): non verrà applicata nessuna immagine allo sfondo

Esempio:

body { background-image: url(immaginesfondo.gif); }
.class2 { background-image: url(http://www.indirizzo.it/immagine.gif); }

background-repeat

Imposta il modo in cui l'immagine viene ripetuta sullo sfondo.

Sintassi:

selettore { background-repeat: <valore>; }

I valori possibili sono i seguenti:

repeat: l'immagine di sfondo viene ripetuta sia in senso orizzontale sia in senso verticale
repeat-x: l'immagine di sfondo viene ripetuta in senso orizzontale
repeat-y: l'immagine di sfondo viene ripetuta in senso verticale
no-repeat: l'immagine di sfondo viene visualizzata solo una volta, senza ripetizioni

background-attachment

Questa funzione consente di scegliere se l'immagine dovrà essere fissa sullo sfondo, o muoversi con la pagina.

Sintassi:

selettore { background-attachment: <valore>; }

dove <valore> può assumere i seguenti valori:

fixed: l'immagine è fissa sullo sfondo
scroll: l'immagine si muove con la pagina

Posizione

Questa funzione decide come deve essere posizionata l'immagine all'interno della pagina.

Sintassi:

selettore { background-position: <valore>; }

dove <valore> può assumere questi valori:

top left in alto a sinistra
top center in altro centrata
top right in alto a destra
center left al centro a sinistra
center center al centro centrata
center right al centro a destra
bottom left in basso a sinistra
bottom center in basso centrata
bottom right in basso a destra
<valori in percentuale>

Per quanto riguarda in valori in percentuale, essi decidono il valore x e y in percentuale rispetto alla pagina.

Esempio:

selettore { background-position: 50% 50% }

L'immagine è così mostrata al centro.
Riepilogo

Per una maggiore compattezza e semplificazione del codice, possiamo riassumere tutte le proprieta relative allo sfondo scrivendo semplicemente background e tutti i 5 valori possibili a seguire.

Esempio:

selettore {
background: blue
url(immaginedisfondo.gif)
no-repeat
scroll
center center;
}

Alcuni esempi

Per creare sfondi accattivanti e leggeri in modo semplice, è sufficiente usare con un po' di abilità programmi di grafica e la proprietà background. Ad esempio è molto facile creare uno sfondo sfumato che riempie l'intera pagina.

Vogliamo ottenere uno sfondo azzurro nella parte superiore della pagina e blu nella parte inferiore; per ridurre il peso della pagina finale, usiamo un'immagine stretta e alta che poi ripeteremo in orizzontale.
Per prima cosa, usando un programma di grafica come Gimp, creiamo un'immagine con altezza a piacere e larghezza 2px e la riempiamo in verticale con il riempimento sfumato che preferiamo.
Una volta salvata l'immagine nella cartella della pagine, ad esempio come "back.png", usiamo qualche proprietà CSS per applicare lo sfondo alla pagina:

selettore {
background-color: lightblue; /*riempie lo spazio non coperto dall'immagine*/
background-image: url(back.png);
background-repeat: repeat-x; /*ripete l'immagine in orizzontale*/
background-position: bottom left; /*allinea l'immagine in basso*/
}

7. Proprietà di base: Testo base

Vedremo adesso, le proprietà di base del CSS inerenti al testo:

IL COLORE: color

La proprietà color specifica il colore del testo contenuto in un qualsiasi elemento HTML, ad esempio una pagina intera, o una tabella, o il contenuto di un fieldset, etc.

Sintassi:

selettore { color: <colore>; }

Dove <colore> è un valore esadecimale (ad esempio #FF0000, che indica il rosso) oppure una parola chiave, come negli esempi seguenti:

<style>
body { color: red; }
table { color: green; }
</style>

Con l'esempio di cui sopra, assegneremo il colore rosso al testo di tutta la pagina, tranne quello contenuto nelle tabelle.

ALLINEARE IL TESTO: text-align

Per definire l'allineamento del testo rispetto all'interno dell'elemento che lo contiene si usa la proprietà text-align.

Sintassi:

selettore { text-align: <pos>; }

Dove <pos> può assumere i valori :

left
center
right

che allineano il testo rispettivamente a sinistra, al centro e a destra, e

justify

che giustifica il testo ai margini dell'elemento.

DECORARE IL TESTO: text-decoration

La proprietà text-decoration serve per definire eventuali decorazioni in aggiunta al testo.

Sintassi:

selettore { text-decoration: <valore> }

Dove <valore> può assumere uno dei seguenti valori:

none: al testo non viene applicata nessuna decorazione
underline: il testo viene sottolineato da una riga continua
overline: ogni riga del testo ha una linea continua sopra
line-through: il testo risulta barrato da una linea continua

INDENTARE I PARAGRAFI: text-indent

Per impostare il rientro per la prima riga del testo si usa la proprietà text-indent.

Sintassi:

selettore { text-indent: <valore> }

Dove <valore> è un valore percentuale o affiancato da un'unita di misura (in questo caso è preferibile usare em) che definisce lo spazio tra il margine dell'elemento e la prima lettera del testo.
È possibile assegnare a questa proprietà anche valori negativi.

TRASFORMAZIONE O CAPITALIZZAZIONE DEL TESTO: text-transform

Permette di forzare la capitalizzazione del testo.

Sintassi:

selettore { text-transform: <cap> }

Dove <cap> può assumere uno dei seguenti valori:

none: la capitalizzazione del testo rimane quella definita nel codice HTML
capitalize: forza la prima lettera di ogni parola alla capitalizzazione maiuscola
uppercase: forza il testo ad essere maiuscolo
lowercase: forza il testo alla capitalizzazione minuscola

SPAZIO TRA CARATTERI E PAROLE: letter-spacing e word-spacing

Definiscono lo spazio rispettivamente tra i caratteri e le parole del testo

Sintassi:

selettore { letter-spacing: <valore>; }
selettore { word-spacing: <valore>; }

Dove <valore> può essere normal, che definisce la spaziatura normale tra le lettere o le parole, un valore espresso in percentuale o una grandezza seguita da un'unità di misura valida.

SPAZI TRA LE LINEE DI TESTO: line-height

La proprietà line-height serve invece per definire l'altezza della linea testo, che influisce quindi sulle righe successive quando si va a capo. Il suo valore è una grandezza, normalmente espressa in em.
>GESTIRE GLI SPAZI: white-space

Come ultima del testo analizziamo la proprietà white-space. Questa proprietà serve a definire il comportamento del browser con gli spazi bianchi nel codice HTML, e può assumere i seguenti valori:

normal: il browser si comporta come normalmente (va a capo agli spazi, unisce le sequenze di spazi);
pre funziona come il tag HTML <pre>: gli spazi bianchi non vengono "condensati" e gli accapo sono mantenuti rispetto al sorgente HTML;
nowrap: come normal, solo che il browser non spezza il testo se c'è uno spazio;
pre-line:: come pre, ma gli spazi vengono condensati.

8. Proprietà di base: Testo avanzato

Proprietà per definire il font di un testo in una pagina, che sono principalmente:

TIPO DI CARATTERE

Permette di definire il tipo di carattere usato per la visualizzazione del testo.

Sintassi:

selettore { font-family: <valore>; }

dove <valore> è una sequenza di uno o più tipi di carattere indicati tra apici nell'ordine in cui verranno usati nel caso non siano installati sul sistema operativo dell'utente. È possibile inoltre definire una famiglia generale di caratteri tramite i seguenti valori:

serif: le serif sono le grazie, ovvero gli abbellimenti delle lettere, che presentano caratteri come il Times New Roman o il FreeSerif. È usato soprattutto per la stampa, in quanto la lettura delle grazie su schermo risulta più faticosa. Esempio: Testo con serif.
sans-serif: sono sans-serif (senza grazie) font come il Verdana, l'Arial, il FreeSans, l'Helvetica, ecc... Sono usati prevalentemente per lo schermo. Esempio: Testo senza serif.
cursive: i font cursive presentano caratteri più simili alla grafia umana piuttosto che a quelli di stampa. Esempio: Cursive.
fantasy: caratteri che uniscono la visualizzazione del testo ad elementi decorativi. Esempio: Testo fantasioso.
monospace: caratteri tipo telescrivente o macchina da scrivere e quindi monospaziati, come il Courier. Esempio: Testo monospaziato.

Ad esempio possiamo definire così il font di una pagina web:

body { font-family: Verdana, Arial, Helvetica, sans-serif; }

DIMENSIONE DEL TESTO

Definisce l'altezza del testo che dipenderà anche dal tipo di carattere usato. Normalmente questa proprietà è definita in em oppure in pt.

Sintassi:

selettore { font-size: <valore>; }

TESTO GRASSETTO

La proprietà font-weight permette di definire il "peso" del testo, ad esempio se vada visualizzato in grassetto o meno.

Sintassi:

selettore { font-weight: <valore>; }

Dove valore è un valore in centinaia compreso tra 100 e 900 inclusi (900 corrisponderà ad un testo più grassetto di 100) oppure uno tra i seguenti valori:

normal
bold
bolder
lighter

che definiscono un testo normale, grassetto, grassetto pesante e più "leggero". Normalmente il valore normal corrisponde al peso numerico 500.

TESTO CORSIVO

La proprietà font-style permette di definire un font in corsivo italico o obliquo.

Sintassi:

selettore { font-style: <valore>; }

dove valore può essere normal, italic o oblique.

MAIUSCOLETTO

Per impostare un testo maiuscoletto si usa la proprietà font-variant.

Sintassi:

selettore { font-variant: <valore>; }

dove valore può assumere il valore normal o small-caps (maiuscoletto). Normalmente il testo maiuscoletto presenta i caratteri minuscoli come delle riduzioni dei corrispettivi caratteri maiuscoli.

LA PROPRIETÀ RIASSUNTIVA font

La proprietà font permette di riassumere le proprietà viste in questo modulo.

Sintassi:

selettore {
font:<font-style>
<font-variant>
<font-weight>
<font-size>/<line-height>
<font-family>;
}
esempio:

h1 { font: italic bold 2em/1.5em arial }

La proprietà font è valida solo se sono specificate almeno dimensione e tipo di carattere.

Notare come line-height vada impostato subito dopo font-size, separato da quest'ultimo dalla barra "/".