CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 16 ani
Postari: 197
|
|
Gli elementi blocco sono i 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. Provate a inserire in una pagina (X)HTML queste due righe di codice:
<h1>Titolo</h1>
<p>Paragrafo</p>
Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <H1> e <P> sono elementi blocco.
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di 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 è IMG (un'immagine). Altri elementi rimpiazzati sono: INPUT, TEXTAREA, select e OBJECT. Tutti gli altri elementi sono in genere considerati non rimpiazzati.
La distinzione è importante perchè per alcune proprietà è diverso il trattamento tra l'una e l'altra categoria, mentre per altre il supporto è solo per la prima, ma non per la seconda.
Struttura ad albero di un documento
Un altro concetto fondamentale che dovreste assimilare è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l'ereditarietà. Esso fa sì che molte proprietà impostate per un elemento siano autamaticamente ereditate dai suoi discendenti. Sapersi districare nella struttura ad albero significa padroneggiare bene questo meccanismo e sfruttare al meglio la potenza del linguaggio.
Presentiamo subito un frammento di codice HTML:
<html>
<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a></p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>
Questa è la sua rappresentazione strutturale secondo il modello ad albero:
La prima lezione di questa guida potrebbe spiazzarvi. 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 la classificazione degli elementi.
Elementi blocco e elementi in linea
Osservate una pagina (X)HTML tentando di non pensare al contenuto ma solo alla sua struttura. Mettete in atto, insomma, una specie di processo di astrazione. Per aiutarvi ecco un'immagine. Una pagina (X)HTML, per iniziare, non è altro che un insieme di rettangoli disposti sullo schermo di un monitor. Non importa che si tratti di paragrafi, titoli, tabelle o immagini: sempre di box rettangolari si tratta.
Nell'immagine potete però osservare che non tutti i box sono uguali. Alcuni contengono altri box al loro interno. Altri sono invece contenuti all'interno dei primi e se si trovano (come si trovano) in mezzo a del testo notate che esso scorre intorno senza interrompere il suo flusso e senza andare a capo. Avete nell'immagine la rappresentazione visiva, anche se un pò semplificata, della fondamentale distinzione tra gli elementi (X)HTML, quella tra elementi blocco ed elementi inline.
Gli elementi blocco sono i 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. Provate a inserire in una pagina (X)HTML queste due righe di codice:
<h1>Titolo</h1>
<p>Paragrafo</p>
Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <H1> e <P> sono elementi blocco.
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di 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 è IMG (un'immagine). Altri elementi rimpiazzati sono: INPUT, TEXTAREA, select e OBJECT. Tutti gli altri elementi sono in genere considerati non rimpiazzati.
La distinzione è importante perchè per alcune proprietà è diverso il trattamento tra l'una e l'altra categoria, mentre per altre il supporto è solo per la prima, ma non per la seconda.
Struttura ad albero di un documento
Un altro concetto fondamentale che dovreste assimilare è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l'ereditarietà. Esso fa sì che molte proprietà impostate per un elemento siano autamaticamente ereditate dai suoi discendenti. Sapersi districare nella struttura ad albero significa padroneggiare bene questo meccanismo e sfruttare al meglio la potenza del linguaggio.
Presentiamo subito un frammento di codice HTML:
<html>
<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a></p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>
Questa è la sua rappresentazione strutturale secondo il modello ad albero:
Il documento è in buona sostanza una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child in inglese, imparate la dicitura perchè nei linguaggi come DOM o Javascript ci si riferisce agli ordini della gerarchia proprio con questi termini.). Ogni elemento è genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. In base a queste semplici indicazioni possiamo analizzare il nostro documento.
BODY, ad esempio è figlio di HTML, ma è anche genitore di H1, DIV e P. Quest'ultimo è a sua volta genitore di un elemento B.
Ovviamente, se osservate bene, potreste concludere che anche BODY è in qualche modo genitore di B. Non è esattamente così. Introduciamo ora un'altra distinzione, mutuata anch'essa dal linguaggio degli alberi genealogici, quella tra antenato (ingl: ancestor) e discendente (ingl: descandant). Semplice da capire. La relazione parent-child è valida solo se tra un elemento e l'altro si scende di un livello. Esattamente come in un albero familiare si indica la relazione tra padre e figlio. Pertanto possiamo dire che HEAD è figlio di HTML, che A è figlio di P, etc. tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A e che questo è rispetto al primo un discendente.
C'è un solo elemento che racchiude tutti e non è racchiuso: HTML. Continuando con la metafora familiare potremmo dire che è il capostipite, ma in termini tecnici si dice che esso è l'elemento radice (ingl: root). E qui spazziamo il campo da un possibile fraintendimento: l'elemento radice di un documento (X)HTML non è BODY. E che HTML non sia una semplice dichiarazione ma sia trattato alla stregua di qualunque altro elemento lo potete testare aprendo questa pagina con Explorer 6, Mozilla, Opera 6 o Explorer 5 Mac.
Come si vede abbiamo iniziato una guida dedicata a un linguaggio prettamente visuale tornando alle origini di HTML, ovvero al concetto di struttura. Non è un capriccio, è semplicemente dare il giusto inquadramento ai CSS: che sono nati per modificare lo stile di elementi strutturali e non vanno intesi come un linguaggio grafico. Per queste cose esistono Flash o Photoshop.
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
