Classificazione degli elementi | Guida CSS

Classificazione=20 degli elementi

La prima lezione di questa guida potrebbe spiazzarvi. Non = parleremo di CSS, ma di (X)HTML. O meglio, riprenderemo = alcuni=20 aspetti di questo linguaggio che sono propedeutici per una = migliore=20 comprensione del meccanismo di funzionamento dei CSS. Sapere = bene su=20 che cosa si interviene con i fogli di stile =E8 un = passo=20 necessario, visto che le cose di cui parleremo, specie con = l'avvento=20 e l'abuso degli editor visuali, sono spesso trascurate o=20 misconosciute dai pi=F9. Se mi passate la metafora, possiamo = dire che=20 faremo come un bravo chirurgo che prima di imparare gli = strumenti=20 deve conoscere bene il corpo umano per operare con successo = e senza=20 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=20 ma solo alla sua struttura. Mettete in atto, insomma, una = specie di=20 processo di astrazione. Per aiutarvi ecco un'immagine. Una pagina (X)HTML, per = iniziare, non=20 =E8 altro che un insieme di rettangoli disposti sullo = schermo di un=20 monitor. Non importa che si tratti di paragrafi, titoli, = tabelle o=20 immagini: sempre di box rettangolari si tratta.

Nell'immagine potete per=F2 osservare che non tutti i box = sono=20 uguali. Alcuni contengono altri box al loro interno. Altri = sono=20 invece contenuti all'interno dei primi e se si trovano (come = si=20 trovano) in mezzo a del testo notate che esso scorre intorno = senza=20 interrompere il suo flusso e senza andare a capo. Avete=20 nell'immagine la rappresentazione visiva, anche se un p=F2=20 semplificata, della fondamentale distinzione tra gli = elementi=20 (X)HTML, quella tra elementi blocco ed elementi=20 inline.

Gli elementi blocco sono i box che possono = contenere altri=20 elementi, sia di tipo blocco che di tipo inline. = Quando un=20 elemento blocco =E8 inserito nel documento viene = automaticamente=20 creata una nuova riga nel flusso del documento. Provate a = inserire=20 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=E8 <H1> e <P> sono = elementi=20 blocco.

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

Una terza categoria =E8 quella degli elementi = lista.=20 Comprende in pratica solo l'elemento LI (list=20 item).

Per un elenco completo degli elementi blocco si veda questa=20 pagina della guida a XHTML. Qui trovate invece l'elenco degli elementi inline.

Elementi rimpiazzati (replaced elements)

Un'altra distinzione da ricordare =E8 quella tra = elementi=20 rimpiazzati ed elementi non rimpiazzati. I primi = sono=20 elementi di cui uno user agent (il "motore" e la mente di un = browser) conosce solo le dimensioni intrinseche. Ovvero, = quelli in=20 cui altezza e larghezza sono definite dall'elemento stesso e = non da=20 ci=F2 che lo circonda. L'esempio pi=F9 tipico di elemento = rimpiazzato =E8=20 IMG (un'immagine). Altri elementi rimpiazzati sono: INPUT, = TEXTAREA,=20 SELECT e OBJECT. Tutti gli altri elementi sono in genere = considerati=20 non rimpiazzati.

La distinzione =E8 importante perch=E8 per alcune = propriet=E0 =E8 diverso=20 il trattamento tra l'una e l'altra categoria, mentre per = altre il=20 supporto =E8 solo per la prima, ma non per la seconda.

Struttura ad albero di un documento

Un altro concetto fondamentale che dovreste assimilare = =E8 quello=20 della struttura ad albero di un documento. Il meccanismo=20 fondamentale dei CSS =E8 infatti l'ereditariet=E0. = Esso fa s=EC che=20 molte propriet=E0 impostate per un elemento siano = autamaticamente=20 ereditate dai suoi discendenti. Sapersi districare nella = struttura=20 ad albero significa padroneggiare bene questo meccanismo e = sfruttare=20 al meglio la potenza del linguaggio.

Presentiamo subito un frammento di codice HTML:

<html>
<head>
<title>Struttura=20 del=20 = documento</title>
</head>
<body>
<h1>Tit= olo</h1>
<div>
<p>Primo=20 <a=20 = href=3D"pagina.htm">paragrafo</a></p>
</div>
&= lt;p>Secondo<b>paragrafo</b></p>
</body></html>

Questa =E8 la sua rappresentazione strutturale secondo il = modello=20 ad albero:

3D"Struttura

Il documento =E8 in buona sostanza una perfetta forma di = gerarchia=20 ordinata in cui tutti gli elementi hanno tra di loro una = relazione=20 del tipo genitore-figlio (parent-child in = inglese,=20 imparate la dicitura perch=E8 nei linguaggi come DOM o = Javascript ci=20 si riferisce agli ordini della gerarchia proprio con questi=20 termini.). Ogni elemento =E8 genitore e/o figlio di un = altro.

Un elemento si dice genitore (parent) = quando=20 contiene altri elementi. Si dice figlio = (child) quando=20 =E8 racchiuso in un altro elemento. In base a queste = semplici=20 indicazioni possiamo analizzare il nostro documento.

BODY, ad esempio =E8 figlio di HTML, ma =E8 = anche=20 genitore di H1, DIV e P. Quest'ultimo = =E8 a sua=20 volta genitore di un elemento B.

Ovviamente, se osservate bene, potreste concludere che = anche=20 BODY =E8 in qualche modo genitore di B. Non = =E8=20 esattamente cos=EC. Introduciamo ora un'altra distinzione, = mutuata=20 anch'essa dal linguaggio degli alberi genealogici, quella = tra=20 antenato (ingl: ancestor) e discendente=20 (ingl: descandant). Semplice da capire. La = relazione=20 parent-child =E8 valida solo se tra un elemento e l'altro si = scende di=20 un livello. Esattamente come in un albero familiare si = indica la=20 relazione tra padre e figlio. Pertanto possiamo dire che = HEAD=20 =E8 figlio di HTML, che A =E8 figlio di = P, etc.=20 Tra DIV e A, invece si scende di due livelli: = diciamo=20 allora che DIV =E8 un antenato di A e = che questo=20 =E8 rispetto al primo un discendente.

C'=E8 un solo elemento che racchiude tutti e non =E8 = racchiuso:=20 HTML. Continuando con la metafora familiare potremmo = dire che=20 =E8 il capostipite, ma in termini tecnici si dice che esso = =E8=20 l'elemento radice (ingl: root). E qui = spazziamo il=20 campo da un possibile fraintendimento: l'elemento radice di = un=20 documento (X)HTML non =E8 BODY. E che HTML non = sia una=20 semplice dichiarazione ma sia trattato alla stregua di = qualunque=20 altro elemento lo potete testare aprendo questa pagina con Explorer 6, Mozilla, = Opera 6 o=20 Explorer 5 Mac.

Come si vede abbiamo iniziato una guida dedicata a un = linguaggio=20 prettamente visuale tornando alle origini di HTML, ovvero al = concetto di struttura. Non =E8 un capriccio, =E8 = semplicemente=20 dare il giusto inquadramento ai CSS: che sono nati per = modificare lo=20 stile di elementi strutturali e non vanno intesi come un = linguaggio=20 grafico. Per queste cose esistono Flash o Photoshop.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =