Bordi
Nell’esempio precedente abbiamo creato un contenitore div sul quale è stato applicato un colore di sfondo. Su di esso possiamo applicare dei bordi. Immaginiamo di voler creare più div ognuno con dei bordi diversi. Possiamo usare in questo caso le classi ed ecco un esempio
1 div{
2
3
4 border: 1px solid red;
5
6 width:300px;
7 height: 300px;
8 background-color: grey;
9
10
11
12 }
13
14
15 .div1{
16
17
18 border: 2px solid blue;
19
20 width:200px;
21 height: 200px;
22 background-color: red;
23
24
25
26
27
28
29 }
30
31
32 .div2{
33
34
35 border: 3px solid red;
36
37 width:100px;
38 height: 100px;
39 background-color: yellow;
40
41
42
43
44
45
46 }
Analizziamo il codice. Abbiamo stabilito una proprietà che è valida per ogni div della pagina e cioè border seguita da un valore
numerico che rappresenta lo spessore del bordo poi lo stile solid (cioè colore pieno) ed il colore. Quindi scrivendo border:1px solid red; stiamo specificando un bordo da applicare al div con spessore 1 pixel e colore a tratto continuo rosso. Poi seguono le misure del div contenitore e cioè width che è la larghezza e height l’altezza sempre in pixels. Infine abbiamo specificato il colore di sfondo che già conosciamo come proprietà. Successivamente abbiamo creato due classi div1 e div2 con le stesse proprietà ma con valori diversi. Questo codice lo abbiamo usato nel file html che qui mostriamo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <link rel="stylesheet" href="stile.css" type="text/css">
8
9
10
11 </head>
12 <body>
13
14
15 <div>
16
17
18 <h1>Div</h1>
19
20
21 </div>
22
23
24 <div class="div1">
25
26
27 <h1>Div1</h1>
28
29
30
31 </div>
32
33 <div class="div2">
34
35
36 <h1>div2</h1>
37
38
39
40 </div>
41
42
43
44 </body>
45 </html>
In pratica abbiamo creato tre div di cui il primo non ha classe mentre gli altri due ereditano le classi rispettive div1 e div2. Ora se aprite la pagina nel browser noterete tre div con un loro testo interno e sono diversi sia nel bordo, nella grandezza e nel colore di sfondo. Avete notato che abbiamo inserito un tag <h1> all’interno dei div. Voi nei div potete inserire qualsiasi cosa anche una immagine. Possiamo anche specificare un bordo diverso superiore, inferiore e laterale del nostro div e con colori diversi. Ecco come
1 div{
2
3
4
5
6 border-top: 2px solid blue;
7 border-left:2px dotted red;
8 border-right:2px dashed yellow;
9 border-bottom: 2px solid orange;
10
11 width:300px;
12 height: 300px;
13 background-color: yellow;
14
15
16
17
18
19 }
Analizziamo il codice. Abbiamo specificato per qualsiasi div della pagina un bordo superiore (border-top) con pixel pari a 2 e di colore blue, a sinistra (border-left) di colore rosso e a puntini (dotted) e a destra di colore giallo e tratteggiato (dashed), ed infine inferiore (border-bottom) di colore arancione.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <link rel="stylesheet" href="stile.css" type="text/css">
8
9
10
11 </head>
12 <body>
13
14
15 <div>
16
17
18 <h1>Div</h1>
19
20
21 </div>
22
23
24
25 </body>
26 </html>