Corso HTML e CSS (18^ lezione): CSS: Box model (1^parte)

Impariamo a costruire un sito Web

Lezione 18: CSS: Box model (1^parte).

 


Iniziamo ad esporre con esempi una parte delle stilizzazioni particolarmente importanti e ricorrenti vedendo nell’ordine:

  • Box modeling
  • Bordi e sfondi
  • Formattazione del testo
  • Effetti ed animazioni

 Box modeling

Con questo termine intendiamo analizzare tutti i modi per definire dei box in html, posizionarli e dotarli di uno stile. In realtà tutti gli elementi hatml possono essere considerati dei box.

Cominciamo a vedere innanzitutto quali sono gli elementi che costituiscono un box:

  • Margini
  • Bordi
  • Padding
  • Contenuto

L’immagine seguente aiuta a capire come vengono intesi questi elementi nell’ html.

Box
Box modeling

Il margine è l’area che circonda il box. E’ inteso come ‘distanza’ dagli elementi intorno e quindi non può avere un colore di sfondo.

Il Bordo è un’area di contorno del box alla quale si possono attribuire diverse proprietà come lo spessore, il colore ed altre.

Il Padding è l’area intorno al contenuto che lo separa dal bordo. E’ inteso come distanza del contenuto dal bordo e quindi non gli può essere assegnato un colore, ma assume automaticamente il colore di sfondo del box.

Il Contenuto, come dice la parola stessa è ciò che noi inseriamo all’interno del box.

Diciamo due parole su come vengono calcolate le dimesioni di un box.

Le dimensioni attribuite ad un box con le proprietà height e width si riferiscono al contenuto del box (vedi figura), non al box completo. Questo fa si che se volete piazzare un box in una pagina html, per calcolare lo spazio che realmente occupa dovete calcolarne la dimensione come segue:

Altezza = height + padding-top (n° di pixels del padding sopra al contenuto) + padding-bottom (n° di pixels del padding sotto al contenuto) + border-top (n° di pixels del bordo sopra al contenuto) + border-bottom (n° di pixels del bordo sotto al contenuto). Tenete inoltre presente il n° di pixels del margine che separerà il box dagli elementi circostanti.

Questa regola per calcolare le dimensioni purtroppo non è valida per tutte le versioni dei browsers. Microsoft IE ( sempre lui!) fino alla versione 6 calcolava le dimesioni attribuendo larghezza ed altezza assegnate al box, non al contenuto, ma al box stesso. In questo caso le dimensioni del contenuto si otterrebbero sottraendo a width e height le dimensioni del bordo e del padding.

Per fare un esempio se definissimo il box con width=250px ed height=100px e border=10px e padding=10px, contutti i browser moderni il box avrebbe dimensioni width=290px (250 + 10 [border-left] + 10 [border-right] + 10 [padding-left] + 10 [padding-right]) e height=140 (medesimo calcolo).

Quando si costruisce un sito web però si deve evidentemente tener conto dei browser che i potenziali utenti possano usare e ahimé un numero consistente di persone usa Internet Explorer, che è il browser che meno di tutti si aliinea alle direttive del W3C e molti per di più non si curano di aggiornarne la versione. Questo implica per chi costrisce un sito web, la necessità di far si che le proprie pagine si possano vedere nel medesimo modo per tutti. Una soluzione che possiamo consigliare è di definire nel CSS due box anziché uno. Supponiamo di volere un box che occupi nella pagina uno spazio di 250×150. Definiamo questi due box:

#box_outside {
   width: 250px;
   height: 150px;
}

#box_inside {
   padding: 10px;
   border: solid 5px;
   margin: 10px;
}

In questo modo col box_ouside abbiamo circoscritto l’area più esterna nella quale andrà inserito il box reale. Non avendo alcuna proprietà di margin, border e padding, questo box avrà dimensione 250×150 in tutti i browser.

Con box_inside definiamo il box reale con i suoi valori di padding, border e margin. Non avendo le dimensioni il browser adatterà il box al suo contenuto rispettando però le proprietà di padding, border e margin.

Nell’html per inserire il nostro box scriveremo:

<div id="box_outside">

   <div id="box_inside">
      <p>Contenuto del box</p>
   </div>

</div>

 

Un’altra tecnica

potrebbe essere quella di impostare dimensioni diverse per il box a seconda della versione del browser dell’utente. Questo può essere fatto inserendo nell’ <head> le istruzioni:

<link rel=”stylesheet” href=”css/style.css” type=”text/css” media=”screen” />

<!–[if lt IE 7]><link rel=”stylesheet” href=”css/style.ie6.css” type=”text/css” media=”screen” /><![endif]–>

<!–[if IE 7]><link rel=”stylesheet” href=”css/style.ie7.css” type=”text/css” media=”screen” /><![endif]–>

La prima riga richiama il CSS standard che abbiamo chiamato ‘style.css’.

La seconda riga richiama un differente css valido se la versione di IE è inferiore a 7 (‘lt IE 7
significa less than IE 7), mentre la terza, se occorre, richiama un css specifico per la versione di IE 7.

Solo Internet Explorer può essere testato in questo modo.

Vediamo adesso in dettaglio tutte le proprietà che si riferiscono alla stilizzazione di un box.

Innanzitutto vi forniamo una tabella con tutte le proprietà e come vengano supportate dai vari browsers.

Property Description
CSS
IE
Firefox
Chrome
Safari
Opera
Box model
border Permette di impostare tutte le proprietà dei bordi in un’unica dichiarazione
1
border-bottom Imposta lo stile del bordo inferiore di un box
1
border-bottom-color Imposta il colore del bordo inferiore di un box
1
border-bottom-style Imposta lo stile del bordo inferiore di un box
1
border-bottom-width Imposta la larghezza del un bordo inferiore di un box
1
border-color Imposta il colore del bordo di un box
1
border-left Imposta lo stile del bordo sinistro di un box
1
border-left-color Imposta il colore del bordo sinistro di un box
1
border-left-style Imposta lo stile del bordo sinistro di un box
1
border-left-width Imposta la larghezza del bordo sinistro di un box
1
border-right Imposta lo stile del bordo destro di un box
1
border-right-color Imposta il colore del bordo destro di un box
1
border-right-style Imposta lo stile del bordo destro di un box
1
border-right-width Imposta il colore del bordo destro di un box
1
border-style Imposta lo stile del bordo di un box
1
border-top Imposta lo stile del bordo superiore di un box
1
border-top-color Imposta il colore del bordo superiore di un box
1
border-top-style Imposta lo stile del bordo superiore di un box
1
border-top-width Imposta la larghezza del bordo superiore di un box
1
border-width Imposta la larghezza del bordo di un box
1
outline Imposta il contorno di un box
2
outline-color Imposta il colore del contorno di un box
2
outline-style Imposta lo stile del contorno di un box
2
outline-width Imposta lo spessore del contorno di un box
2
outline-offset Stabilisce la distanza di un contorno dal bordo del box
3
11
border-bottom-left-radius Definisce il raggio di curvatura dell’angolo in basso a sinistra
3
9
4
5
5
10.5
border-bottom-right-radius Definisce il raggio di curvatura dell’angolo in basso a destra
3
9
4
5
5
10.5
border-image Definisce in un’unica dichiarazione tutte le proprietà border-image-*
3
-moz-
-webkit-
-webkit- 3
border-image-outset Specifies the amount by which the border image area extends beyond the border box
3
border-image-repeat Specifies whether the image-border should be repeated, rounded or stretched
3
border-image-slice Specifies the inward offsets of the image-border
3
border-image-source Specifies an image to be used as a border
3
border-image-width Specifies the widths of the image-border
3
border-radius Definisce in un’unica dichiarazione tutte le proprietà  border-*-radius
3
9
4
5
5
10.5
border-top-left-radius Definisce il raggio di curvatura dell’angolo in alto a sinistra
3
9
4
5
5
10.5
border-top-right-radius Definisce il raggio di curvatura dell’angolo in alto a destra
3
9
4
5
5
10.5
box-shadow Definisce un ombra per il box
3
9
4
10
10.5
box-sizing Permette di definire come determinati elementi debbano riempire una certa area
3
8
-moz-
9
-webkit-
box-align Specifies how to align the child elements of a box
3
-moz-
-webkit-
-webkit-
box-direction Specifies in which direction the children of a box are displayed
3
-moz-
-webkit-
-webkit-
box-flex Specifies whether the children of a box is flexible or inflexible in size
3
-moz-
-webkit-
-webkit-
box-flex-group Assigns flexible elements to flex groups
3
box-lines Specifies whether columns will go onto a new line whenever it runs out of space in the parent box
3
box-ordinal-group Specifies the display order of the child elements of a box
3
-moz-
-webkit-
-webkit-
box-orient Specifies whether the children of a box should be laid out horizontally or vertically
3
-moz-
-webkit-
-webkit-
box-pack Specifies the horizontal position in horizontal boxes and the vertical position in vertical boxes
3
-moz-
-webkit-
-webkit-
Colori e sfondi
background Imposta differenti proprietà per lo sfondo.
1
background-attachment Effettua la gestione dello scrolling di un’immagine di sfondo.
1
background-color Imposta il colore di sfondo di un elemento.
1
background-image Imposta un’immagine di sfondo.
1
background-position Imposta il posizionamento dell’immagine di sfondo.
1
background-repeat Imposta la ripetizione di un’immagine di sfondo.
1
background-clip Specifica l’area colorata dello sfondo
3
9
4
10
-webkit- 5
10.5
background-origin Specifica il posizionamento dell’immagine di sfondo
3
9
4
4
5
10.5
background-size Specifica la grandezza dell’immagine di sfondo
3
9
4
4
5
10.5
color-profile Permits the specification of a source color profile other than the default
3
opacity Imposta l’opacità di un elemento div
3
9
2
4
4
10
rendering-intent Permits the specification of a color profile rendering intent other than the default
3
Dimensioni
height Imposta l’altezza di un elemento
1
max-height Imposta l’altezza massima di un elemento
2
max-width Imposta la larghezza massima di un elemento
2
min-height Imposta l’altezza minima di un elemento
2
min-width Imposta la larghezza minima di un elemento
2
width Imposta la larghezza di un elemento
1
Formattazione del testo
color Imposta il colore di un testo
1
direction Imposta la direzione con cui il testo dev’essere stampato a video
1
font Imposta lo stile, la dimensione ed il carattere di un testo
1
font-family Imposta il carattere di un testo.
1
font-size Imposta le dimensioni di un testo.
1
font-size-adjust Modifica la x-height di un testo
3
2
font-stretch Consente di rendere il testo più o meno espanso del normale
3
font-style Imposta un testo in corsivo o in obliquo.
1
font-variant Imposta maiuscole e minuscole delle stesse dimensioni.
1
font-weight Imposta il grassetto per un testo.
1
@font-face Una regola che consente di usare font diversi dai fonts standard
3
8
3.6
4
3
10
letter-spacing Definisce lo spazio tra una lettera e l’altra.
1
2
line-height Definisce lo pazio in verticale tra una riga e l’altra.
1
text-align Gestione dell’allineamento orizzontale.
1
text-decoration Imposta la sottolineatura di un testo.
1
text-indent Imposta la tabulazione da sinistra verso destra di un elemento.
1
text-transform Imposta, a seconda del valore, un testo in maiuscolo, in minuscolo o le iniziali in maiuscolo.
1
text-justify Da usare con “text-align:justify”. Specifica il metodo di giustificazione.
3
5
text-outline Specifica un contorno per il testo
3
text-overflow Specifica cosa fare se il testo supera i limiti del suo contenitore
3
5
7
4
4
10.6
text-shadow Aggiunge un’ombra ad un testo
3
3
4
4
10
text-wrap Specifica la regola per spezzare il testo su più righe
3
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
3
punctuation-trim Specifies whether a punctuation character should be trimmed
3
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is “justify”
3
white-space Definisce come il browser deve gestire gli spazi bianchi
1
word-spacing Definisce lo spazio tra una parola e l’altra.
1
vertical-align Gestione dell’allineamento verticale.
1
word-break Specifies line breaking rules for non-CJK scripts
3
5
8
3
word-wrap Permette di spezzare a nuova riga una parola troppo lunga
3
5
3.6
Formattazione delle liste
list-style Ingloba tutte le proprietà stilistiche di un elemento lista.
1
list-style-image Permette di sostituire il puntatore di un elenco con un file d’immagine specificato
1
list-style-position Permette di stabilire la posizione dell’elenco sullo schermo.
1
list-style-type Permete di definire il puntatore disponibile di default per un elemento lista.
1
Formattazione delle tabelle
border-collapse Definisce l’aspetto del bordo di una tabella
2
border-spacing Definisce la distanza tra il bordo e le celle adiacenti
2
caption-side Definisce dove mostrare il contenuto del tag
2
empty-cells Definisce se mostrare o meno le celle prive di contenuto
2
table-layout Definisce il metodo di layout di una tabella
2
Posizionamento
bottom Imposta il posizionamento assoluto di un elemento dal margine inferiore del browser
2
clear Impedisce ad altri elementi di affiancarsi. E’ antagonista di float.
1
clip Imposta la forma di un elemento, in genere di una mappa d’immagine
2
display Stabilisce se e/o come un elemento debba essere mostrato
1
float Permette di gestire il posizionamento di elementi affiancati
2
left Imposta il posizionamento assoluto di un elemento dal margine sinistro del browser
2
overflow Stabilisce come gestire l’eventuale overflow del contenuto
2
overflow-x Stabilisce come gestire l’eventuale overflow sinistro-destro del contenuto
3
9
2
overflow-y Stabilisce come gestire l’eventuale overflow alto-basso del contenuto
3
9
2
overflow-style Specifies the preferred scrolling method for elements that overflow
3
rotation Rotates an element around a given point defined by the rotation-point property
3
rotation-point Defines a point as an offset from the top left border edge
3
position Imposta il posizionamento assoluto o relativo di un elemento
2
right Imposta il posizionamento assoluto di un elemento dal margine destro del browser
2
top Imposta il posizionamento assoluto di un elemento dal margine superiore del browser
2
visibility Imposta la visualizzazione o meno di un elemento
2
z-index Permette di sovrapporre elementi
2
Stampa
page-break-after Interruzione di riga dopo la fine del testo da stampare.
2
page-break-before Interruzione di riga prima della fine del testo da stampare.
2
Varie
cursor Imposta gli stili del puntatore del cursore.
1
Margini esterni e Margini interni
margin Imposta i margini di un box
1
margin-bottom Imposta il margine inferiore di un box
1
margin-left Imposta il margine sinistro di un box
1
margin-right Imposta il margine destro di un box
1
margin-top Imposta il margine superiore di un box
1
padding Imposta la spaziatura interna di un box
1
padding-bottom Imposta la spaziatura interna inferiore di un box
1
padding-left Imposta la spaziatura interna sinistra di un box
1
padding-right Imposta la spaziatura interna destra di un box
1
padding-top Imposta la spaziatura interna superiore di un box
1
Animation Properties
@keyframes Specifica l’animazione
3
-moz-   4
-webkit-
-webkit-
-o-
animation Permette di impostare tutte le proprietà dell’animazione in un’unica dichiarazione
3
-moz-   5
-webkit-
-webkit-
animation-name Specifica un nome per l’animazione @keyframes
3
-moz-   5
-webkit-
-webkit-
animation-duration Specifica quanti secondi o millisecondi impiega l’animazione per completare un ciclo
3
-moz-   5
-webkit-
-webkit-
animation-timing-function Specifica la velocità di inizio, fine e parte intermedia dell’animazione.
3
-moz-   5
-webkit-
-webkit-
animation-delay Ritardo dell’animazione
3
-moz-   5
-webkit-
-webkit-
animation-iteration-count Numero di volte che l’animazione deve essere ripetuta
3
-moz-   5
-webkit-
-webkit-
animation-direction Specifica se l’animazione deve essere vista in reverse o in cicli alternati
3
-moz-   5
-webkit-
-webkit-
animation-play-state Specifica se l’animazione deve essere eseguita o stare in pausa
3
-moz-   5
-webkit-
-webkit-
Multi-column Properties
column-count Specifica il numero di colonne in cui un elemento può essere suddiviso
3
-moz-
-webkit-
-webkit-
column-fill Specifies how to fill columns
3
column-gap Specifica il gap tra le colonne
3
-moz-
-webkit-
-webkit-
column-rule Permette di impostare tutte le proprietà della colonna in un’unica dichiarazione
3
-moz-
-webkit-
-webkit-
column-rule-color Specifica il colore delle colonne
3
-moz-
-webkit-
-webkit-
column-rule-style Specifica la larghezza della riga che separa le colonne
3
-moz-
-webkit-
-webkit-
column-rule-width Specifica lo stile della riga che separa le colonne
3
-moz-
-webkit-
-webkit-
column-span Specifica quante colonne un elemento debba raggruppare
3
-webkit-
column-width Specifica la larghezza delle colonne
3
-webkit-
columns Permette di impostare larghezza e numero delle colonne in un’unica dichiarazione
3
-moz-
-webkit-
-webkit-
Generated Content Properties
content Usato con :before e :after per inserire del contenuto generato
2
counter-increment Incrementa uno o più contatori
2
counter-reset Crea o resetta uno o più contatori
2
quotes Imposta il tipo di quatazion mark usare
2
Transition Properties
transition Permette di impostare tutte le proprietà della transizione in un’unica dichiarazione
3
-moz-   4
-webkit-
-webkit-
-o-
transition-property Specifica il nome della proprietà CSS per cui la transizione ha effetto
3
-moz-   4
-webkit-
-webkit-
-o-
transition-duration Specifica la durata della transizione in secondi o millisecondi
3
-moz-   4
-webkit-
-webkit-
-o-
transition-timing-function Specifica la velocità di inizio, fine e parte intermedia della transizione
3
-moz-   4
-webkit-
-webkit-
-o-
transition-delay Specifica quando l’effetto della transizione deve partire
3
-moz-   4
-webkit-
-webkit-
-o-
2D/3D Transform Properties
transform Applica una transformazione 2D o 3D  ad un elemento
3
-ms-  9
-moz- 3.6
-webkit-
-webkit-
-o-
transform-origin Cambia la posizione dell’elemento trasformato
3
-ms-  9
-moz- 3.6
-webkit-
-webkit-
-o-
transform-style Specifies how nested elements are rendered in 3D space
3
-webkit-
-webkit- 5
perspective Specifies the perspective on how 3D elements are viewed
3
-webkit-
-webkit- 5
perspective-origin Specifies the bottom position of 3D elements
3
-webkit-
-webkit-
backface-visibility Defines whether or not an element should be visible when not facing the screen
3

Per il supporto dei browsers, dove vedete un numero, questo indica la versione del browser che supporta la proprietà

✘ significa che la proprietà non è supportata e quindi per ora è meglio non usarla.

✔ significa che la proprietà è completamente supportata.

-ms-, -moz-, -webkit- sono prefissi da anteporre al nome della proprietà perché questa venga riconosciuta dal rispettivo browser.

La prossima lezione affronteremo esempi e spiegazioni.

 

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.