NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

Capitolo 3: Il body. Il background. I colori. Le immagini.

 

Una pagina Html, dal punto di vista della struttura (e del codice), è suddivisa in due sezioni: l'Head e il Body.

 

Il Body contiene gli elementi che verranno rappresentati nella finestra del browser (ad eccezione del titolo della pagina, che va specificato mediante il tag TITLE all'interno dell'Head) ed è proprio da qui che partiremo per esaminare una buona parte delle regole CSS.

 

 

Nel Body, infatti, è possibile impostare un colore e una immagine di background (sfondo della pagina), ma non solo: dal momento che il Body è un contenitore di altri elementi (div, tabelle, testo, ...), alcune regole impostate per tale elemento verranno ereditate da quelli contenuti al suo interno (a meno di non riscrivere esplicitamente tali regole nei vari elementi, per renderle differenti da quelle impostate nel contenitore o nell'elemento "padre").

 

 

Il concetto di ereditarietà delle regole (rispettato QUASI sempre, non sempre) non vale solo per il Body, ma anche per altri contenitori ed elementi: un link (A) o un paragrafo di testo (P) posti all'interno di un div riceveranno da questo delle regole, mentre il div erediterà a sua volta le regole impostate per il contenitore che lo... conterrà, e così via; la struttura gerarchica degli elementi, definita in base a come tali elementi sono disposti all'interno della pagina html, avrà quindi degli effetti sul loro aspetto, definito nei fogli di stile.

 

Per pagine particolarmente complesse, ricche di elementi annidati, potrebbe essere utile fare uno "schema" di questa gerarchia, per prevedere gli effetti che le regole definite nel CSS avranno sui vari elementi della pagina.

 

Apriamo il nostro file css mediante un editor di testo ed iniziamo a scrivere il selettore del body e le parentesi graffe, lasciando qualche riga per le istruzioni da inserirvi in seguito, come mostrato qui di seguito:

body

{

/* COMMENTO --- Qui inseriremo le regole per l'elemento body. */

}

 

Iniziamo quindi a conoscere alcune regole CSS, partendo da quelle che riguardano il background, cioè lo sfondo degli elementi.

 

Inseriremo tali regole direttamente nel Body, per questo esempio, ma le regole del gruppo background possono essere applicate a tutti gli elementi, per gestirne, appunto, lo sfondo.

 

Ecco le proprietà di background:

  • background-color

Consente di definire il colore di sfondo. Il colore può essere espresso con valori esadecimali, interi (per le componenti RGB) o mediante costanti predefinite che identificano i colori "tipici" (maggiori dettagli su come definire il colore in basso, nella sezione ad hoc).

Es.: background-color: cyan;

 

  • background-image

Consente di utilizzare un'immagine come sfondo, tramite la funzione url([path]), dove path è il percorso del file immagine.

Es.: background-image: url('/./RES/miaImmagine.jpg');

 

  • background-repeat

Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta: orizzontalmente (repeat-x), verticalmente (repeat-y), in entrambi i sensi (repeat) o non ripetuta (no-repeat).

Es.: background-repeat: repeat-x;

 

  • background-attachment

Con tale regola si decide se l'immagine di sfondo deve "muoversi" quando si effettua lo scrolling della pagina (scroll) o se deve rimanere fissa mentre si scorre il contenuto (fixed).

Es.: background-attachment: scroll;

 

  • background-position

Definisce il punto ove piazzare l'immagine di sfondo.

Se è attivato il background-repeat, la ripetizione avverrà a partire dal punto specificato con background-position. Di default (quando, cioè, non viene specificato background-position), l'immagine verrà posizionata con il vertice in alto a sinistra coincidente con il.... vertice in alto a sinistra dell'elemento ("l'origine" del sistema di riferimento).

Per specificare la posizione, è possibile utilizzare valori in percentuale (in riferimento alla dimensione dell'elemento), con unità di misura (vd. capitolo precedente) o con le parole chiave top, bottom, left, right, center (quest'ultimo centrerà l'immagine nell'elemento).

Es.: background-position: center.

 

 

Il colore dello sfondo viene quindi impostato con background-color, mentre per impostare il colore di foreground è sufficiente scrivere color, passando come valori:

  • il valore esadecimale del colore, espresso nella forma #RRGGBB;
  • tre valori interi, uno per ciascun canale-colore nel modello RGB, nel range 0,255, attraverso il comando: rgb(RRR, GGG, BBB);
  • alcune costanti predefinite, parole chiave che identificano facilmente dei colori "tipici" per evitare di dover scrivere, ogni volta, i valori esadecimali o rgb; tali costanti sono: black, navy, blue, maroon, purple, green, red, teal, fuchsia, olive, gray, lime, aqua, silver, yellow, white.

Es.: color: white;    color: #FF0077;  color: rgb(255, 0, 0);  .

 

 

Le immagini vengono 'caricate' mediante il comando url([path]), come visto per background-image.

 

E' possibile, poi, utilizzare i CSS per definire alcuni aspetti degli ELEMENTI immagine (img), aprendo un blocco con selettore img e specificando al suo interno, proprio come per Body ed altri elementi, proprietà e valori; esempio:

img

{

width = 100px;

}

In realtà, difficilmente verrà impostato uno stile del genere per TUTTE le immagini della pagina; molto più probabilmente, limiteremo uno stile ad un certo insieme di immagini, ma per vedere come restringere l'effetto dei CSS ad un "sottoinsieme" particolare di alcuni tag dovremo aspettare l'ultimo capitolo, dedicato a classi, pseudo-classi e pseudo-elementi.

 

 
Vai all'inizio della pagina