CREARE SITI WEB in HTML e CSS > Elementi di blocco e di linea
Ogni volta che chiudi un elemento di blocco, il testo va a capo riga.
Ogni volta che chiudi un elemento di linea, il testo non va a capo riga.
Ad esempio:
<h1> è un elemento di blocco, pertanto la linea di codice:
<h1>Questo è il titolo più grande</h1> Questo testo viene dopo il tag "h1"
viene visualizzata nel browser almeno su due righe:
Questo è il titolo più grande
Questo testo viene dopo il tag "h1"
<strong> è un elemento di linea, pertanto la linea di codice:
<strong> Questo è del testo enfatizzato. </strong> Questo testo viene
dopo il tag "strong"
viene visualizzata nel browser su una riga (se lo schermo lo permette)
Questo è del testo enfatizzato.
Questo testo viene dopo il tag "strong"
Alcuni elementi di blocco sono:
<div> <p> <h1> <h2> <h3> <h4> <h5> <h6>
Alcuni elementi di linea sono:
<strong> <em> <a> <span> <kbd> <tt>
Per annullare il "testo a capo riga" di un elemento di blocco,
- attribuisci all'elemento di blocco la dichiarazione:
display: inline
Per trasformare un elemento di linea in un elemento di blocco,
- attribuisci all'elemento di linea la dichiarazione:
display: block
Ecco un esempio applicato:
| codice HTML |
|
<html> <head> <style type="text/css"> .contenitore {background: yellow} .contenitore h1 {display:inline; background: pink} .contenitore strong {display:block; background: green} </style> </head> <body> </div> Flusso normale: <h1>Questo testo è compreso tra il tag "h1"</h1> Questo testo viene dopo il tag "h1" <strong>Questo è del testo enfatizzato (strong).</strong> Questo testo viene dopo il tag "strong" <div class="contenitore"> Flusso modificato con la proprietà display: <h1>Questo testo è compreso tra il tag "h1"</h1> Questo testo viene dopo il tag "h1" <strong>Questo è del testo enfatizzato (strong).</strong> Questo testo viene dopo il tag "strong"</div> </body> </html> |
| risultato pagina web |
|