PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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
04-display (29K)







Link sponsorizzati