logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Le proprietà display, float e clear

Le tre proprietà che vedremo in questa lezione, cioè display, float e clear, vengono usate nel codice CSS per modificare radicalmente la presentazione del documento. Sono proprietà queste, molto potenti ma vanno usate con molta cautela e sapendo bene cosa si stà facendo, e bisogna anche tenere conto di tutta una serie di difficoltà a livello di rendering tra i diversi browser.

1- display: La proprietà display nei CSS permette di gestire il tipo di elementi che sono presenti nelle pagine. Se ricordate, nelle lezioni precedenti abbiamo visto che in genere i contenuti di una pagina sono visualizzati come elementi in linea (inline), elementi blocco (block) oppure come elementi di lista (list-item). I browser visualizzano i tag secondo le loro impostazioni predefinite e ad esempio, il tag <li> corrisponde a una lista, mentre i tag <p> e <div> sono considerati degli elementi blocco. Adesso tramite la proprietà display possiamo gestire questo tipo di elementi, trasformando ad esempio una lista in un elemento in linea, oppure cambiando dei blocchi racchiusi dal tag <p> in una lista ordinata di elementi.

   p { display: inline; }

La lista dei valori per la proprietà display è molto lunga, ma la maggior parte di essi non è supportata da nessun browser, quindi per comodità analizziamo i più usati, che sono:

Per comprendere meglio guardiamo gli esempi in questa pagina


2- float: Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati, libero di flottare appunto a destra o a sinistra usando la proprietā float. Di conseguenza, il contenuto che circonda l'elemento scorrerā intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.

float_left

   #box { float: left; }

I valori che possiamo inserire per questa proprietà, sono:

Se per esempio vogliamo avere un testo che "gira" intorno all'immagine, il codice Xhtml dell'esempio che stiamo per vedere apparirà così:

   <div id="imaging">
          <img src=" bill.jpg " alt=" Bill Gates ">
   </div>
   <p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi          vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae          paulatim vello unum, demo etiam unum, dum cadat elusus ....<p>

Per avere una immagine flottante a sinistra e il testo che la circonda, dobbiamo solo definire nel CSS la larghezza (width) del box che circonda l'immagine e quindi fissare a left la proprietà float.


   #imaging {
                    float: left;
                    width: 100px;
                  }

Per comprendere meglio, guardiamo questo esempio


3- clear: Questa proprietà viene usata per controllare come si dovrebbero comportare gli elementi che seguono elementi flottanti, e che potrebbero trovarsi in posizioni indesiderate. Per default gli elementi successivi si muovono in modo da riempire lo spazio disponibile lasciato libero quando un box viene flottato da un lato. Utilizzando la proprietà clear risolviamo questo problema. La proprietà non è ereditata.

   h1 { clear: both; }

Quindi i valori che si possono inserire per la proprietà clear sono:

Per comprendere meglio le proprietà float e clear guardiamo gli esempi in questa pagina

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice