[Guida CSS #2] La classificazione degli elementi e l’ ereditarietà


[Guida CSS #2] La classificazione degli elementi

Non fatevi ingannare da ciò che tratteremo oggi, difatti non ci dedicheremo completamente ai CSS questa volta, ma capiremo come sono classificati i tag HTML, poiché un buon web designer deve sapere innanzi tutto quali tipi di elementi egli va a modificare e come intervenire su di essi.


ELEMENTI BLOCCO

Possiamo non erroneamente pensare ad una pagina HTML come l’ insieme di alcuni elementi che occupano uno spazio. Quale spazio di preciso? La risposta è molto semplice: uno spazio rettangolare. Difatti molti di questi elementi non sono nient’ altro che un box e, a volte, alcuni di questi contengono ulteriori box al loro interno. Sono detti elementi blocco poiché l’ uso di questi elementi blocca il flusso del testo, di conseguenza in una pagina HTML verrà creata automaticamente una nuova riga di testo anche se due di questi elementi sono piazzati sulla stessa linea di codice. Un breve esempio lo potete fare inserendo nella vostra pagina HTML due di questi elementi:

<p>Qui paragrafo</p><h1>Qui Titolo</h1>

Tra gli elementi blocco principali vi sono: i paragrafi, i titoli e le tabelle.


ELEMENTI INLINE

Come lascia presupporre il nome stesso gli elementi inline sono quelli elementi che non provocano una rottura nel flusso della pagina HTML. Un rapido esempio lo possiamo fare citando alcuni di questi elementi come le immagini, il grassetto o il corsivo. Provate a scrivere nella vostra pagina HTML il seguente testo:

<i>Qui il corsivo</i><b> e qui il grassetto</b>

Noterete che la riga non verrà interrotta come succede con gli elementi blocco.

Prima di passare al terzo tipo di classificazione, è necessario fare un’ ulteriore precisazione: gli elementi blocco possono contenere al loro interno sia altri elementi blocco che elementi inline, con questi ultimi invece è concesso utilizzare al loro interno solo altri elementi inline. Esiste anche, oltre la terza categoria di elementi che vi citerò tra poco, gli elementi lista che, come suggerisce il nome, comprende i tag per creare liste e non necessitano di un discorso a parte.


ELEMENTI RIMPIAZZATI

Un’ ultima distinzione, non meno importante delle altre, la si può fare tra elementi rimpiazzati e elementi non rimpiazzati, i primi non sono nient’ altro quelli elementi di cui un browser conosce le dimensioni anche se non specificate. Sono questi gli elementi che hanno una dimensione propria che non varia a seconda di ciò che li circonda. Tra questi elementi troviamo <input>, <img>, <textarea>, <select> e <object>. Tutti i restanti elementi sono elementi non rimpiazzanti. Non prendete sottogamba questa distinzione poiché essi godono di alcune caratteristiche e proprietà diverse dagli altri elementi.


EREDITARIETA’

Quest’ ultimo è senza dubbio uno dei concetti fondamentali dei CSS su cui, in ogni caso, non ci soffermeremo a lungo. Difatti sono molteplici i casi in cui le proprietà che daremo a taluni elementi saranno automaticamente ereditate dai discendenti di questi elementi. Vi sono due tipi di relazioni tra gli elementi HTML (famose anche in alcuni linguaggi come Javascript): se le relazioni (in quello che possiamo chiamare “albero genealogico”) sono di un livello, avremo relazioni genitore-figlio (parent-child), nel caso le relazioni siano districate tra più livelli vi saranno allora relazioni antenato-discendente (ancestor-descandant). Ricordate: solo un elemento racchiude tutti e, a sua volta, non è racchiuso da nessuno, esso è l’ elemento <html>. L’ immagine qui si seguito vi chiarirà un pò le idee mostrando la gerarchia degli elementi.

Per fare un esempio: il tag <p> e il tag <a> hanno un rapporto parent-child, mentre il tag <a> con il tag <div> ha un rapporto ancestor-descandant. A presto con la terza lezione 😉

<-Lezione Precendente (Introduzione ai fogli di stile)
Lezione Successiva (4 metodi per inserire i fogli di stile in un documento)->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *