Corso HTML e CSS (19^ lezione): CSS: Box model (2^parte)

Impariamo a costruire un sito Web

Lezione 19: CSS: Box model (2^parte).

 

Cominciamo dunque a vedere come definire e dotare di stile un box.

Naturalmente negli esempi potremo vedere solo una parte delle proprietà che possono essere definite. Una descrizione più completa delle proprietà verrà fornita dopo l’illustrazione degli esempi pratici.

 1° Esempio – Box colorato.


Disegnamo un box rettangolare di colore rosso. Il nostro css conterrà una dichiarazione tipo:

#box {
   width:250px;
   height:150px;
   background:red;
}

Il codice html sarà:

<div id="box">
</div>

E il risultato a video:

Notiamo che al posto di background:red;potevamo scrivere background:#F00; usando la notazione esadecimale.

Inoltre al posto di definire il box con l’identificatore ID potevamo definire una classe scrivendo .box invece di #box e nell’html: <div class=”box”>

 2° Esempio – Impostiamo bordi e margini.

Nel css scriviamo:

.box1 {
   width:250px;
   height:150px;
   background:#CFF;
   border:5px solid #069;
   padding:10px;
   margin-left:50px;
}

Nell’html scriviamo:

<div class="box1">
   <div class="box"></div>
</div>

ed il risultato a video sarà:

In questo caso abbiamo usato le classi perché ricordiamo che gli ID possono essere usati per un solo elemento in ciascun foglio html. La classe può viceversa essere utilizzata per stilizzare diversi elementi. Il box che abbiamo insrito come contenuto di box1 è lo stesso dell’esempio precedente.

Come prima evidenza notiamo che pur avendo assegnato le medesime dimensioni a box ed a box1, box1 è stato ridimensionato per inludere il padding (margine interno) attorno al contenuto. Vedi la lezione precedente a questo proposito.

Altra cosa è il colore di sfondo di box1 che viene esteso a tutto il contenuto inclusa l’area del padding.

Il bordo di 5px viene a sua volta aggiunto alle dimensioni. Come si può vedere con un’unica istruzione dimesioniamo il bordo, assegnandogli un colore e dichiarandone la caratteristica (solid). Come detto le varie possibilità che abbiamo per definire i bordi verranno dettagliate successivamente.

Margin-left stabilisce che il box1 deve essere spostato di 50px dal bordo sinistro del foglio.

 3° Esempio – Ancora sui bordi e margini.

Nel css scriviamo:

.box2 {
   width:280px;
   height:214px;
   background-image:url(PelosaSfumata2.jpg);
   background-repeat:no-repeat;
   border-style:outset;
   border-radius:10px;
   -webkit-box-shadow:5px 5px 5px #333333;
   box-shadow:5px 5px 5px #333333;
}

 

Nell’html scriviamo:

<div class="box2">
</div>

ed il risultato a video sarà:

 

In questo caso abbiamo inserito un’immagine di sfondo con la proprietà background-image.

L’istruzione background-repeat:no-repeat; va messa per evitare che nello sfondo l’immagine sia ripetuta orizzontalmente e/o verticalmente.

Al bordo abbiamo assegnato la proprietà border-style:outset, per dare l’effetto 3D al bordo.

Inoltre abbiamo deciso di arrotondare i bordi con la proprietà border-radius che, ricordiamo non è supportata in egual modo da tutti i browsers. Per esempio Microsoft IE la supporta a partire dalla versione 9. Nelle versioni precedenti questa caratteristica verrà ignorata e i bordi risulteranno squadrati.

Infine abbiamo aggiunto la proprietà box-shadow per porre un’ombra sui lati destro e inferiore. Come spiegheremo in seguito il primo numero (5px) è la misura dell’ombra verticale, la seconda misura è quella orizzontale, mentre la terza è la sfocatura. Anche in questo caso ci sono problemi di supporto da parte dei browsers. Microsoft IE supporta l’ombra solo a partire dalla versione 9, mentre Safari supporta una variante di questa proprietà col suffisso -webkit-

Nelle prossime lezioni vedremo il dettaglio di queste proprietà con tutti i loro possibili valori e successivamente affronteremo il problema del posizionamento dei box.

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.