|
Home -> Manuali e Tutorials -> Guida CSS -> Bordi e Riempimento (3/3)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
IMPOSTARE I BORDI CON I CSS
Colore del bordo
Il colore assegnato ai vari bordi è elemento molto importante per dare un'apparenza tridimensionale.
Per determinarne il colore si usano i seguenti elementi di stile:
- border-top-color (colore della parte superiore)
- border-right-color (colore della parte destra)
- border-left-color (colore della parte sinistra)
- border-bottom-color (colore della parte inferiore)
- border-color (colore uguale per tutti e quattro i bordi)
I colori devono essere espressi in formato esadecimale preceduti dal simbolo # oppure con il loro nome in inglese.
Ecco un primo esempio in cui assegnamo ad un titolo un bordo spesso ( thick ) di colore #3399CC e con stile doppio ( double ):
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
h1 { border-width: thick; border-color:#3399CC; border-style:double }
</style>
</head>
<body>
<h1> Intestazione </h1>
</body>
|
Ed ecco un secondo esempio in cui i bordi saranno medi ( medium ), di colore bianco e a puntini ( dotted ):
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
h1 { border-width: medium; border-color:white; border-style:dotted }
</style>
</head>
<body>
<h1> Intestazione </h1>
</body>
|
Un terzo esempio in cui i bordi saranno spessi ( thick ), di colore ciano ( cyan ) ed in rilievo ( ridge ):
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
h1 { border-width: thick; border-color:cyan; border-style: ridge }
</style>
</head>
<body>
<h1> Intestazione </h1>
</body>
|
Un quarto esempio in cui i bordi saranno spessi ( thick ), di colore #9999CC e rivolti verso l'esterno ( outset ):
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
h1 { border-width: thick; border-color:#9999CC; border-style: outset }
</style>
</head>
<body>
<h1> Intestazione </h1>
</body>
|
Ovviamente si possono combinare tra di loro i diversi elementi di stile ed ottenere un risultato più complesso; eccone un esempio:
<html>
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
h1 { border-top-width:10px; border-bottom-width:10px;
border-left-width:5px; border-right-width:5px;
border-left-color:#999999; border-right-color:#999999;
border-top-color:#999999; border-bottom-color:#999999;
border-style:ridge}
</style>
</head>
<body>
<h1> Intestazione </h1>
</body>
</html>
|
Per comodità i vari elementi di stile sono stati sempre assegnati ad un tag <h1> cioè ad un titolo, ma si può scegliere di applicarli a qualunque altro tipo di tag. Eccone un esempio, in cui viene usato anche il Tag <q>...</q> per le citazioni brevi:
<html>
<head>
<style type = "text/css">
BODY { background:#dee3e7 }
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>
|
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>
<style type = "text/css">
BODY { background:#dee3e7 }
h4 { margin-top: 50px; margin-left: 100px; margin-bottom: 50px; margin-right: 100px; border-width:5px; border-color: #CCCCCC; border-style : solid; padding:30px 100px 30px 100px;
text-align:justify }
</style>
</head>
<body>
<h4> TITOLO </h4>
<p> PARAGRAFO NORMALE </p>
</body>
</html>
|
Torna su  | Indice Guida  | Pagina << 14 >>
|
