In CSS gli elementi vengono trattati principalmente come caselle rettangolari o bande. Per la descrizione delle caselle vengono utilizzate le seguenti proprietà – ormai sicuramente conosciute da voi:
• width – la larghezza dell'elemento
• height – l'altezza dell'elemento
• left – distanza a sinistra
• right – distanza a destra
• top – distanza in alto
• bottom – distanza in basso
• margin – il margine esterno
• border – il bordo dell'elemento
• padding – il padding interno, quindi la distanza dal bordo al contenuto dell'elemento
Queste proprietà sono già state presentate.
La larghezza totale di un elemento si ottiene sommando la larghezza delle singole indicazioni. (La stessa cosa vale per l'altezza).
Un esempio:
div#box {
width: 100px;
padding: 20px; /* 20px sia a sinistra che a destra /
border: 2px solid; /* 2px sia a sinistra che a destra /
margin: 0 30px; /* 30px sia a sinistra che a destra */
}Quale larghezza possiede questa area div? Diamo un'occhiata ai valori singoli:
• 100 pixel
• 2 volte 20 pixel
• 2 volte 2 pixel
• 2 volte 30 pixel
Questo porta ad una larghezza totale dell'elemento di 204 pixel.
La larghezza e l'altezza degli elementi vengono determinate tramite width e height. Se queste indicazioni non sono esplicitamente presenti nel foglio di stile, si applicano le seguenti regole:
• Se manca width, la casella viene visualizzata larga quanto l'elemento circostante.
• Se manca height, l'elemento verrà visualizzato alto quanto il contenuto che contiene.
Un esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* 2px sia a sinistra che a destra */
margin: 0 30px; /* 30px sia a sinistra che a destra */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Nel browser appare nel seguente modo:
L'elemento genitore dell'elemento div è il body. Pertanto l'elemento viene effettivamente visualizzato largo quanto l'elemento body. Per quanto riguarda l'altezza, essa dipende invece dal contenuto.
Tutto a zero
Ogni browser possiede un foglio di stile integrato. In questi fogli di stile sono definiti alcuni valori predefiniti. Questo vale ad esempio per padding e margin. Purtroppo questi valori predefiniti variano tra i diversi browser. Questo aspetto rende difficile ottenere risultati identici nei vari browser in relazione al box model, tra gli altri. Pertanto è consigliabile impostare i margini predefiniti dei browser a zero. Questo può essere fatto nel seguente modo:
* { padding: 0; margin: 0; }
Aggiungete questa riga all'inizio del vostro foglio di stile. In questo modo potrete iniziare a posizionare le caselle nei punti desiderati.
Tipo di casella
Come un elemento viene effettivamente visualizzato e come influisce sugli altri elementi dipende dal tipo di elemento. In effetti, la specifica CSS distingue tra elementi block e elementi inline. (Ci sono altri tipi che verranno tralasciati in questo punto in quanto giocano un ruolo secondario).
Gli elementi block generano sempre una nuova riga. Gli elementi successivi iniziano anch'essi in una nuova riga. Gli elementi block tipici sono ad esempio p, div, h1, ul ecc. Per questi elementi valgono le proprietà già menzionate: margine esterno, padding, altezza, larghezza e bordo.
<h1>Digital Painting & Matte Painting: Definire la struttura dell'immagine</h1> <p>Modulo 2 - Parte 2: Un'immagine è sempre un insieme. Tuttavia è importante sempre pensare a dove lo spettatore dovrebbe guardare per primo.</p>
Guardando il risultato nel browser, si può notare che h1 e p generano ciascuno una riga separata.
Gli elementi inline, al contrario, non generano un paragrafo separato, ma vengono visualizzati nel flusso normale del testo. Gli elementi inline tipici sono span, em, strong, img, br ecc. Per gli elementi inline non vengono considerati margini esterni verticali né indicazioni di larghezza e altezza.
<h1><em>Digital Painting & Matte Painting</em>: Definire la struttura dell'immagine</h1> <p>Modulo 2 - Parte due: <strong>Un'immagine è sempre un insieme</strong>. Tuttavia è importante sempre pensare a dove lo spettatore dovrebbe guardare per primo.</p>
E anche qui uno sguardo al risultato:
Ora potete trasformare gli elementi che sono di natura blocco in elementi di tipo inline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modulo 2 - Parte 2: <em>Un'immagine è sempre un tutto</em>. Tuttavia è sempre necessario pensare a dove lo spettatore dovrebbe guardare per primo.</p>
</body>
</html>Date un'occhiata al risultato nel browser.
Il colore di sfondo dell'intestazione h1 segnala che l'elemento si estende per tutta la larghezza. La larghezza si basa sull'elemento genitore body.
Ora entra in gioco la proprietà display.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modulo 2 - Parte 2: <em>Un'immagine è sempre un tutto</em>. Tuttavia è sempre necessario pensare a dove lo spettatore dovrebbe guardare per primo.</p>
</body>
</html>
Con display: inline la larghezza dell'elemento cambia.
In effetti, la larghezza dell'elemento si adatta ora al contenuto esistente. Qui c'è un elenco dei valori che possono essere assegnati a display:
• none – non visualizzato
• block – l'elemento viene visualizzato come un elemento di blocco, generando quindi una nuova riga.
• inline – l'elemento viene visualizzato come un elemento inline, appare nel flusso di testo in esecuzione.
• inline-block – esternamente si comporta come un blocco, per altezza, larghezza e margine esterno specificati. Tuttavia, ogni elemento rimane nel flusso di testo in esecuzione. Si tratta quindi di una combinazione di un elemento di blocco e di un elemento inline.
• list-item – l'elemento viene mostrato come un elemento di blocco, ma ha inoltre un segno di elenco davanti ad esso.
• run-in – genera un elemento di blocco o inline a seconda del contenuto.
• table – funziona come l'elemento HTML table.
• inline-table – funziona come l'elemento HTML table, ma in linea.
• table-row – l'elemento contiene figli disposti uno accanto all'altro. Funziona come l'elemento HTML tr.
• table-cell – l'elemento rappresenta una cella di tabella e funziona come gli elementi HTML th e td.
• table-row-group – l'elemento contiene un gruppo di elementi con figli disposti uno accanto all'altro e funziona come l'elemento HTML tbody.
• table-header-group – l'elemento contiene un gruppo di elementi con figli disposti uno accanto all'altro e funziona come l'elemento HTML thead.
• table-footer-group – l'elemento contiene un gruppo di elementi con figli disposti uno accanto all'altro e funziona come l'elemento HTML tfoot.
• table-column – con questo vengono descritte le proprietà delle celle di una colonna. table-column funziona come l'elemento col in HTML.
• table-column-group – questo elemento contiene un gruppo di elementi attraverso cui vengono descritte le proprietà delle celle di una colonna. Funziona come l'elemento HTML colgroup.
• table-caption – con questo viene definito il titolo della tabella. La proprietà funziona come l'elemento HTML caption.
Effettivamente, CSS offre opzioni di visualizzazione diverse per vari tipi di elementi. Queste svolgono un ruolo decisivo in relazione al posizionamento degli elementi. Maggiori dettagli nei prossimi tutorial.
