IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Glossaire des propriétés CSS

Glossaire des proprits CSS


prcdentsommairesuivant

II. Proprits de mise en forme des botes

II-A. Dimensions des botes

II-A-1. Largeur | width

width: permet de dfinir la largeur d'un lment. La valeur peut tre en px, %, ou encore auto, la valeur par dfaut. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | auto | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
Width : 200px ;
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
CacherSélectionnez

II-A-2. Hauteur | height

height: idem que pour la largeur mais pour la hauteur. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | auto | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
Height : 50px ;
Lorem ipsum dolore sit amet, consectetur adipisicing elit.
Voir la source
CacherSélectionnez

II-A-3. Largeur minimale | min-width

min-width: permet de dfinir la largeur minimale sur un lment de type bloc. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | inherit

Compatibilit: IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est supporte par IE 8 que si un doctype est dclar. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
Min-width : 500px ;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source
CacherSélectionnez

II-A-4. Largeur maximale | max-width

max-width: permet de fixer la largeur maximale d'un lment de type bloc. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | none | inherit

Compatibilit: IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est supporte par IE 8 que si un doctype est dclar. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
max-width: 50px;

Lorem ipsum dolore sit amet, consectetur adipisicing elit.

Voir la source
CacherSélectionnez

II-A-5. Hauteur minimale | min-height

min-height: permet de fixer la hauteur minimale d'un lment de type bloc. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | inherit

Compatibilit: IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est supporte par IE 8 que si un doctype est dclar. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
min-height: 200px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Voir la source
CacherSélectionnez

II-A-6. Hauteur maximale | max-height

max-height: permet de fixer la hauteur maximale d'un lment de type bloc. Cette proprit ne tient pas compte des marges, espacements et bordures.

Syntaxe: <length> | <percentage> | none | inherit

Compatibilit: IE 7+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est supporte par IE 8 que si un doctype est dclar. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
max-height: 20px;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Voir la source
CacherSélectionnez

II-B. Marges extrieures

II-B-1. Marge externe en haut | margin-top

margin-top: permet de dfinir la marge externe en haut d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <margin-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
margin-top: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-B-2. Marge externe gauche | margin-left

margin-left: permet de dfinir la marge externe gauche d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <margin-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
margin-left: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-B-3. Marge externe droite | margin-right

margin-right: permet de dfinir la marge externe droite d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <margin-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
Margin-right : 20px ;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-B-4. Marge externe en bas | margin-bottom

margin-bottom: permet de dfinir la marge externe en bas d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <margin-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
Margin-bottom : 20px ;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez
<style type="text/css">
    .m-bottom1 {
        border: 1px solid black;
        background-color: red;
        width: 800px;
    }
 
    .m-bottom2 {
        margin-bottom: 20px;
        background-color: yellow;
    }
 
    .m-bottom3 {
        background-color: yellow;
    }
</style>
<div class="m-bottom1">
    <div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div class="m-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

II-B-5. Marge externe | margin

margin: permet de dfinir en une seule fois les marges externes de tous les cts d'un lment. Les valeurs ngatives sont autorises.

Syntaxe: <margin-width>{1,4} | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

Indiquez de une quatre valeurs la suite. Selon le nombre de valeurs que vous mettez, la signification change:

  • une valeur: ce sera la marge pour le haut, le bas, la gauche et la droite;
  • deux valeurs: la premire correspond la marge pour le haut et le bas, la seconde pour la gauche et la droite;
  • trois valeurs: la premire correspond la marge du haut, la seconde aux marges gauche et droite, la troisime la marge du bas;
  • quatre valeurs: respectivement la marge du haut, de la droite, du bas, de la gauche.
 
Sélectionnez
margin: 20px 5px; /* 20px de marge en haut et en bas, 5px  gauche et  droite */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-C. Espacements

II-C-1. Espacement en haut | padding-top

padding-top: permet de dfinir l'espacement interne en haut d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <padding-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
padding-top: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-C-2. Espacement gauche | padding-left

padding-left: permet de dfinir l'espacement interne gauche d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <padding-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
padding-left: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-C-3. Espacement droite | padding-right

padding-right: permet de dfinir l'espacement interne droite d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <padding-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
padding-right: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-C-4. Espacement en bas | padding-bottom

padding-bottom: permet de dfinir l'espacement interne en bas d'un lment. Plusieurs units sont possibles pour cette proprit (px, %, em). Les valeurs ngatives sont autorises.

Syntaxe: <padding-width> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
padding-bottom: 20px;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-C-5. Espacement tout-en-un | padding

padding: permet de dfinir en une seule fois l'espacement interne de tous les cts d'un lment. Les valeurs ngatives sont autorises.

Syntaxe: <padding-width>{1,4} | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

Indiquez de une quatre valeurs la suite. Selon le nombre de valeurs que vous mettez, la signification change:

  • une valeur: ce sera la marge pour le haut, le bas, la gauche et la droite;
  • deux valeurs: la premire correspond la marge pour le haut et le bas, la seconde pour la gauche et la droite;
  • trois valeurs: la premire correspond la marge du haut, la seconde aux marges gauche et droite, la troisime la marge du bas;
  • quatre valeurs: respectivement la marge du haut, de la droite, du bas, de la gauche.
 
Sélectionnez
padding: 20px 5px 10px; /* 20px de marge en haut, 10px en bas, 5px  gauche et  droite */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Voir la source
CacherSélectionnez

II-D. Bordures

Pour les proprits de cette partie suivies d'un astrisque (border*), il est possible de dfinir plus prcisment l'effet voulu en "combinant" les noms de proprits.
Exemples:

II-D-1. paisseur de la bordure | border-width*

border-width: permet de dfinir l'paisseur du trait.

Syntaxe: <border-width>{1,4} | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

Indiquez de une quatre valeurs la suite. Selon le nombre de valeurs que vous mettez, la signification change:

  • une valeur: bordure gale pour les quatre cts;
  • deux valeurs: la premire correspond l'paisseur pour le haut et le bas, la seconde pour la gauche et la droite;
  • trois valeurs: la premire correspond l'paisseur du haut, la seconde pour la gauche et la droite, la troisime pour le bas;
  • quatre valeurs: respectivement l'paisseur du haut, de la droite, du bas, de la gauche.
 
Sélectionnez
border-width: 5px 1px 3px 0;
border-color: black;
border-style: solid;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
CacherSélectionnez

II-D-2. Couleur de la bordure | border-color*

border-color: permet de dfinir la couleur de la bordure.

Syntaxe: [ <color> | transparent ]{1,4} | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Notes: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit. Internet Explorer 6 et prcdents ne supportent pas la valeur transparent.

Version CSS: 1

Indiquez de une quatre valeurs la suite. Selon le nombre de valeurs que vous mettez, la signification change:

  • une valeur: couleur unique pour les quatre cts;
  • deux valeurs: la premire correspond la couleur pour le haut et le bas, la seconde pour la gauche et la droite;
  • trois valeurs: la premire correspond la couleur du haut, la seconde pour la gauche et la droite, la troisime pour le bas;
  • quatre valeurs: respectivement la couleur du haut, de la droite, du bas, de la gauche.
 
Sélectionnez
border-width: 5px 2px 3px 4px;
border-color: black red blue green;
border-style: solid;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
CacherSélectionnez

II-D-3. Type de bordure | border-style*

border-style: permet de dfinir le style de bordure.

Syntaxe: <border-style>{1,4} | inherit

Compatibilit: IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: les valeurs inherit et hidden ne sont pas supportes par IE 8 et prcdents.

Version CSS: 1

  • none: pas de bordure;
  • hidden: bordure cache, l'espace de bordure est apparent contrairement none;
  • solid: ligne pleine;
  • double: ligne double: ncessite une taille de bordure de 3 pixels minimum);
  • dashed: tirets;
  • dotted: pointills;
  • inset: effet 3D "enfonc" (dpend de la couleur de la bordure);
  • outset: effet 3D "surlev" (dpend de la couleur de la bordure);
  • ridge: effet 3D double bordure (dpend de la couleur de la bordure);
  • groove: autre effet 3D double bordure (dpend de la couleur de la bordure).
 
Sélectionnez
border-color: black;
 
border-style: none;
border-style: hidden
border-style: solid;
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-4. Bordure gauche | border-left*

border-left: indique la couleur, l'paisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.

Syntaxe: [ <border-width> || <border-style> || 'border-left-color' ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
border-left: 2px dotted red; /* Bordure en pointill rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-5. Bordure en haut | border-top*

border-top: indique la couleur, l'paisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.

Syntaxe: [ <border-width> || <border-style> || 'border-top-color' ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
border-top: 2px dotted red; /* Bordure en pointill rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-6. Bordure droite | border-right*

border-right: indique la couleur, l'paisseur et le type de bordure pour la bordure droite. L'ordre n'a pas d'importance.

Syntaxe: [ <border-width> || <border-style> || 'border-right-color' ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
border-right: 2px dotted red; /* Bordure en pointill rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-7. Bordure en bas | border-bottom*

border-bottom: indique la couleur, l'paisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas d'importance.

Syntaxe: [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
border-bottom: 2px dotted red; /* Bordure en pointill rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-8. Bordure tout-en-un | border*

border: permet de dfinir la bordure en une seule fois, aussi bien pour le style, l'paisseur que la couleur.

Syntaxe: [ <border-width> || <border-style> || 'border-color' ] | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

 
Sélectionnez
border: 2px dotted red; /* Bordure en pointill rouge de 2px */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir la source
CacherSélectionnez

II-D-9. Bordure arrondie | border-radius

border-radius: permet d'arrondir les angles

Syntaxe: <valeur>{1,4} / <valeur>{1,4}

Compatibilit: IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+

Version CSS: 3

Indiquez de une quatre valeurs la suite. Selon le nombre de valeurs que vous mettez, la signification change:

  • une valeur: angle unique pour les quatre cts;
  • deux valeurs: la premire correspond l'angle pour le haut et le bas, la seconde pour la gauche et la droite;
  • trois valeurs: la premire correspond l'angle du haut, la seconde pour la gauche et la droite, la troisime pour le bas;
  • quatre valeurs: respectivement: l'angle du haut, de la droite, du bas, de la gauche.

Complment d'information: Les bordures en CSS 3.

 
Sélectionnez
border-radius: 5px 10px 0 15px;
background-color: yellow;
border: 1px solid red;
padding: 5px; /* Pour viter que le texte dborde des bordures arrondies */
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Voir le code source
CacherSélectionnez

II-D-10. Ombre | box-shadow

box-shadow: permet d'ajouter un ombrage sur un lment.

Syntaxe: none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? | <longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source: MDN)

Compatibilit: IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+

Version CSS: 3

Explications sur la syntaxe (source: Crer des effets tonnants avec la proprit CSS3 box-shadow):

  • une valeur positive pour le dcalage horizontal dcale l'ombre vers la droite, une valeur ngative vers la gauche;
  • une valeur positive pour le dcalage vertical dcale l'ombre vers le bas, une valeur ngative vers le haut;
  • vous ne pouvez pas donner une valeur ngative pour l'tendue de flou. Plus la valeur est grande, plus le flou s'tale;
  • une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions, une valeur ngative entraine une contraction;
  • la couleur est celle de l'ombre;
  • la proprit inset indique une ombre interne plutt qu'externe.
 
Sélectionnez
box-shadow: 2px 2px 4px black;
box-shadow: 2px 2px 4px black inset;
box-shadow: 3px 3px 10px 1px #7b7b7b;
Note :
[X]
Note :
[X]
Voir le code source
CacherSélectionnez

II-E. Contours

Les contours permettent d'entourer un lment. Bien que similaires aux bordures, ils diffrent sur certains points:

  • ils n'augmentent pas l'espace utilis par l'lment mais se positionnent par dessus le contenu (voir exemple);
  • ils ne sont pas ncessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la spcification (et dessinent des contours rectangulaires);
  • on ne peut pas dfinir de contour spcifique chaque ct;
  • en cas de saut de ligne, le contour n'est pas coup, il est ferm en fin de ligne et ouvert la ligne suivante, donnant visuellement deux contours.

Exemple:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voir la source
CacherSélectionnez

II-E-1. paisseur du contour | outline-width

outline-width: permet de dfinir l'paisseur du trait.

Syntaxe: thin | medium | thick | <longueur> | inherit

Compatibilit: IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note: Les valeurs prdfinies dpendent de l'agent utilisateur, nanmoins, les valeurs habituelles sont de 1px pour thin, 3px pour medium et 5px pour thick.

Version CSS: 2.1

Le contour est plac en avant du contenu, cachant ventuellement une partie de ce dernier comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-mme un lment et ne masque pas rellement les lments qui sont en-dessous. Notamment, les liens restent cliquables ou le texte slectionnable.

Exemples:

 
Sélectionnez
outline-width: thin;
outline-width: 0.2em;
outline-width: 4px;

II-E-2. Couleur du contour | outline-color

outline-color: permet de dfinir la couleur du contour.

Syntaxe: <couleur> | invert | inherit

Compatibilit: IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Notes.
La valeur invert (qui est pourtant la valeur par dfaut) n'est pas supporte par Chrome, Opera 15+ et Safari et a t abandonne par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par dfaut correspond la valeur calcule pour color.

Version CSS: 2.1

Exemples:

 
Sélectionnez
outline-color: green;
outline-color: #93caff;
outline-color: rgba(127, 218, 54, 0.8);

II-E-3. Type de contour | outline-style

outline-style: permet de dfinir le style du contour.

Syntaxe: <outline-style> | inherit

Compatibilit: IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note: mme si elle est peu applique, la spcification prvoit que le contour doit s'adapter aux dbordements ventuels du contenu et peut ne pas tre rectangulaire (Opera 12 et infrieurs respecte la spcification).

Version CSS: 2.1

  • none (par dfaut): pas de bordure;
  • solid: ligne pleine;
  • double: ligne double: ncessite une taille de bordure de 3 pixels minimum);
  • dashed: tirets;
  • dotted: pointills;
  • inset: effet 3D "enfonc" (dpend de la couleur de la bordure);
  • outset: effet 3D "surlev" (dpend de la couleur de la bordure);
  • ridge: effet 3D double bordure (dpend de la couleur de la bordure);
  • groove: autre effet 3D double bordure (dpend de la couleur de la bordure).

Exemples:

 
Sélectionnez
outline-style: none;
outline-style: solid;
outline-style: double;
outline-style: dashed;
outline-style: dotted;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
outline-style: groove;

II-E-4. Dcalage du contour | outline-offset

outline-offset: permet de dcaler les limites du contour.

Syntaxe: <longueur> | inherit

Compatibilit: IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+

Note: par dfaut, le contour est coll aux limites de l'lment, si offline-offset est diffrent de 0, un espacement transparent est cr entre l'lment et le contour (si la valeur est ngative, le contour est contract l'intrieur de l'lment).

Version CSS: 3

Exemples:

 
Sélectionnez
outline-offset: 0;
outline-offset: 5px;
outline-offset: -5px;
outline-offset: 0.4em;

II-E-5. Contour tout-en-un | outline

outline: permet de dfinir le contour en une seule fois, aussi bien pour le style, l'paisseur que la couleur.

Syntaxe: [ <outline-width> || <outline-style> || <outline-color> ] | inherit

Compatibilit: IE 8+, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 7+

Note: la proprit outline-offset ne peut pas tre intgre la proprit raccourcie outline.

Version CSS: 2.1

Exemples:

 
Sélectionnez
outline: thin dotted blue;
outline: solid #FFD700;
outline: 6px double;

prcdentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.