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:
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:
<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 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> (tag 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
Altro concetto fondamentale ed utile da 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 è 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, 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.
Ad esempio <body> è figlio di <html>, ma è anche genitore di <h1>, <div> e <p>. Quest'ultimo è a sua volta genitore di un elemento <b>.
Si potrebbe concludere che anche <body> sia 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).
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). È importante spazzare il campo da un possibile fraintendimento: l'elemento radice di un documento (X)HTML non è <body>. Il fatto che <html> non sia una semplice dichiarazione ma sia trattato alla stregua di qualunque altro elemento lo si può testare aprendo questa pagina.
Abbiamo iniziato una guida dedicata a un linguaggio prettamente visuale tornando alle origini di (X)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.
Ultimi articoli CSS
Immagini di sfondo multiple con i CSS3Come sfruttare sui browser che la supportano la possibilità di... |
Bordi con i CSS3Come creare bordi arrotondati e usare immagini per i bordi grazie ai... |
Codice più pulito con i CSS3Alla scoperta della potenza dei selettori definiti nei CSS3 |
Object Oriented CSSApplicare ai fogli di stile CSS i metodi della programmazione a... |
Lavorare con il colore RGBAApplicare effetti di trasparenza ai colori grazie alla sintassi... |
Guide CSS
Guida Layout dei siti con i CSSLa guida ai layout con i CSS è uno strumento ideale per chi intende... |
Guida Interfacce web con PhotoshopQuesta guida mostra con semplici esempi come lavorare ad un layout e... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base22 Febbraio 2010 a Milano |
|
|
Corso Accessibilità siti Web22 Marzo 2010 a Milano |
|
|
Corso Accessibilità siti Web01 Marzo 2010 a Roma |
