Les boîtes et les bordures
Les balises DIV définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts.
Le standard CSS propose un certain nombre de propriétés permettant de contrôler précisément les différentes marges. Une bonne maîtrise de ces propriétés permet de créer très facilement des interfaces relativement originales.
Propriété |
Valeur |
description |
| border[-top -left -bottom -right]-width |
En points (pt), pouces (in), en cm, en pixels (px), ou en % |
Epaisseur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-color |
border-left-color: #RRGGBB; |
Couleur de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border[-top -left -bottom -right]-style |
solid (pleine), dashed (en tirets), dotted (en pointillés), double (double et remplie) ou ridge (en 3D) |
Style de la bordure [supérieure, de gauche, inférieure ou de droite] |
| border-collapse |
collapse
separate |
Effet » 3D » ou non |
| border |
border:2px dotted yellow; |
Raccourci global les propriétés de bordure
|
exemple :
border:3px solid yellow;
un peu de jaune
border:2px dashed red;
un peu de rouge
border:5px dotted blue;
un peu de bleu
border:5px double green;
un peu de vert
border:6px ridge violet;
un peu de violet
border:7px medium yellow;
un peu de jaune
border:7px thin red;
un peu de rouge
border:5px thick blue;
un peu de bleu
border:10px groove green;
un peu de vert
border:4px hidden violet;
un peu de violet
border:3px inset yellow;
un peu de jaune
border:2px none red;
un peu de rouge
border:5px outset blue;
un peu de bleu
border:1px inherit green;
un peu de vert
border:6px groove violet;
un peu de violet
