Exemple 08 : Les propriétés raccourcies s'appliquant aux bordures des boîtes

Explications :

Certaines propriétés raccourcies s'appliquent directement aux boîtes que vont créer les balises (X)HTML. Elles ont alors ceci de particulier que les propriétés peuvent avoir jusqu'à quatre valeurs différentes s'appliquant aux quatre côtés de ces boîtes. Cela concerne les propriétés raccourcies margin, padding, ainsi que border-width, border-style et border-color. Les valeurs sont spécifiées dans l'ordre horaire en partant de midi : on indique d'abord la valeur s'appliquant au côté haut, puis au côté droit, puis au côté bas et enfin au côté gauche.

Vous pouvez spécifier de une à quatre valeurs. Voici comment ces valeurs se répartissent en fonction de leur nombre :

Lorsque vous indiquez quatre valeurs à une propriété raccourcie qui agit sur les bordures d'une boîte, la première valeur s'applique au haut, la seconde au côté droit, la troisième au bas et la quatrième au côté droit.
Lorsque vous indiquez trois valeurs, la première valeur s'applique au haut, la seconde aux côtés droit et gauche, et la troisième au bas.
Lorsque vous indiquez deux valeurs, la première valeur s'applique au haut et au bas, la seconde aux côtés droit et gauche.
Lorsque vous indiquez une valeur, elle s'applique aux quatre côtés.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 08 : Les propriétés raccourcies s'appliquant aux bordures des boîtes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
div {
        float :            left;
        width :            120px;
        height :           120px;
        margin :           0 20px;
        border :           10px solid;
        line-height :      120px;
        text-align :       center;
}
div#quatr-val {
        border-color :     red blue green yellow;
}
div#trois-val {
        border-color :     red blue green;
}
div#deux-val {
        border-color :     red blue;
}
div#une-val {
        border-color :     red;
}
</style>
</head>

<body>

<h1>
Exemple 08 : Les propriétés raccourcies s'appliquant aux bordures des boîtes
</h1>

  <div id="quatr-val">
Quatre valeurs
  </div>
  <div id="trois-val">
Trois valeurs
  </div>
  <div id="deux-val">
Deux valeurs
  </div>
  <div id="une-val">
Une valeur
  </div>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.