La pagina HTML e' interpretata dai browser in termini di elementi detti: box , con truttura gerarchica.
Le box possono essere di tipo: block od inline .
La pagina e' costruita da sinistra a destra, dall'alto in basso, secondo quello che si chiama:normal flow ;con gli elementi tipo block che si dispongono uno sotto l'altro, e gli elementi inline sulle linea, di seguito; andando "a capo", nella linea successiva, se non c'e' piu' spazio nell'elemento che li contiene.
Testo non esplicitamente inserito in un box e' racchiuso in automantico in un anonymous box, creato dal browser, che puo' essere block od inline, a seconda del contesto.
Gli elementi tipo block hanno dimensioni specificate, con margini, padding e border definiti secondo uno specifico box model, possono contenere altri block elements ed inline elements. Gli elementi inline solo elementi inline.
I tag CSS display, position , overflow e float definiscono come vengono posizionati gli elementi; il tag vertical-align specifica l'allineamento di elemento inline sulla linea (rispetto alla beseline).
Questa struttura a box e blocchi e' gia in CSS 1 e poi specificata meglio in CSS 2.1, la distinzione fra block ed inline elements gia' in HTML 4.
Per permettere di utilizzare lingue in cui si scrive da destra a sinistra,
invece che da sinistra a destra, e' introdotta in HTML una specifica di
direzione, che pero' deve essere abbinata alle specifiche della lingua,
definita dallo standard unicode dei caratteri usati, come UTF-8.
Il CSS: direction, con valori: ltr|rtl|initial|inherit;
specifica la direzione della lingua; c'e' anche un unicode-bidi,
per casi in cui occorre utilizzare piu' direzioni in uno stesso paragrafo.
In una sezione con direction: rtl; i sotto-blocchi
vengono inseriti a partire dal bordo destro, da destra a sinistra,
come nell'esempio sotto ove l'HTML:
<div style="direction: rtl;">
<div style="display: inline-block;" >uno</div>
<div style="display: inline-block;" >due</div>
<div style="display: inline-block;" >tre</div>
<div style="display: inline-block;" >quattro</div>
</div>
produce la linea seguente, allineata a destra dello schermo:
Elementi inline sono definiti dai tag:
Gli elementi inline sono messi di seguito, sulla linea, possono avere altri elementi a destra o sinistra.
Possono contenere solo elementi inline.
Se piu' lunghi del loro contenitore vanno "a capo", disponendosi, in parte, sulle linee sotto, per questo disporsi su piu' linee occorre tener presente le cose seguenti:
Per la linea di testo ci sono specifiche CSS per le dimensioni:
font-size; per la dimesione dei caratteri
line-height: altezza della riga,
letter-spacing: spazio fra le lettere
word-spacing: spazio fra le parole.
Per l'allineamento rispetto alla base della linea (baseline)
c'e' l'attributo: vertical-align; esempi:
Testo seguito da:
<span style="vertical-align: 50%" > ...</span>"
Testo seguito da:
<span style="vertical-align: -5px" > ...</span>"
Testo seguito da:
<span style="vertical-align:sub" > ...</span>"
Testo seguito da:
<span style="vertical-align:super" > ...</span>"
Altri valori per vertical-align sono: baseliene, top, bottom, middle, text-top, text-bottom
Block element sono:
I blocchi iniziano su una nova linea e sono seguiti da un fine linea;
I block elements possono contenere altri blocchi ed elementi inline.
Rispettano gli attributi width ed height, in mancanza
di questi
occupano tutto lo spazio disponibile in orizzontale
e lo spazio definito dal loro contenuto in verticale.
Hanno bordi, margini, paddind da tutti i lati.
Il loro contenuto e' centrato in base al tag: text-align , esempi:
<p> con text-align:center
<p> con text-align:left
<p> con text-align:right
Altri valori per text-align sono: justify, inherit, initial (il default)Certi block element (div, img, table), ma anche altri elementi, hanno una dimensione come attributo (width, height), in html5 questa va espressa tramite un CSS.
La dimensione puo' essere assoluta:
‹ style ›
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
‹ style ›
Ci sono anche attributi CSS max-width, max-height, min-width, min-height, che specificano massime e minime dimensioni di un blocco, che altrimenti tende ad occupare tutto lo spazio che puo' nella pagina. Questi servono anche a limitare il ridimensionamento automatico di immagini che viene effettuato specificando width od height come auto.
Anche per il testo ci sono specifiche per le dimensioni:
font-size; per la dimesione dei caratteri
line-height: altezza della riga,
letter-spacing: spazio fra le lettere
word-spacing: spazio fra le parole.
La proprieta' CSS display cambia il modo con cui gli elementi sono trattati; permette, ad esempio, di disporre block elements su una linea (style="display: inline-block ;"). Il CSS display ha un sacco di possibili valori, i principali sono i seguenti:
C'e' anche un display: inline-table ed un display: table con tutta una serie di specifiche per avere elementi che si allineano come fossero una tavola html. Questo permette di cambiare il layout di una tabella con dei javascript, o, con CSS media query, in base alle dimensioni dello schermo, trasformando, ad esempio, righe in colonne:
‹style type="text/css" ›
.table { display: table }
.tr { display: table-row }
.thead { display: table-header-group }
.tbody { display: table-row-group }
.tfoot { display: table-footer-group }
.col { display: table-column }
.colgroup { display: table-column-group }
.td, .th { display: table-cell }
.caption { display: table-caption }
‹/style ›
da usare con:
‹ div class=.table ›
‹ div class=.tr ›
‹ div class=.td ›
....
‹ div class=.tr /›
‹ div class=.tr /›
In CSS3 sono in corso di definizione specifiche: display:flex-*, che permettono a sezioni di adattarsi in automatico a variazioni di dimensioni della finestra di visualizzazione. Cosa che ora (2017) si fa con specifiche query CSS (media query), che attivano CSS diversi in base alle dimensioni della finestra.
Il CSS visibility permette di rendere una sezione invisibile,
mantenendo vuoto lo spazio che avrebbe occupato nella pagina.
Ha i valori:
Come un elemento e' disegnato e' definito dal box model, che si applica agli elementi tipo block, ed anche agli inline; anche se per gli inline la cosa e' meno chiara: un inline block che va a capo su piu' linee e' visto come un unico blocco e gli attributi del blocco si applicano a piu' linee.
Il box model ha i seguenti elementi:
Blocks adiacenti in orizzontale hanno distanza che e' somma dei margini.
Invece in verticale i margini di elementi adiacenti sono
collapsed in un unico margine con il valore del maggiore dei due.
Margin: l'attributo CSS margin definisce le dimensioni del margine specificate
nell'ordine: top,right,bottom,left,
Es.: margin: 100px 150px 100px 80px;
Esistono anche: margin-top, margin-right, margin-bottom and margin-left.
Per centrare un blocco nel suo parent block si puo' usare: margin: 0 auto;
Il 'margin' puo' avere dimensioni negative, in questo caso, per come
vengono calcolate widht ed height (sottraendo i
margini dallo spazio disponibile) si ha che il blocco occupa anche il padding
e puo' anche finire oltre il suo contenitore.
Border ha gli attributi CSS:
Padding: l'attributo CSS padding definisce lo spazio fra il contenuto ed il bordo,
Es.: padding: 50px 20px 20px 50px;
i valori indicano nell'ordine i lati: top,right,bottom,left
Abbiamo anche: padding-top, padding-right, padding-bottom, padding-left
In HTML-3 ed HTML-4 si usavano attributi e tag HTML per posizionare elementi; nella maggior parte dei browser funzionano ancora, avevamo, ad esempio:
Il senso degli attributi non era sempre lo stesso per diversi tag: ad esempio un div con align=center conteneve testo centrato, un'immagine con align=left si posizionava a sinistra. C'era un po' di confusione e tutti questi attributi sono stati deprecati ed eliminati in html5 e sostituiti da CSS.
In HTML-5 i CSS top, bottom, left, right servono a
definire la posizione di un elemento entro un
blocco che lo contiene od entro la finestra del browser.
Questi attributi possono avere come valore:
Come questi vengono interpretati dipende dal CSS: position; che ammette i valori: absolute|fixed|relative|static|initial|inherit
Il posizionamento degli elementi puo' causare sovrapposizioni, in questo caso il CSS z-index indica quale e' sopra e quale e' sotto (va sotto quello con z index minore)
Il comportamento di un elemento piu' grande dell'elemento che lo contiene
e' definito dall'attributo:
overflow: che assume i valori: visible|hidden|scroll|auto|initial|inherit.
Esistono anche i CSS: overflow-x ed overflow-y
Il CSS float: di valori: none|left|right|initial|inherit specifica
che la posizione di un elemento nel blocco che lo contiene e' mobile e l'elemento
si sposta al margine sinistro, in alto, del suo contenitore, per float:left ( o
al margine destro per float: right).
In caso ci siano piu' elementi float questi si
dispongono uno di fianco all'altro.
Un float in un contesto inline si
allinea alla prima baseline del testo intorno.
Gli elementi che seguono un float, tipicamente testo, gli
si dispongono attorno, a sinistra od a destra, a seconda di dove e' spostato.
Se ci sono piu' float uno di seguito all'altro, e non c'e' spazio in orizzontale, i float "vanno a capo", disponendosi sotto gli altri.
Un elemento float di default ha hsize: 100%, per cui occorre dargli esplicitamente una dimensione per evitare problemi.
Il parent di un float non risente delle dimensioni del float, e non adatta le sue dimensioni per contenerlo, per cui puo' divenire piu' piccolo del float che contiene; in questo caso il float fuoriesce dal suo contenitore, a meno che il contenitore non abbia la proprieta': overflow: auto od overflow: hidden.
Un elemento float e' display:block ed ha margin, padding, border; in particolare il CSS: margin indica un margine rimanente fra l'elemento float ed il suo contenitore. Questo attributo e' usato spesso per immagini circondate da testo, ad esempio:
img {
float: right;
margin: 0 0 10px 10px;
}
Il CSS clear: di valori: none|left|right|both|initial|inherit indica che un float, nello spostarsi a destra o sinistra, non ammette elementi attorno a sinistra, a destra o da entrambi i lati, e, se ne trova, va a capo, nella riga sotto.
Una tendenza degli anni attorno al 2010 e' quella di costruire interi layout di pagine web utilizzando elementi float, eventualmente abbinati a CSS-query per cambiare layout a seconda delle dimensioni del viewport.
|
Con HTML 4 un buon modo di posizionare accanto figure e
testo era quello di utilizzare tabelle. Il testo viene centrato
accando alla figura corrispondente. Questo paragrafo, ad esempio
e' dentro una tabella HTML4, con una figura a fianco.
Utilizzando gli attributi align e valign
per posizionare il contenuto nella cella <td>.
In questo modo si riusciva ad ottenere risultati accettabili anche se non perfetti. |
|
|
Se pero' la finestra diviene troppo stretta, come per i cellulari, resta poco testo a fianco della figura, e la tabella non si ridimensiona bene. Inoltre lo spazio non basta e la tabella non sta nella finestra. |
Questo sistema funzionava nella maggior parte dei casi, ma
era abbastanza approssimativo, per cui la tendenza, attorno
agli anni 2000 era di costruire siti con sezioni (<div>)
una dentro l'altra e tutte di dimensioni fisse.
Con HTML-5, e l'avvento dei browser sui cellulari, con schermi piccoli; la situazione e' cambiata, ma non e' certo migliorata e tutto e' diventato piu' complicato. Sono in corso di definizione specifiche per layout flessibili (attributi CSS: flex-* ) che potrebbero risolvere i problemi, ma ancora non sono completamente e coerentemente implementate dai browser (al 2017).
In HTML-5, per mettere immagini a destra o sinistra del testo si utilizza il css: float al posto dell'attributo: align=left|right; il css:clear limita la possibilita' che il float, spostandosi, abbia testo a lato.
Il CSS text-align serve a centrare testo, od elementi di tipo inline , od inline-block entro un blocco (e' un attributo del blocco);
Il CSS vertical-align serve solo a posizionare in verticale un elemento inline rispetto alla baseline (alla base della linea di testo).
Per il posizionamento occorre tener conto poi di diversi fattori:
Vediamo alcuni esempi; qui sotto abbiamo un <div>, con
text-align: center; width: 70%; entro cui abbiamo
elementi di tipo display: inline-block;
che vengono centrati.
Anche elementi di tipo block,
come <p> vengono centrati.
Quando la finestra si restringe molto gli
elementi inline vanno nella riga successiva.
Il primo, che ha testo che non riesce a spezzarsi su piu' linee,
dato che viene mantenuto un padding: 50px;
finisce fuori del suo contenitore,
che non ha un overflow:auto o scroll,
che produrrebbero una scroll-bar, od hidden, per tagliare
la parte che esce dal contenitore.
Il CSS utilizzato e' il seguente:
<style>
.outer-div{
padding: 30px;
text-align: center;
border-color: black ;
border-style: solid ;
border-width: 5px '
}
.inner-div {
display: inline-block;
padding: 50px;
border-color: blue ;
border-style: inset ;
border-width: 3px ;
margin: 3px ;
}
</style>
<div class="outer-div">
Nel caso sotto per i <div> interni e' stato
specificato: display:inline.
Gli elementi non hanno piu' un limite inferiore ben definito
e, col padding: 50px finiscono fuori dal
loro contenitore.
Restringendo la finestra i <div> vanno uno
sotto l'altro, con il testo che ignora il padding verticale,
mentre quello orizzontale resta.
Il bordo viene sempre disegnato,
rispetta il padding e segue i contorni esterni dell'insieme
delle linee, come il margine, che pero' non
altera l'interlinea, ma continua a separare i bordi
dei due elementi in orizzontale.
<div class="outer-div">
Nel caso sotto si utilizza margin:0 auto per centrare un blocco entro un altro blocco, il blocco interno occupa tutto lo spazio che puo' entro il suo contenitore.
Il CSS utilizzato e' il seguente:
<style>
.outer-block{
padding: 30px;
border-color: black ;
border-style: solid ;
border-width: 5px '
}
.inner-block {
display: block;
padding: 20px;
border-color: blue ;
border-style: inset ;
border-width: 3px ;
margin: 10px auto ;
}
</style>
Paragrafo, anche questo centrato
Analogamente centriamo un'immagine, dandogli display: block ; margin: 10px auto ,
Con display: inline od inline-block i margini destro e sinistro sono zero e l'immagine non si centra, ma si allinea a sinistra.
Al restringersi dello schermo e' utile avere immagini che si ridimensionano automaticamente, in modo da non uscire dal loro contenitore. Questo si ottiene con il CSS:
<style>
img.autoresize {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
/* od anche solo: */
img {
max-width: 100%;
height: auto;
}
</style>
Max-width serve ad evitare che all'ingrandirsi della finestra
l'immagine si espanda troppo, l'immagine sotto e' un esempio.
