A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

Ovviamente si possono combinare tra di loro i diversi elementi di stile ed ottenere un risultato più complesso.

Nell'esempio che segue lo spessore dei bordi superiore ed inferiore è stato impostati a 20 pixels
(border-top-width:20px; border-bottom-width:20px),
quello dei bordi sinistro e destro a 30 pixels
(border-left-width:30px; border-right-width:30px).
Per quanto riguarda i colori, il bordo sinistro è stato impostato sul magenta (border-left-color:#FF00FF),
quello destro sul rosso
(border-right-color:#FF0000),
quello superiore sul ciano
(border-top-color:#00FFFF),
quello inferiore sul verde
(border-bottom-color:#00FF00).
Per quanto riguarda lo stile per tutti i bordi è stato scelto quello in rilievo (border-style:ridge)

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     h1 { border-top-width:20px; border-bottom-width:20px;
     border-left-width:30px; border-right-width:30px;
     border-left-color:#FF00FF; border-right-color:#FF0000;
     border-top-color:#00FFFF; border-bottom-color:#00FF00;
     border-style:ridge}
     </style>
     </head>
     <body>
     <h1>Intestazione</h1>
     </body>
</html>

anteprima

Per comodità i vari elementi di stile sono stati sempre assegnati ad un tag <h1> cioè ad un titolo, ma puoi scegliere di applicarli a qualunque altro tipo di tag.

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     q {border-width: thin;border-color:#00FF00;border-style:ridge}
     </style>
     </head>
     <body>
     <p><q>Questo è un paragrafo a cui è stato applicato un bordo</q></p>
     <p>Questo è invece un paragrafo normale</p>
     </body>
</html>

anteprima

Nota: come avrai potuto osservare all'interno del normale tag del paragrafo <p> è stato inserito un altro tag <q> che identifica in HTML la citazione breve ed è a questo tag che è stato assegnato lo stile.
Se lo stile fosse stato assegnato direttamente al tag <p>, tutti i paragrafi presenti nella pagina sarebbero stati dotati di bordi ed il bordo non sarebbe stato aderente al testo, come nell'esempio, ma disposto per tutta la larghezza della pagina.
Analogo risultato si sarebbe ottenuto anche ricorrendo ad una classe o ad un selettore di identità, già oggetto nella quarta lezione.

Ricorrendo ad una classe, la sintassi sarebbe stata la seguente:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     .cornice {border-width: thin;border-color:#00FF00;border-style:ridge}
     </style>
     </head>
     <body>
     <p class:"cornice">Questo è un paragrafo a cui è stato applicato un bordo</p>
     <p>Questo è invece un paragrafo normale</p>
     </body>
</html>

e questo sarebbe stato il risultato:

anteprima

6.3 Il riempimento

Il riempimento o padding è lo spazio interno che separa il contenuto dal bordo. Il padding si può suddividere in quattro zone:

padding-top (superiore)
padding-right (destro)
padding-bottom (inferiore)
padding-left (sinistro)

I valori ammessi sono

px (pixels)
cm (centimetri)
mm (millimetri)
pt (punti)
pc (pica equivalenti a 12 punti)
em (unità)

oppure valori in percentuale.

I quattro elementi di stile visti in precedenza possono essere definiti con un solo elemento padding. Quando viene impostato questo valore, il browser assume come ordine il primo valore di riempimento in alto (padding-top), il destro (padding-right), l'inferiore (padding-bottom) ed il sinistro (padding-left).

È possibile anche settare solo due o tre valori: quelli mancanti verranno determinati in funzione del lato opposto.

Vediamo ora un esempio che contenga contemporaneamente margini, bordi e riempimento:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY { background:#FFFFD1; color:#000000 }
     h4 {margin-top: 50px; margin-left: 100px; margin-bottom: 50px;
     margin-right: 100px; border-width:5px; border-color: red;
     border-style : solid; padding:30px 100px 30px 100px;
     text-align:justify }
     </style>
     </head>
     <body>
<h4>Questo titolo è stato scritto esattamente nell'angolo superiore sinistro della pagina senza mai andare a capo. Come puoi vedere, si è disposto in un'area delimitata alla quale è stato assegnato un margine superiore e inferiore di 50 pixels e laterale di 100 pixels, un bordo solido di colore rosso dello spessore di 10 pixels ed un riempimento di 100 pixels laterale, e di 30 pixels superiore ed inferiore.</h4>
<p>Questo è invece un paragrafo normale a cui non è stato applicato
nessun elemento di stile</p>
     </body>
</html>

anteprima

Nota: come avrai potuto osservare l'elemento di stile è stato applicato ad un titolo <h4>, anziché ad un paragrafo, in modo da evitare che si diffondesse a tutti gli altri paragrafi presenti nella pagina. Si sarebbe potuta anche usare una classe o un selettore di identità, già oggetto nella quarta lezione.