Gli elementi nei CSS

tipi-di-elemento-nei-CSS

tipi-di-elemento-nei-CSS

I CSS ammettono diversi tipi di elementi, che definiscono il comportamento degli oggetti cui sono associati.

Ogni elemento Html e’ associato automaticamente ad un certo tipo di elemento; tuttavia il tipo puo’ essere ridefinito grazie alla proprieta’ display.

I tipi di elementi che e’ possibile controllare tramite la proprieta’ display, sono:

  • elementi di livello blocco (display:block), definiti blocchi, per comodita’;
  • elementi in linea (display:inline);
  • elementi di lista (display:list-item).

Gli oggetti che compongono la pagina sono inseriti in essa seguendo quello che e’ detto flusso, il quale regola la disposizione degli oggetti nella pagina.

Elementi a livello blocco

Gli elementi a livello blocco, secondo il normale flusso, realizzano dei box che prendono tutto lo spazio orizzontale e si dispongono uno di seguito all’altro, in verticale. Sono considerati elementi a livello blocco DIV, P e BLOCKQUOTE.

<p>I web designer</p>

<p>Blog dedicato ai web designer</p>

<p>www.iwebdesigner.it</p>

Elementi in linea

Gli elementi in linea, secondo il normale flusso, si dispongono nel contenuto della pagina all’interno delle righe di testo. Sono considerati elementi in linea: STRONG,EM,A e SPAM.

<p>Ciao, mi chiamo <strong>Magoo</strong> e quando non so cosa fare mi diverto insieme

al mio amico <strong>Zep</strong> a scrivere articoli sul nostro blog! <em>www.iwebdesigner.it</em>

Nell’esempio sopra indicato, le stringhe “Magoo”,”Zep” e “www.iwebdesigner.it” sono gli elementi in linea generati dai relativi tag.

Elementi di lista

GLi elementi di lista sono un particolare tipo di elemento a livello blocco, caratterizzati da un marcatore di lista. Gli elementi di lista piu’ usati sono LI, UL e OL.

<ol>

<li>Elemento della lista</li>

<li>un altro elemento della lista</li>

</ol>

<ul>

<li>Elemento della lista1</li>

<li>un altro elemento della lista1</li>

<ul>

La proprieta’ display

Tramite la proprieta’ display, e’ possibile modificare il tipo degli elementi.

I valori della proprieta’ display, supportati dai browser, sono:

  • inline: converte ogni tipo di elemento in elemento in linea;
  • block: converte ogni tipo di elemento in elemento a livello blocco;
  • list-item: converte ogni tipo di elemento in elemento di lista.

Se si considera il seguente codice Html:

<p>I web designer</p>

<p>Blog dedicato ai web designer</p>

<p>www.iwebdesigner.it</p>

Assegnando alla proprieta’ display il valore list-item, costruendo cosi’ il CSS:

p{

display: list-item;

}

Avremo come risultato una lista, invece che dei paragrafi.

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

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