Display CSS

La proprietà display nei CSS è una delle più importanti per la gestione del layout degli elementi di una pagina web.

Infatti ogni elemento html ha un valore di visualizzazione che può essere block, inline oppure inline-block.

Display CSS – Elementi block

Ad esempio alcuni elementi hanno valore block, cioè iniziano su una nuova linea e occupano tutta la larghezza dello schermo estendendosi da sinistra verso destra.

Alcuni elementi di questo tipo sono dunque:

div – tag che crea un livello andando a capo

p – tag che crea un nuovo paragrafo

li – tag che crea la voce di una lista

h1, h2, …, h6 – tag che creano un titolo esteso per tutta la linea

tag semantici come footer, header, section, ecc.

Display CSS – Elementi inline

Gli elementi inline invece sono quelli che occupano solo lo spazio necessario.

Alcuni esempi sono dunque:

a – tag per creare collegamenti ipertestuali

span – tag per assegnare una classe

Altri elementi infine sono degli inline-block come ad esempio

img – tag per inserire un’immagine seguendo un percorso specifico

Display CSS esempio

Facciamo un semplice esempio predisponendo gli elementi di una lista su un’unica riga.

Impostiamo semplicemente la proprietà display inline per la voce elenco e poi inseriamo un semplice elenco puntato nel codice html.

Ecco dunque l’esempio completo che utilizza la proprietà display dei CSS.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempi display CSS</title>
    <style>
      li {
        display: inline;
        margin-right:10px;
      }
    </style>
  </head>
  <body>
    <h1>Esempio display CSS</h1>
    <ul>
      <li><a href="#">Tutorial CSS3</a></li>
      <li><a href="#">Tutorial HTML</a></li>
      <li><a href="#">Tutorial JavaScript</a></li>
    </ul>
  </body>
</html>

L’immagine sotto mostra quindi cosa avremo impostando la proprietà display:inline per l’elemento li.

display inline li

Secondo esempio

Analogamente impostiamo per il tag a la proprietà block in modo da mandare a capo i collegamenti ipertestuali.

Ecco dunque il codice d’esempio:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio display CSS</title>
    <style>
      a {
        display: block;
        margin-right:10px;
      }
    </style>
  </head>
  <body>
    <h1>Esempio display CSS</h1>
      <a href="#">Tutorial CSS3</a>
      <a href="#">Tutorial HTML</a>
      <a href="#">Tutorial JavaScript</a>
    </ul>
  </body>
</html>

L’immagine sotto mostra dunque l’elenco ottenuto:

display block a

Abbiamo mostrato qualche esempio sulla proprietà display dei CSS, al fine di capirne il funzionamento, nella prossima lezione parleremo di contenitori flessibili.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Font nei CSS

CSS border – border width

Border style CSS

Border color CSS

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *