Corso di CSS

I CSS sono molto importanti per poter dare personalità alla pagina HTML. Essi sono una parte integrante del codice HTML e curano la grafica degli elementi che abbiamo precedentemente analizzato, durante il corso HTML.

Introduzione

I fogli di stile a cascata (dall’inglese CSS Cascading Style Sheets) sono una tecnica che permette di fissare gli stili (per es. tipo di carattere, colori e spaziature) da applicare ai documenti HTML e XHTML. Le regole per comporre i fogli di stile sono contenute in un insieme di direttive (Reccomandations) emanate a partire dal 1996 dal W3C (World Wide Web Consortium).

L’introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

da wikipedia

Inoltre per cominciare avremo bisogno, oltre del nostro file HTML, anche di un altro file, sempre di testo, con estensione .css. Questo file verrà quindi chiamato per comodità style.css.

Introduzione

Sintassi & Inserimento

La sintassi del CSS

I CSS hanno una loro sintassi, diversa dall’HTML; essa comprende l’uso di parentesi graffe e l’obbligo dei “punti e virgola”’ alla fine di ogni stringa. Senza di questi il file non svolgerà correttamente la propria funzione. La sintassi principale è la seguente:

selettore {
   proprietà1: valore1;
   proprietà2: valore2 valore3;
}

Come potete vedere c’è un selettore che identifica i tag a cui vanno applicate le proprietà comprese di seguito all’interno delle parentesi graffe.
Dopo una proprietà seguono i due punti e successivamente elencati i valori attribuiti.

I commenti

Per commentare una parte di css è sufficiente scrivere in questo modo:

Fuori dal commento
/*
selettore {
   proprietà: valore;
}
*/
Fuori dal commento

Sintassi & commenti

Come inserire un foglio di stile

Per inserire un foglio di stile in un codice HTML vi sono quattro modi, dei quali è preferibile usare il primo che presentiamo. Le elenchiamo qui di seguito comunque per conoscenza:

1. File esterno

Creare un file di testo separato con estensione ‘.css’ es.: style.css. Qui andremo ad elencare le proprietà da conferire agli elementi (tag) html. Per collegare il foglio di stile con la sorgente HTML inserire all’interno del tag <head> la seguente sintassi, in questo modo:

<head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>

Ecco cosa abbiamo fatto: abbiamo collegato con il tag chiuso <link> un foglio di stile stylesheet, inserendo il percorso relativo (ma va bene anche quello assoluto) di dove si trova nell’attributo href.
C’è anche la possibilità di inserire fogli di stile alternativi, mettendo come valore a rel=”alternate stylesheet”.
Per approfondire leggere: Fogli di stile alternativi.

Si può collegare un file esterno anche attraverso la direttiva @import. Questo sistema è uno dei modi più sicuri per risolvere problemi di compatibilità tra vecchi e nuovi browser. Importante notare che il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde e che la dichiarazione deve chiudersi con un punto e virgola. Questo tipo di sintassi va inserito all’interno del tag <style>, ovunque si voglia nel documento.

<style>
  @import url(style.css);
</style>

2. Tag <style>

Usare fogli incorporati. Usando questo metodo non dovremo più compilare un altro file, ma inseriremo le proprietà direttamente all’interno del codice HTML. Ecco come:

<style type="text/css"> 
elemento {
  proprietà: valore;
}
</style>

3. Attributo "style"

Un ultimo metodo che useremo poco se non per le correzioni dell’ultima ora è quello dell’inserimento di fogli “in linea”. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:

<elemento style="proprietà1: valore1; proprietà2: valore2;">

Inserire i fogli di stile

L'attributo Media

L’attributo media è un attributo opzionale che può essere collegato sia all’elemento ‘<link>’ e all’elemento ‘<style>’. Questo attributo fa sì che il codice CSS funzioni solo in particolari situazioni. Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l’attributo:

all: il CSS si applica a tutti i dispositivi di visualizzazione
screen: valore usato per la resa sui normali browser web
print: il CSS viene applicato in fase di stampa del documento
projection: usato per presentazioni e proiezioni a tutto schermo
aural: da usare per dispositivi come browser a sintesi vocale
braille: il CSS viene usato per supporti basati sull’uso del braille
embossed: per stampanti braille
handheld: palmari e simili
tty: dispositivi a carattere fisso
tv: web-tv

Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale). E’ possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:

<link rel="stylesheet" type="text/css" media="print, tv, aural" href="style.css" />

In un singolo documento HTML è possibile dunque collegare più fogli di stile.

L'attributo media

Selettori

Introduciamo ora un importante argomento, ovvero la classificazione degli elementi HTML che poi ci servirà per poterli riconoscere all’interno del file CSS.
Innanzitutto gli elementi si identificano per il nome, ecco un esempio:

div {
   background-color: red;
}

Con questa dicitura si assegna a tutti i div presenti nella pagina uno sfondo (background-color) di colore rosso.

Ereditarietà

Altro concetto fondamentale ed utile da assimilare è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l’ereditarietà. Esso fa sì che molte proprietà impostate per un elemento siano automaticamente ereditate dai suoi discendenti.

Il documento è una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child in inglese). Ogni elemento è genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. In base a queste semplici indicazioni possiamo analizzare il nostro documento.
Ad esempio <body> è figlio di <html>, ma è anche genitore di <h1>, <div> e <p>. Quest’ultimo è a sua volta genitore di un elemento <b>.
Si potrebbe concludere che anche <body> sia in qualche modo genitore di <b>. Non è esattamente così. Introduciamo ora un’altra distinzione, mutuata anch’essa dal linguaggio degli alberi genealogici, quella tra antenato (inglese: ancestor) e discendente (inglese: descendant).
La relazione parent-child è valida solo se tra un elemento e l’altro si scende di un livello. Esattamente come in un albero familiare si indica la relazione tra padre e figlio. Pertanto possiamo dire che <head> è figlio di <html>, che <a> è figlio di <p>, etc. Tra <div> e <a>, invece si scende di due livelli: diciamo allora che <div> è un antenato di<a> e che questo è rispetto al primo un discendente.
Seguendo la relazione parent-child è possibile classificare come siblings (fratelli in inglese) i tag adiacenti <h1>, <div> e <p>, figli cioè di uno stesso elemento.

Classificazione degli elementi

Selettori ereditari & vari

Si può quindi selezionare un elemento in base alla posizione che occupa all’interno del documento, vediamo i vari modi:

Discendente

div p {
   color: green;
}

Questa sintassi significa che tutti i tag <p> che sono discendenti (NB non per forza figli!) di un div avranno i font colorati di verde.

Figlio

div > p {
   color: blue;
}

Questa sintassi significa che tutti i tag <p> che sono figli (NB non discendenti!) di un div avranno i font colorati di blu.

Adiacente

div + p {
   color: red;
}

Questa sintassi significa che tutti i tag <p> che si trovano sullo stesso livello di un div avranno i font colorati di rosso.

Raggruppamenti

h1, h2, h3 {
   color: white;
}

Questa sintassi significa che tutti i h1, h2, h3, indifferentemente dalla loro posizione all’interno del documento, avranno i font colorati di bianco.

I selettori

Id & Classi

Id

Assegnare un ‘id’ ad un elemento significa aggiungere nel codice HTML l’attributo id all’elemento in questione, in questo modo:

<div id="divrosso">

Ora questo ‘div’ sarà riconosciuto come ‘divrosso’. Immaginate quindi che ‘div’ sia la “razza” dell’elemento, mentre il suo nome ‘divrosso’.
Per richiamarlo in un codice CSS si dovrà inserire la seguente stringa, utilizzando il carattere #:

div#divrosso {
   background-color: red;
}

Di conseguenza solamente l’elemento con id ‘divrosso’ avrà lo sfondo colorato di rosso.
NB: non è possibile assegnare lo stesso id a più elementi uguali.

Classi

Assegnare una ‘classe’ ad un elemento significa aggiungere nel codice HTML l’attributo class all’elemento in questione, in questo modo:

<div class="divrossi">

Ora questo ‘div’ e tutti gli altri a cui sarà attribuita la classe ‘divrossi’ saranno riconosciuti come ‘divrossi’. Immaginate quindi che ‘div’ sia la “razza” dell’elemento, mentre la sua famiglia ‘divrossi’.
Per richiamarlo in un codice CSS si dovrà inserire la seguente stringa, unendo nome dell’elemento al nome della classe mediante un punto:

div.divrossi  {
   background-color: red;
}

Tutti i div con classe ‘divrosso’ avranno perciò uno sfondo rosso.

Si può poi fare un discorso a parte per la classe generica, la quale si imposta nel seguente metodo:

.divrossi  {
   background-color: red;
}

Tutti gli elementi, qualsiasi sia la loro natura, che abbiano la seguente classe, se possibile saranno impostati con sfondo rosso!

Id & Classi

Conflitti tra stili

Bisogna tenere presente che esiste una determinata gerarchia nell’attribuzione di proprietà ai vari elementi.
Li elenchiamo in ordine decrescente di importanza:

Attributo “style”
Tag <style>
Foglio esterno

Questo elenco significa che se per uno stesso elemento (o più in generale selettore) è presente una dichiarazione della stessa proprietà css in tutte (o almeno due) le forme possibili, la precedenza è data alle caratteristiche impostate all’interno dell’attributo “style”, dopodiché si passa a quelle descritte all’interno del tag <style> e per ultime valgono quelle del foglio esterno.

Simile è l’impostazione vigente tra id e calssi con i primi ad avere la precedenza sulle seconde.

Conflitti tra stili

Riepilogo: struttura di base

La struttura base del foglio di stile si basa principalmente su quella del nostro file HTML, infatti non possiamo impostare colori, layout e tutto il resto se non c’è niente nella pagina principale. Facciamo ora un breve riepilogo delle procedure da seguire (nel caso più comune, quello cioè dell’utilizzo di un foglio esterno):

Creare un file con estensione .css
Inserire nel nostro foglio HTML la stringa sopra citata per collegare il file .css
Dare id e classi ai vari elementi HTML per poterli identificare meglio

Dare un’id e una classe ad un elemento significa, nel codice HTML, fare questo:

<div id="div_titolo"></div>
<div class="div_verdi"></div>

In questo caso il primo <div> sarà riconosciuto nel foglio di stile grazie al suo id “div_primo” mentre il secondo verrà identificato (assieme a tutti gli altri div con la stessa classe) con la classe “div_verdi”. Così nel vostro foglio CSS potrete scrivere:

div#div_titolo {
  width: 50px;
  height: 50px;
  background-color: #33adf4;
}
 
div.div_verdi {
  width: 100px;
  height: 100px;
  background-color: #2cab4f;
}

I CSS più comuni

Passiamo ora ad analizzare i css più comuni e le loro caratteristiche.

Le triplette RGB

Le triplette RGB sono delle serie di caratteri alfanumerici su base esadecimale (le cui cifre, cioè, oltre alle normali 0-9 sono anche a-f), che corrispondono ad un colore.
RGB significa “Red Green Blue” (rosso, verde e blu) che identificano proprio i tre colori percepiti dal nostro occhio. Per creare il colore da noi desiderato dobbiamo comporre una tripletta con le percentuali di R, G e B caratteristiche del nostro colore.
Di base questa tripletta è composta come #RRGGBB dove ogni cifra varia da 0 a f(16) permettendoci di svariare fra un’ampia gamma di colori. Per comodità esistono le triplette abbreviate come #38a che corrispondono a #3388aa. Nonostante tutto ci sono 16 colori più usati disponibili come stringa (red, yellow....).

#FFFFFF: Bianco - L’insieme di tutti i colori è il bianco, abbiamo quindi i valori massimi
#000000: Nero - Questa tripletta rappresenta invece il nero, l’assenza di colore
#FF0000: Rosso - La coppia di cifre “R” ha i valori massimi, mentre le altre hanno 0
#00FF00: Verde - La coppia di cifre “G” ha i valori massimi, mentre le altre hanno 0
#0000FF: Blu - La coppia di cifre “B” ha i valori massimi, mentre le altre hanno 0

NB prima di ogni tripletta va inserito l’asterisco #.

Le proprietà del colore sono due:

div {
  color: green;
  background-color: #555;
}

Entrambe la proprietà hanno come valori possibili le triplette RGB o il nome inglese del colore (vedi elenco dei colori CSS, per maggiori informazioni).
C’è però da fare una distinzione: color modifica il colore del testo, mentre background-color agisce sullo sfondo.

Gestione del colore

Backgrounds

Per gestire gli sfondi abbiamo a disposizione alcune proprietà, il cui nome ovviamente inizia per background:

div {
   background-color: colore;
   background-image: url(immagini/immagine.jpg);
   background-repeat: repeat;
}

Nell’esempio proposto sono presentate tre proprietà: oltrepassando la prima, sopra analizzata, osserviamo le restanti due:

background-image imposta un’immagine di sfondo della quale bisogna fornire il percorso, da scrivere all’interno del sintagma url(...).
background-repeat ha come possibili valori:
- repeat: ripete orizzontalmente e verticalmente l’immagine (a patto che questa sia più piccola del tag contenitore)
- repeat-x: ripete orizzontalmente l’immagine (a patto che questa sia più piccola del tag contenitore)
- repeat-y: ripete verticalmente l’immagine (a patto che questa sia più piccola del tag contenitore)
- no-repeat: disinibisce la ripetizione dell’immagine di sfondo

Gesitone dello sfondo

La formattazione

font-family

Grazie a questo attributo riuscirete a dare uno specifico carattere al testo.

Esempio

p { 
   font-family: arial, Verdana, sans-serif;
}

Dopo l’attributo font-family abbiamo specificato due font principali (arial e Verdana), questo per far si che nel caso in cui il browser, per qualche motivo non dovesse leggere il primo font, proverà a leggere il secondo. Dopo di questi va specificata la famiglia a cui i font appartengono. Per le cinque famiglie vedi il link “La formattazione di base” a fine paragrafo.

font-style

Questo attributo prevede tre opzioni e serve per la formattazione del testo, vediamoli tutte velocemente:

Esempi

p#primo {
  font-style: normal;
}
 
p#secondo {
   font-style: italic;
}
 
p#terzo {
   font-style: oblique;
}

Nel primo esempio il testo avrà la consueta formattazione, nel secondo sarà in corsivo e nel terzo avrà una formattazione molto simile al corsivo.

font-size

Questo attributo ci permette di determinare la grandezza del nostro testo. I metodi e le unità di misura sono molteplici, ma per semplicità e praticità impareremo solo quella in pixels.

Esempio

p {
   font-size: 30px;
}

NB Spesso se si distanzia l’unità di misura dalle cifre, la proprietà non funziona, raccomandiamo quindi di scrivere ‘12px’ e non ‘12 px’.

font-weight

Serve a definire la consistenza o “peso” visivo del testo. Si applica a tutti gli elementi ed è ereditata.

Sintassi

selettore { font-weight: <valore>; }

I valori che useremo principalmente sono quelli assoluti che qui riassumiamo:

valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante)
normal. Valore di default. E’ l’aspetto normale del font ed equivale al valore 400
bold. Il carattere acquista l’aspetto che definiamo in genere grassetto. Equivale a 700

text-align

La proprietà serve a impostare l’allineamento del testo. E’ ereditata e si applica a tutti gli elementi.

Sintassi

selettore { text-align: <valore>; }

I valori possibili sono quattro:

left. Allinea il testo a sinistra
right. Allinea il testo a destra
center. Centra il testo
justify. Giustifica il testo

La formattazione di base

Questa guida invece permette di approfondire l’argomento –> La formattazione avanzata

Box Model

Per creare a nostro piacimento la struttura della pagina, ad esempio decidere quanto ampi saranno i nostri div, la grandezza minima e quella massima dei nostri elementi, ci sono una serie di importantissimi attributi da valutare.

Altezza

Per decidere quanto si espanderà in altezza un elemento abbiamo a disposizione tre diversi attributi, vediamoli uno alla volta.

height: Il presente attributo ci permette di determinare con precisione l’altezza di un elemento. I valori vanno espressi principalmente in pixels, senza spazi come abbiamo visto precedentemente. Per impostare il valore di default, determinato dal contenuto, bisogna inserire auto; in pratica l’altezza si adatterà al contenuto.

selettore { height: <valore>; }

min-height: Questo attributo ci permette di impostare un’altezza minima sull’elemento. Se il contenuto dell’elemento superasse l’altezza minima, l’elemento si dilata. Il valore va preferibilmente espresso in pixels (px).

selettore {min-height: <valore>;}

max-height: Questo attributo ci permette di impostare un’altezza massima per l’elemento. Se il contenuto dell’elemento superasse l’altezza massima, l’elemento non andrebbe oltre l’altezza impostata. Il valore va preferibilmente espresso in pixels (px).

selettore {max-height: <valore>;}

Se necessario, è possibile esprimere il valore dell’altezza in percentuale rispetto all’elemento contenitore.

Gestione dell'altezza

Larghezza

Per decidere quanto si espanderà in larghezza un elemento abbiamo a disposizione tre diversi attributi, vediamoli uno alla volta.

width: Il presente attributo ci permette di determinare con precisione la larghezza di un elemento. I valori vanno espressi principalmente in pixels, senza spazi come abbiamo visto precedentemente. Per impostare il valore di default, determinato dal contenuto, bisogna inserire auto.

selettore { width: <valore>; }

min-width: Questo attributo ci permette di impostare una larghezza minima sull’elemento. Se il contenuto dell’elemento superasse la larghezza minima, l’elemento si dilata. Il valore va preferibilmente espresso in pixels (px).

selettore { min-width: <valore>; }

max-width: Questo attributo ci permette di impostare una larghezza massima per l’elemento. Se il contenuto dell’elemento superasse la larghezza minima, l’elemento non andrebbe oltre la larghezza impostata. Il valore va preferibilmente espresso in pixels (px).

selettore { max-width: <valore>; }

Se necessario, è possibile esprimere il valore della larghezza in percentuale rispetto all’elemento contenitore.

Gestione della larghezza

Margini

Cinque sono le proprietà con cui è possibile definire un margine. Quattro di esse sono singole e impostano la distanza per ciascun lato dell’elemento. L’ultima, margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.
Le distanze possono essere indicate con pixels o percentuali.

margin-top: Definisce la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.

Sintassi

p.box {margin-top: 10%;}
img {margin-top: 20px;}

margin-bottom: Definisce la distanza tra il lato inferiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.

Sintassi

p.box {margin-bottom: 10%;}
img {margin-bottom: 20px;}

margin-left: Definisce la distanza tra il lato sinistro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.

Sintassi

p.box {margin-left: 10%;}
img {margin-left: 20px;}

margin-right: Definisce la distanza tra il lato destro di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.

Sintassi

p.box {margin-right: 10%;}
img {margin-right: 20px;}

margin: E’ una proprietà a sintassi abbreviata. Con essa è possibile specificare i valori per tutti e quattro i lati di un elemento. Si applica a tutti gli elementi e non è ereditata. Ci permette quindi di determinare tutti i margini che vogliamo immettere, senza dover dare all’elemento quattro attributi.

Sintassi

div {margin: 10px 15px 10px 20px;}

Per capire meglio di quali margini stiamo parlando si veda la seguente scrittura che è del tutto uguale alla precedente, solamente espressa in forma estesa:

div {
   margin-top: 10px;
   margin-right: 15px;
   margin-bottom: 10px;
   margin-left: 20px;
}

I margini vanno quindi espressi sempre in senso orario a partire dall’alto.

I margini

Padding

Per semplificare l’apparentemente difficile funzionamento del padding si pensi che se il margine agisce all’esterno dell’elemento (distanziandolo da tutti gli elementi che gli sono esterni, appunto) il padding agisce sugli elementi interni (se abbiamo un testo dentro un contenitore, il contenitore non sarà distanziato dai bordi della pagina, ma il testo comparirà con una certa distanza dai bordi del contenitore). Anche qui sono presenti quattro proprietà singole per i lati e una a sintassi abbreviata (padding).
Sintassi

elemento { padding-<lato>: <valore>; }

padding-top: Imposta l’ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata.
padding-right: Imposta l’ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata.
padding-bottom: Imposta l’ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata.
padding-left: Imposta l’ampiezza del padding sul lato sinistro di un elemento. Si applica a tutti gli elementi e non è ereditata.
padding: Proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento. Valgono per essa tutte le osservazioni e le regole sintattiche viste per margin.

Il padding

Bordi

La sintassi dei bordi è tra le più complicate ma riesce a dare un grande effetto alla pagina. Vediamo ora le singole proprietà:

Sintassi con proprietà singole

selettore {
   border-<lato>-color: <valore>;
   border-<lato>-style: <valore>;
   border-<lato>-width: <valore>;
}

Sintassi con proprietà abbreviate

selettore { border-<lato>: <valore width> <valore style> <valore color>; }

In entrambi gli esempi di sintassi sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left. Esaminiamo ora i valori delle varie proprietà:

color: identifica il colore del bordo, i valori possibili sono quelli già visti
style: indica il tipo di bordo, noi consigliamo solid, rimandiamo al link sottostante per maggiori informazioni
width: rappresenta la larghezza del bordo

Anche per i bordi è valida la sintassi sintetica, partendo da top in senso antiorario.
Se invece si inserisce un solo valore, il browser lo considererà valido per tutti quattro i lati.

I bordi

Flusso degli elementi

Per riuscire a cambiare le proprietà essenziali degli elementi, il fatto cioè di essere elementi inline o blocco che abbiamo visto nel corso xHTML e cambiare il loro flusso all’interno del documento sono presenti tre proprietà importantissime per i CSS: esaminiamole.

Display

La proprietà display è di assoluta importanza nei CSS poiché ci permette di cambiare quel caratteristica che ci appariva immutabile. Stiamo parlando delle proprietà che avevano gli elementi xHTML: inline, blocco oppure lista. La proprietà è ereditata.

Sintassi:

selettore {display: <valore>;}

La lista dei valori possibili è molto lunga, ma ci limitiamo a citare quelli più importanti e supportati da quasi tutti i browser.

inline. Valore di default. L’elemento assume le caratteristiche degli elementi inline.
block. L’elemento viene trattato come un elemento di blocco.
list-item. L’elemento si trasforma in un elemento lista.
none. L’elemento non viene mostrato. O meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box. Diversa, come vedremo, la proprietà visibility:hidden, che invece si limita a nascondere l’elemento.

Quindi se voglio vedere un paragrafo <p> (elemento di blocco) come inline dovrò usare la seguente sintassi:

p {display: inline;}

Float

La proprietà float ci permette invece di rimuovere l’elemento selezionato dal normale flusso del documento, che di norma lo manderebbe a capo, quindi decidere se spostarlo a destra o a sinistra.

Sintassi:

selettore {float: <valore>;}

I valori attribuibili sono tre:

left. L’elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra.
right. L’elemento viene spostato sul lato destro, il contenuto scorre a sinistra.
none. Valore iniziale e di default in mancanza di una dichiarazione esplicita. L’elemento mantiene la sua posizione normale.

N.B. : Se usate il float con le immagini non avete problemi perché esse hanno una dimensione intrinseca che il browser riconosce. Ma se lo applicate ad altri elementi dovete esplicitamente impostare una dimensione orizzontale con la proprietà width.

Clear

La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi tolti dal normale flusso del documento con la proprietà float. Si applica solo agli elementi blocco e non è ereditata.

Sintassi :

selettore {clear: <valore>;}

I valori assumibili son questa volta quattro:

none. Gli elementi con float possono stare a destra e sinistra dell’elemento.
left. Si impedisce il posizionamento a sinistra.
right. Si impedisce il posizionamento a destra.
both. Si impedisce il posizionamento su entrambi i lati.

Per capire meglio qui si possono trovare degli esempi pratici di applicazione delle proprietà float e clear: Float & Clear

Tre proprietà speciali: display, float, clear

Posizionamento degli elementi

Un altro argomento molto complesso è il posizionamento degli elementi all’interno della pagina: la proprietà principale è position, la quale possiede specifici valori, ma ne esistono anche altre secondarie.

Position

La proprietà fondamentale per il posizionamento degli elementi è position, che ci permette di determinare la posizione rispetto alla pagina dell’elemento.

Sintassi:

selettore {position: <valore>;}

I valori che position può assumere sono quattro:

static. E’ il valore di default, già preimpostato. Rappresenta il normale posizionamento dell’elemento nella pagina;
absolute. L’elemento, o meglio, il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom, sotto descritte. Il posizionamento avviene sempre rispetto al box contenitore dell’elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all’elemento radice HTML, che in condizioni standard coincide con l’area del browser che contiene il documento e che ha inizio dall’angolo superiore sinistro di tale area. Un elemento posizionato in modo assoluto scorre insieme al resto del documento.
fixed. Come per absolute l’elemento viene rimosso dal flusso, posizionato nella pagina con le distanze dalla stessa stabilite da top, left, right o bottom, e rimane lì. Per meglio capirci non scorre con il resto della pagina, ma resta fisso dove l’abbiamo posizionato, ancorato all’elemento radice.
relative. L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, right o bottom. Ma qui esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

Top

Per gli elementi posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore dell’elemento contenitore. Per gli elementi posizionati con relative stabilisce invece l’ammontare dello spostamento rispetto al lato superiore della posizione originaria.

Sintassi:

selettore {top: <valore>;}

Left

Per gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano l’elemento verso destra, valori negativi verso sinistra.

Sintassi:

selettore {left: <valore>;}

Bottom

Per i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell’elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria.

Sintassi:

selettore {bottom: <valore>;}

Right

Per i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell’elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria.

Sintassi:

selettore {right: <valore>;}

Visibility

Questa proprietà determina se un elemento debba essere visibile o nascosto. Si applica a tutti gli elementi e non è ereditata.

Sintassi

selettore {visibility: <valore>;}

I valori che visibility può assumere sono due:

visible. L’elemento è visibile. Valore di default.
hidden. L’elemento è nascosto, ma mantiene il suo posto nel layout dove apparirà come una zona vuota. In ciò è diverso dal valore none della proprietà display.

Esempio Visibility
Il valore none della proprietà display fa sparire il <div>, che non occupa nemmeno il suo posto. Il valore hidden della proprietà visibility invece, non lo fa vedere, ma gli fa comunque occupare lo spazio all’interno del documento.

Z-Index

La proprietà z-index ci permette di creare dei “livelli” con cui, più alto è il valore, più in rilievo sarà l’elemento. Questo ci permette di sovrapporre più elementi e di visualizzarli di conseguenza uno sopra all’altro. Le parti che vengono così nascoste non si vedranno graficamente.

Sintassi:

selettore {z-index: <valore>;}

In seguito ad un posizionamento, infatti, è possibile che un elemento si sovrapponga ad un altro rendendolo illeggibile. Impostando lo z-index è possibile modificare l’ordine di tutti gli elementi. Questi sono i valori di z-index:

auto. L’ordine dei livelli è uguale per tutti gli elementi.
valore numerico. Un valore superiore indica un livello superiore.

Esempio Z-Index

Posizionamento degli elementi & Gestione della posizione

I Layouts

Il layout di una pagina è l’insieme di tutti gli elementi organizzati in modo tale da formare una struttura chiara e semplice da usare per l’utente.
Di seguito si trova il link ad una serie di layouts di esempio, gentilmente regalatici da Michele Pittoni.
Vi è inoltre la possibilità di scaricare l’intera collezione di esempi!!

Layouts CSS

Consigliamo di usare l’addon Firebug per poter meglio osservare i codici XHTML e CSS.

Versione per Firefox
Versione per Chrome

tronWeb