Prima di procedere con il posizionamento degli oggetti all’interno di una pagina, è opportuno specificare i tipi di oggetti o elementi su cui i CSS andranno a operare.

Ci sono tre tipi di oggetti: blocco, in linea e rimpiazzati. In inglese rispettivamente block level, inline  level e replaced.

Oggetti di tipo blocco (block level)

Questi tipi di oggetto, sono gli elementi della pagina che anche visibilmente hanno le sembianze di un blocco, scatole, una sorta di rettangolo largho quanto il proprio contenitore.  Gli elementi blocco di una pagina web sono i tag <p>,<div>, <h1>, <h2>….<h6>,<blockquote>.

Attenzione: “Questo tipo di oggetti come impostazione predefinita sono seguiti da un a capo”.

Gli oggetti successivi agli elementi blocco andranno irrimediabilemnte sotto l’elemento blocco precendente anche se si tratta di altri elementi blocco. Per stravolgere questo tipo di impostazione esiste l’attributo float, ma ne parleremo in seguito.

Oggetti di tipo in linea (inline level)

Gli oggetti di tipo in linea non formano nuovi blocchi di contenuti, ma sono distribuiti, come suggerisce il nome, in più linee. Sono elementi in linea il testo senza tag, <a>, <span>, <strong>, <em>, <abbr>. Questo tipo di oggetti non viene seguito da un a capo predefinito.

Oggetti rimpiazzati (replaced)

Gli oggetti di questo tipo sono tutti quegli oggetti dei quali il browser(per esempio, Mozilla Firefox) dell’utente conosce a priori le dimensioni dell’oggetto. Un esempio di elemento rimpiazzato è una immagine. Infatti inserendo una immagine non è necessario specificare le dimensioni poiché il browser visualizzerà l’immagine nelle sue dimensioni originali.

Nell’html gli oggetti di questo tipo sono appunto <img>, <input>, <textarea>, <select>.

Nella prossima lezione vedremo come posizionare gli oggetti all’interno di una pagina