Magazine Architettura e Design

Gli elementi nei CSS

Da Iwebdesigner @Iwebdesigner_it

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.

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.

  1. Elemento della lista
  2. 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.


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

  • Creare CSS per Html 5

    Creare Html

    Nel precendente articolo, abbiamo visto il codice della pagina in Html5, adesso gli attribuiamo il foglio di stile o CSS.Avevamo chiamato il CSS style.css e lo... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Come creare Check Box con CSS e jQuery

    Come creare Check jQuery

    Oggi con questo tutorial vediamo come costruire delle caselle check box nuove sia nella forma che nel design.Partiamo a bomba analizzando il codice Html, come... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Shadowbox con Javascript e Css

    Shadowbox Javascript

    Dopo aver analizzato il LightBox, prendiamo in esame una delle sue migliori alternative, lo Shadowbox. Dal sito ufficiale possiamo settare dalla pagina dei... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Come centrare un DIV con CSS e jQuery

    Come centrare jQuery

    Nella costruzione di un layout grafico vi sara’ capitato mille volte di centrare un DIV sia orizzontalmente che verticalmente. Oggi con questo breve tutorial... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, TECNOLOGIA
  • Ottimizzare CSS per iPhone

    Ottimizzare iPhone

    Quasi tutti i siti internet sono visualizzabili dall’iPhone, eccezione fatta per quelli costruiti con Flash. Visualizzare una pagina web su iPhone, non vuol dir... Leggere il seguito

    Da  Iwebdesigner
    CONSIGLI UTILI, TECNOLOGIA
  • Strumenti per creare e testare CSS online

    Strumenti creare testare online

    Sviluppatori e Web Designer sono sempre alla ricerca di modi per ridurre il tempo di progettazione e di sviluppo di un sito web. Leggere il seguito

    Da  Iwebdesigner
    CONSIGLI UTILI, TECNOLOGIA
  • CSS shadow generator

    shadow generator

    Vi segnalo un fantastico generatore gratuito di ombre CSS: “CSS shadow generator“. Tra le sue funzioni troviamo piu’ di 8 stili di ombra, opacità, sfocatura,... Leggere il seguito

    Da  Italiangeek
    TECNOLOGIA