SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Bordures |
|
|
 | |
Les mentions décrites ici sont appropriées à tous les repères HTML qui créent un paragraphe distinct ou un bloc, par exemple pour h[1-6], p, blockquote, address ou bien pre. Mais les éléments de bloc, ce sont aussi div, table, tr, th et td. Ainsi par exemple, il est possible de définir en HTML un 
tableau sans quadrillage, dans lequel pourtant des cellules distinctes
reçoivent une bordure à votre bon vouloir - à savoir à l'aide de mentions de feuilles de style pour les bordures. Même sur body les mentions de feuilles de style décrites ici peuvent être employées - dans ce cas une bordure est tracée autour de tout le corps visible du fichier HTML.
Si vous ne mentionnez rien d'autre dans la définition de la bordure, il se peut que les éléments contenus collent de très prés à la bordure qui les entoure. À cette fin, il vous est possible de définir des espaces intérieurs. Ainsi vous créez un espace entre la bordure et son contenu.
En règle générale vous combinerez plusieurs mentions sur les bordures, ainsi il est pertinent de ne pas mentionner seulement l'épaisseur de la bordure mais aussi la couleur désirée. Il existe même différents types de bordures au choix. Toutes les propriétés de bordure peuvent être appliquées au choix sur les quatre côtés d'un élément mais aussi sur un ou plusieurs côtés précisés.
Pour les bordures, le modèle d'éléments de bloc de Netscape 4.x s'est distingué très négativement. Ce navigateur n'étend les éléments de bloc en largeur que sur la largeur de leur contenu, dans la mesure où celui-ci nécessite moins de place que la largeur totale disponible. Ce n'est qu'en trichant peu élégamment que l'on arrive à berner Netscape 4.x , pour qu'il étende un élément de bloc sur toute la largeur mise à disposition par la fenêtre d'affichage, les marges du document, ou l'élément parent. Vous n'obtiendrez une représentation uniforme que si vous travaillez avec des mentions sur la largeur d'éléments, par exemple avec des mentions comme width:100% ou bien width:500px. Une autre tricherie encore plus efficace pour que Netscape étende l'élément effectivement sur toute la largeur disponible est de mentionner margin:0px.
 |
border[-top, -left, -right, -bottom]-width (Épaisseur de la bordure)Vous pouvez fixer l'épaisseur de la ligne de bordure d'un élément. Afin de lui donner un sens, il vous faut combiner cette mention avec au moins une autre pour le type de bordure, le cas échéant également avec une autre sur la Couleur de la bordure.
<html><head><title>border-width</title>
<style type="text/css">
#gauche {
border-left-width:1cm;
border-left-style:solid;
border-color:red;
padding-left:1cm;
text-align:justify; }
#gauchedroite {
border-left-width:1cm;
border-left-style:solid;
border-left-color:red;
padding-left:1cm;
border-right-width:1cm;
border-right-style:solid;
border-right-color:green;
padding-right:1cm;
text-align:justify; }
#toutautour {
border-width:1px;
border-style:solid;
border-color:blue;
padding:1cm;
text-align:justify; }
}
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<p id="gauche">xxxxx xxxxx xxxxx etc...</p>
<p id="gauchedroite">xxxxx xxxxx xxxxx etc...</p>
<p id="toutautour">xxxxx xxxxx xxxxx etc...</p>
</body></html>
|
Avec border-width: vous pouvez spécifier l'épaisseur de la bordure d'un élément. Une mention numérique est possible pour l'épaisseur de la bordure ou bien l'une des valeurs suivantes:
thin = fine.
medium = moyenne.
thick = épaisse.
Pour préciser une épaisseur de bordure différente pour les différents côtés de l'élément, il y a deux possibilités. La première est de noter plusieurs mentions pour border-width et de les séparer par des espaces.
par exemple: border-width:5px 5px;
Pour ce faire, les règles suivantes s'appliquent:
Deux mentions: la première désigne l'épaisseur de la bordure pour le haut et le bas, la deuxième, l'épaisseur de la bordure pour la droite et la gauche.
Trois mentions: a première désigne l'épaisseur de la bordure pour le haut, la deuxième, l'épaisseur de la bordure pour la droite et la gauche et la troisième l'épaisseur de la bordure pour le bas.
Quatre mentions: la première désigne l'épaisseur de la bordure pour le haut, la deuxième, l'épaisseur de la bordure pour la droite, la troisième l'épaisseur de la bordure pour le bas et la quatrième l'épaisseur de la bordure pour la gauche.
La deuxième possibilité consiste à utiliser les sous-possibilités de border-width:
border-top-width définit l'épaisseur de la bordure pour le haut.
border-left-width l'épaisseur de la bordure pour la gauche.
border-right-width l'épaisseur de la bordure pour la droite.
border-bottom-width l'épaisseur de la bordure pour la gauche.
L'Explorer Internet MS n'interprète la mention border-width que lorsqu'en outre est mentionné le type de bordure (border-style) à savoir par exemple:
<p style="border-style:solid; border-width:thin">.
|
|
border[-top, -left, -right, -bottom]-color (Couleur de la bordure)Vous pouvez spécifier la couleur de la bordure pour un élément. Vous devez combiner la mention pour le faire avec une mention sur le type de la bordure et ou avec une mention sur l' épaisseur de la bordure.
<html><head><title>border-color</title> </head><body bgcolor="#000000" text="#E0E0E0"> <p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px"> xxxxx xxxxx xxxxx etc...</p> <p style="border-top-color:#FF00FF; border-left-color:#00FF00; border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px; border-style:solid; padding:8px"> xxxxx xxxxx xxxxx etc...</p> <p style="border-color:cyan yellow; border-width:8px; border-style:solid; padding:16px"> xxxxx xxxxx xxxxx etc...</p> </body></html> |
Avec border-color: Vous pouvez fixer la couleur pour la bordure d'un élément . Une mention de couleur ou la valeur transparent sont permises (bordure transparente, intéressant pour des éléments qui se chevauchent comme par exemple c'est possible avec un Positionnement).
Pour spécifier des couleurs distinctes pour les différents côtés d'un élément, il y a deux possibilités. La première est de noter plusieurs mentions pour border-color en les séparant par des espaces.
par exemple: border-color:#FFFF00 red;
Pour ce faire, les règles suivantes s'appliquent:
Deux mentions: la première désigne la couleur de la bordure pour le haut et le bas, la deuxième, la couleur de la bordure pour la droite et la gauche.
Trois mentions: a première désigne la couleur de la bordure pour le haut, la deuxième, la couleur de la bordure pour la droite et la gauche et la troisième la couleur de la bordure pour le bas.
Quatre mentions: la première désigne la couleur de la bordure pour le haut, la deuxième, la couleur de la bordure pour la droite, la troisième la couleur de la bordure pour le bas et la quatrième la couleur de la bordure pour la gauche.
La deuxième possibilité consiste à utiliser les sous-possibilités de border-color:
border-top-color définit la couleur de la bordure pour le haut,
border-left-color la couleur de la bordure pour la gauche,
border-right-color la couleur de la bordure pour la droite, et
border-bottom-color la couleur de la bordure pour la gauche.
Les sous-possibilités de border-color ne sont disponibles à la différence de border-width que depuis CSS 2.0 et sont ignorées des navigateurs plus anciens.
L'Explorer Internet MS n'interprète la mention border-color que lorsqu'en outre est mentionné le type de bordure (border-style), à savoir par exemple:
<p style="border-style:solid; border-color:red">.
Netscape 4.x a en partie d'énormes problèmes avec les mentions sur la couleur de la bordure et interprète en partie des choses absurdes à l'œil nu. L'exemple ci-dessus par exemple le fait vilainement trébucher.
|
|
border[-top, -left, -right, -bottom]-style (Type de la bordure)Avec le type de la bordure vous pouvez définir différentes bordures décoratives. Afin que les types soient mis en valeur, il est recommandé de combiner la mention avec d'autres relatives à l' épaisseur de la bordure et/ou à la couleur de la bordure.
<html><head><title>border-style</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure moyenne et le type en pointillés.</p> <p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure moyenne et le type en tirets.</p> <p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure moyenne et de type pleine.</p> <p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure moyenne et de type double.</p> <p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure de 12px et de type en relief.</p> <p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure de 12px et de type effet 3D.</p> <p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure de 12px et de type rentrante.</p> <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;"> Paragraphe de texte avec une épaisseur de bordure de 12px et de type sortante.</p> </body></html> |
Avec border-style: Vous pouvez fixer le type pour la bordure d'un élément. Une des mentions suivantes est permise.
none = pas de bordure (ou bien bordure transparente).
hidden = pas de bordure (ou bien bordure transparente).
dotted = en pointillés .
dashed = en tirets.
solid = pleine.
double = double et pleine.
groove = en relief.
ridge = effet 3D.
inset = rentrante.
outset = sortante.
Pour spécifier des types distincts pour les différents côtés d'un élément, il y a deux possibilités. La première est de noter plusieurs mentions pour border-style en les séparant par des espaces.
par exemple: border-style:solid double;
Pour le faire, les règles suivantes s'appliquent:
Deux mentions: la première désigne le type de la bordure pour le haut et le bas, la deuxième, le type de la bordure pour la droite et la gauche.
Trois mentions: a première désigne le type de la bordure pour le haut, la deuxième, le type de la bordure pour la droite et la gauche et la troisième le type de la bordure pour le bas.
Quatre mentions: la première désigne le type de la bordure pour le haut, la deuxième, le type de la bordure pour la droite, la troisième le type de la bordure pour le bas et la quatrième le type de la bordure pour la gauche.
La deuxième possibilité consiste à utiliser les sous-possibilités de border-style:
border-top-style définit le type de la bordure pour le haut,
border-left-style le type de la bordure pour la gauche,
border-right-style le type de la bordure pour la droite, et
border-bottom-style le type de la bordure pour la gauche.
Les sous-possibilités de border-style ne sont disponibles à la différence de border-width que depuis CSS 2.0 et sont ignorées des navigateurs plus anciens.
La mention hidden est conçue avant tout pour des cellules de tableau mitoyennes. Tandis que la mention none n'empêche que l'affichage de la bordure de l'élément auquel elle s'applique, la mention hidden fait en sorte que même l'affichage de la bordure des éléments voisins est empêché, dans la mesure où une bordure leur est affectée. La condition préalable pourtant est que soit notée la propriété CSS particulière suivante pour l'élément table concerné:
boder-collapse:collapse
Ceci est une propriété CSS récente qui permet des règles pour la bordure de tableaux. Avec la valeur collapse toutes les bordures des cellules coïncident proprement, ce qui revient à dire qu'une cellule avec une bordure à droite de 1px et une cellule à la droite de celle-ci avec une bordure à gauche de 1px forment une bordure commune de 1px. Par opposition la valeur possible et qui correspond cependant au réglage par défaut s'appelle separate. Avec elle, les bordures de cellules mitoyennes se "touchent" sans se chevaucher. Dans l'exemple des deux cellules citées, on obtiendrait visuellement une bordure séparant les deux cellules d'une épaisseur de 1+1 = 2px.
La propriété border-collapse n'est jusqu'alors interprétée que par l'Explorer Internet 5.x et par le navigateur Opera.
Netscape 4.x n'interprète border-style que lorsqu'en plus une mention concernant l'épaisseur de la bordure est notée, à savoir par exemple:
<p style="border-style:solid; border-width:thin">.
Les deux navigateurs n'interprètent pas complètement les mentions concernant border-style.
Quelques uns des effets (par exemple groove) ne sont significatifs que si vous mentionnez une couleur qui se distingue du noir.
|
|
border[-top, -left, -right, -bottom] (Bordure en général)Cette mention récapitule les différentes mentions possibles suivantes:
border-width
border-style
border-color
<html><head><title>border</title>
<style type="text/css">
h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
h2 { border-top:1px solid blue; margin:0px; }
p.info { border:1px solid grey; background-color:#E0E0E0; padding:4px; margin:0px; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">
<h1>Titre N°1</h1>
<p>xxxxx xxxxx xxxxx etc....</p>
<h2>&Titre N°2</h2>
<p>xxxxx xxxxx xxxxx etc...</p>
<p class="info">xxxxx xxxxx xxxxx usw.</p>
</body></html>
|
Avec border: vous pouvez spécifier l'aspect de la bordure autour d'un élément. Notez les mentions sur l'épaisseur de la ligne, le type de la bordure et la couleur en les séparant par des espaces, comme dans les exemples ci-dessus. L'ordre pour les différentes mentions n'a pas d'importance.
En outre, vous pouvez faire des mentions groupées pour l'épaisseur de la bordure, la couleur de la bordure et le type de la bordure également pour les différents côtés de l'élément. Pour cela sont conçues les sous-propriétés de border:
border-top définit une mention pour le haut,
border-left pour la gauche,
border-right pour la droite et
border-bottom pour le bas.
|
| |
 |
Couleurs et images d'arrière plan
|
 |
Espaces intérieurs
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
