Lez.24 - Corso Intermedio Css

DISPLAY - La PROPRIETA' DISPLAY

La Proprietà display

Display (schermo - visualizza) è una proprietà che ci da la possibilità di modificare il modo in cui l'elemento occupa lo spazio all'interno del suo contenitore.
In definitiva questa proprietà determina la maniera in cui verrà visualizzato l'elemento.

Questi sono alcuni dei valori che può avere la proprietà display:
display: initial; initial (iniziale) l'elemento occuperà lo spazio all'interno della pagina in base al tipo di elemento che è, l'esempio che noi vedremo oggi nel codice è uno span, e sappiamo che uno span è un elemento di linea e quindi occuperà lo spazio dato proprio dalla sua stessa dimensione. Nel nostro caso initial corrisonde a inline (in linea), questo, come abbiamo già detto, perché span è un elemento di linea come potrebbe essere anche un'immagine.

display: block; block (bloccare) è il valore che trasforma lo spazio occupato dall'elemento e lo trasforma come se questo elemento fosse un elemento di blocco, con tutte le caratteristiche che ha un elemento di blocco e quindi andandosene a capo e mandando a capo il resto del paragrafo prendendosi tutto lo spazio della riga per se.

display: none; none (nessuna) questo valore toglie l'emento dal flusso della pagina, l'emento non solo non si vede, ma non c'è più, viene eliminato del tutto.
display: list-item; questo valore trasforma l'elemento come se fosse la voce di una lista. Quindi è un elemento che si prende tutta la sua larghezza ma è caratterizzato da un pallino come quello degli elenchi puntati.
Per vedere il pallino diamo un margine.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>La proprietà Display</title>
  <meta charset="utf-8">
  <style type="text/css">
      #panino {
	      color: coral;
	      background-color: aqua;
	      display: list-item;
	      margin-left: 25px; 
      }
  </style>
 </head>
 <body>			    
    <h1>La Proprietà Display - (visibilità)</h1>
    <p>Questo è un paragrafo di testo che contiene un <span id="panino">elemento </span>al quale viene cambiato il valore della proprietà display</p>
 </body>               
</html>                    

Ora vediamo un'altro valore della proprietà display molto interessante che vi sarà nolto utile, ed è:
display: inline-block; questo valore fa si che l'elemento internamente si comporta come un elemento di blocco ma all'esterno si comporta come un elemento di linea.
Quindi inline-block determina che l'elemnto si comporti come elemento di blocco ma che possa contenere degli altri elementi al suo fianco come un qualsiasi altro elemento di linea.

Questo ci permette di creare un testo su due colonne come si vede nel codice sotto:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>La proprietà Display con il valore: inline-block</title>
  <meta charset="utf-8">
  <style type="text/css">
     p {
	display: inline-block;
	width: 46%;
	text-align: justify;
	padding: 8px;
     }
  </style>
 </head>
 <body>			    
   <h1>Con display: inline-block; vediamo come possimo creare due paragrafi su due colonne</h1>
   <p>Questo è un paragrafo che adesso formatteremo su due colonne. Questo è un paragrafo che adesso formatteremo su due colonne. Questo è un paragrafo che adesso formatteremo su due colonne.</p>
   <p>Questo è un paragrafo che adesso formatteremo su due colonne. Questo è un paragrafo che adesso formatteremo su due colonne. Questo è un paragrafo che adesso formatteremo su due colonne.</p>
 </body>               
</html>