4 Creare contenuti per il web - Andrea Giachetti

86
A queste “scatole”, quindi si possono attribuire posizione e dimensioni a piacere. Ad esempio
possiamo determinare se l'elemento è visibile o meno e di che tipo è con la proprietà “display”
(che può assumere i valori: none, block, inline).
Possiamo posizionare poi i blocchi in maniera arbitraria, utilizzando la proprietà
“position:tipo”, seguita dallo spostamento nelle due direzioni indicato dalle proprietà
top:valore, left:valore, bottom:valore o right:valore che indicherà una
distanza (valore) espressa usualmente in pixel o percentuale dall'alto, sinistra, basso o destra
rispetto alla posizione di riferimento. Questa posizione di riferimento dipenderà dal tipo di
posizionamento richiesto: position:absolute; sistemerà il blocco alla distanza
indicata dal punto in alto a sinistra dell'interfaccia, position:relative; sistemerà il
blocco alla distanza indicata dal punto in cui sarebbe stato visualizzato se non ci fosse stata
indicazione di posizionamento, cioè alla posizione corrente del flusso di decodifica del codice
HTML.
Anche le dimensioni (proprietà width ed height) possono essere scelte a piacimento,
indicate o in valore assoluto (con le differenti unità di misura utilizzabili) o in percentuale, l'uso
di valori percentuali per posizione e dimensione consente di creare i cosiddetti layout “liquidi”
in cui tutte le componenti vengono scalate in proporzione quando si ridimensiona la finestra.
4.12 Regole di stile, ereditarietà, cascata
Abbiamo visto che il documento (X)HTML definisce una struttura gerarchica, dove gli elementi
che includono altri elementi sono in rapporto padre-figlio con questi (es. un paragrafo che
include un testo in grassetto, una sezione che include titoli, eccetera). Come si
comportano le regole di stile in relazione a queste “discendenze”?. Dipende dalle proprietà.
Alcune di esse sono ereditate dal genitore, altre no. Di massima non sono ereditarie quelle che
gestiscono la formattazione del “box” dell'elemento (bordi, sfondo, ecc.). Mentre lo sono, ad
esempio, quelle relative al testo. Se il colore del testo è definito a livello di di colore
rosso con la regola body {color:red;}, allora anche le sottoparti, se non sono inserite
altre regole più specifiche per esse, avranno il testo di colore rosso.
Per attribuire il corretto stile a ciascun elemento di un documento complesso, il browser deve
svolgere un processo non banale. L'interprete del markup deve trovare i valori per le proprietà
di stile (es. famiglia, dimensioni e stile dei caratteri, colore del testo, ecc.) di ogni elemento. Per
fare questo viene utilizzato il cosiddetto meccanismo della cascata (di qui il nome “fogli di stile
a cascata”). Esso ordina in base alla loro specificità le diverse regole attribuite a ciascun
elemento (tale specificità dipende, ad esempio, dall'ordine di caricamento dei fogli di stile che
contengono le regole), e determina quale applicare. Se nessuna regola specifica è disponibile,
viene verificata l'ereditarietà. Per le proprietà non ereditate si usano i valori predefiniti. Anche
qui rimandiamo ai numerosi tutorial online o manuali per approfondimenti pratici e dettagli
(vedi sitografia).
4.13 Intermezzo pratico: creare un documento HTML
Visto che le informazioni contenute nei precedenti capitoli dovrebbero mettere teoricamente in
grado il lettore di realizzare le proprie pagine web, cerchiamo anche di dare qualche piccolo
consiglio per creare praticamente i propri ipertesti. Dato che un documento HTML è un
semplice file di testo, per crearlo è sufficiente un qualsiasi programma di text editing (p.es.