Ciao Utente e benvenuto nel Forix Forum!
Al fine di garantire una corretta navigazione, con la possibilità di usufruire di tutte le fantastiche funzioni che il forum ti offre, ti invitiamo a registrarti. La procedura di registrazione dura meno di 1 minuto, e fatto ciò, potrai subito navigare tra i migliaia di topic presenti nel sito, chiedendo aiuto inerente a qualsiasi cosa, oppure potrai arricchire la community pubblicando nuovi argomenti oppure commentando con riflessioni, risposte e critiche su argomenti già presenti.
Diventa parte attiva di questo sito. Ti aspettiamo!

Unisciti al forum, è facile e veloce

Ciao Utente e benvenuto nel Forix Forum!
Al fine di garantire una corretta navigazione, con la possibilità di usufruire di tutte le fantastiche funzioni che il forum ti offre, ti invitiamo a registrarti. La procedura di registrazione dura meno di 1 minuto, e fatto ciò, potrai subito navigare tra i migliaia di topic presenti nel sito, chiedendo aiuto inerente a qualsiasi cosa, oppure potrai arricchire la community pubblicando nuovi argomenti oppure commentando con riflessioni, risposte e critiche su argomenti già presenti.
Diventa parte attiva di questo sito. Ti aspettiamo!
Vuoi reagire a questo messaggio? Crea un account in pochi click o accedi per continuare.

Classificazione di elementi e tag XHTML

4 partecipanti
 :: Improve your Skinning :: District Computer & News
Andare in basso
Valerio
Valerio
Lover Member
<B>Posts</B> Posts : 3300
<B>Età</B> Età : 27
<B>Registrato Dal</B> Registrato Dal : 31.07.10
+

Classificazione di elementi e tag XHTML Empty Classificazione di elementi e tag XHTML

Dom Ott 17 2010, 10:23
La prima lezione di questa guida potrebbe spiazzare. Non parleremo di CSS, ma di (X)HTML. O meglio, riprenderemo alcuni aspetti di questo linguaggio che sono propedeutici per una migliore comprensione del meccanismo di funzionamento dei CSS. Sapere bene su che cosa si interviene con i fogli di stile è un passo necessario, visto che le cose di cui parleremo, specie con l'avvento e l'abuso degli editor visuali, sono spesso trascurate o misconosciute dai più. Se mi passate la metafora, possiamo dire che faremo come un bravo chirurgo che prima di imparare gli strumenti deve conoscere bene il corpo umano per operare con successo e senza fare danni. Inizieremo con il classificare gli elementi.

Elementi blocco e elementi in linea (inline-block)

Osserviamo una pagina (X)HTML tentando di non pensare al contenuto ma solo alla sua struttura, mettendo in atto una sorta di processo di astrazione. Possiamo farci aiutare da una semplice immagine:

Classificazione di elementi e tag XHTML Guidacss002

Possiamo iniziare pensando a una pagina (X)HTML, come a un insieme di rettangoli disposti sullo schermo. Non importa che si tratti di paragrafi, titoli, tabelle o immagini: si tratta sempre di box rettangolari.

Già dall'immagine si intuisce, però, che non tutti i box sono uguali. Alcuni contengono altri box al loro interno, altri sono invece contenuti all'interno dei primi. Alcuni, se si trovano (come accade) in mezzo al testo, lasciano che esso scorra loro intorno senza interrompere il suo flusso e senza andare a capo. Questa considerazione molto semplice già ci offre la rappresentazione della fondamentale distinzione tra elementi blocco ed elementi inline.

Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Possiamo verificarlo inserendo in una pagina (X)HTML queste due righe di codice:

Titolo


Paragrafo


Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè

e

sono elementi blocco.

Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso contenuto, essenzialmente testo). Nell'immagine sono i rettangoli con il bordo verde. Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga.

Una terza categoria è quella degli elementi lista. Comprende in pratica solo l'elemento li (list item).

Elementi rimpiazzati (replaced elements)

Un'altra distinzione da ricordare è quella tra elementi rimpiazzati ed elementi non rimpiazzati. I primi sono elementi di cui uno user agent (il "motore" e la mente di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in cui altezza e larghezza sono definite dall'elemento stesso e non da ciò che lo circonda.

L'esempio più tipico di elemento rimpiazzato è (tag immagine). Altri elementi rimpiazzati sono: ,