Con l’avvento dei CSS 2.0 è possibile gestire il posizionamento e la visibilità degli elementi HTML.
La visibilità si gestisce con la proprietà display ed è ereditaria.
I valori che display può assumere sono:
- inline: è il valore di default per diversi elementi html quali, per esempio, anchor, immagini, i tag di formattazione etc. Gli elementi inline sono mostrati mostrato nella riga in cui vengono inseriti ed occupano il minimo spazio indispensabile per mostrarli
- block: è il valore di default per tutti gli elementi che, in qualche modo, interrompono il contenuto “mandando a capo” ciò che è presente all’interno del tag. Tipici elementi block sono i paragrafi, le tabelle etc. Gli elementi che saranno classati con block avranno le caratteristiche tipiche del box model, quindi, bordi, padding, margin, altezza e larghezza.
- inline-block: questo valore consente di sfruttare le caratteristiche degli elementi blocco (e quindi larghezza, altezza, bordi etc) ed in linea (quindi verrà mostrato sulla stessa linea che il contenuto vicino)
- list-item: questo valore trasforma l’elemento classato in una lista (elenco puntato) e quindi erediterà la possibilità di gestire proprietà quali list-type etc.
- none: questa proprietà fa si che l’elemento non venga creato nel box model pur essendo presente nel codice html. Il risultato è che il browser non mostrerà a video ciò che viene stilato con display none
Esempio:
<a style="display:block;width:200px;height:30px;border:1px solid red"> link con proprietà block</a> <div>all'interno di questo div c'è uno span con display:none <span style="display:none">questo testo non verrà mostrato a video</span> </div> <div style="display:list-item">div tipo lista</div>
Il risultato sarà il seguente:
link con proprietà block
Trick
Adotta il display:none per nascondere elementi che non vuoi mostrare per motivi di debug, di sicurezza o per gestire fogli di stile differenti con le @-rules come, per esempio, quelli per la stampante.
Questo articolo è stato letto 56 volte! Se ti è piaciuto, spargi la voce!
Giacomo Rutili
Consulente informatico, sviluppo siti web in ambiente LAMP e personalizzando cms quali WordPress, Joomla! e Drupal. Mi occupo anche di Web Marketing, SEO (Ottimizzazione per i motori di ricerca), SEM (Marketing sui motori di ricerca), SMM (Marketing sui Social media) e tengo corsi di formazione professionale. Mi trovi anche su Google+ Giacomo Rutili+
Follow Me:
