Gli elementi 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.

I web designer

Blog dedicato ai web designer

www.iwebdesigner.it

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.

Ciao, mi chiamo Magoo e quando non so cosa fare mi diverto insieme

al mio amico Zep a scrivere articoli sul nostro blog! www.iwebdesigner.it

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.

Elemento della lista

un altro elemento della lista





Elemento della lista1

un altro elemento della lista1

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:

I web designer

Blog dedicato ai web designer

www.iwebdesigner.it

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.