Le langage CSS/Fonds et bordures

Un livre de Wikibooks.

L'élément HTML — texte, image, tableau, … compris entre deux balises — est inclus dans une boîte dont on peut définir le fond et la bordure.

On distingue, de l'intérieur vers l'extérieur :

• l'aire intérieure : c'est la zone de contenu, pour laquelle on peut définir le fond (background) ;
• l'espace intérieur (padding, littéralement « rembourrage ») : c'est la marge entre l'aire intérieure et la bordure ;
• la bordure proprement dite (border) ;
• la marge extérieure (margin) : c'est la marge entre la bordure et le bord de la boîte.

Sections 1 Aire intérieure : couleur et image de fond 1.1 Couleur du fond 1.2 Image du fond 1.3 Le raccourci background 2 Bordures et marges 2.1 Espace intérieur 2.2 Bordure 2.3 Marge extérieure 2.4 Exemples d'applications 3 Contour

[modifier] Aire intérieure : couleur et image de fond

[modifier] Couleur du fond

La couleur de fond d'une boîte CSS est modifiée avec la propriété background-color. Les valeurs possibles sont bien sûr les valeurs de couleur. Par exemple ceci :

p { background-color: #f0f8fc; }

produit cela :

Par défaut, une boîte CSS n'a aucune couleur de fond: la valeur de la propriété background-color est en effet transparent.

[modifier] Image du fond

La propriété background-image définit une image de remplissage du fond d'une boîte CSS. Elle accepte comme valeur l'URL de l'image et n'est pas du tout incompatible avec la propriété précédente background-color. En effet, la couleur de fond est peinte sous l'image. Ainsi, la couleur peut apparaître dans une image comportant des zones transparentes, et cette couleur remplira le reste de la surface de la boîte si l'image n'a pas des dimensions suffisantes.

On peut définir :

• la position de l'image, avec background-position ;
• la répétition de l'image, avec background-repeat ;
• le défilement de l'image, avec background-attachment.

[modifier] Le raccourci background

[modifier] Bordures et marges

La bordure est séparée du contenu par un espace intérieur (padding), et du bord de la boîte par une marge (margin).

[modifier] Espace intérieur

On peut distinguer les quatre espaces intérieurs :

• padding-top : espace intérieur haut ;
• padding-bottom : espace intérieur bas ;
• padding-left : espace intérieur gauche ;
• padding-right : espace intérieur droit.

La syntaxe est du type propriété: valeur, ou valeur est exprimée comme d'habitude en centimètres, millimètres, pouces, pixels ou cadratins (voir le chapitre Valeurs et unités > Distances et dimensions).

Exemple

.foo {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em
}

Si les quatre valeurs sont égales, on peut utiliser la propriété padding

Exemple

.foo {padding: 0.5em}

En fait, la propriété padding permet de définir les quatre espaces intérieurs en une seule fois :

.foo {padding: top right bottom left}

L'ordre est celui du sens horaire : haut (top à 12h), droite (right à 3h), bas (bottom à 6h), gauche (left à 9h).

En reprenant l'exemple avec quatre propriétés, l'équivalent est :

.foo {padding: 0.5em 1em 0.5em 1em}

Lorsqu'une valeur est absente, la propriété vaut la même valeur que celle située deux positions avant :

• Si left est absent, sa valeur est la même que right,
• Si bottom est absent, sa valeur est la même que top.

ou une position avant (si une seule valeur) :

• Si right est absent (donc une seule valeur spécifiée), sa valeur est la même que top, idem pour left et bottom également absents.

[modifier] Bordure

La bordure est définie par

• sa couleur : border-color, dont la valeur est une distance (voir Valeurs et unités > Les couleurs) ;
• son style : border-style, qui peut prendre les valeurs
  • solid : ligne continue ;
  • dotted : pointillé ;
  • dashed : ligne discontinue (tirets) ;
  • none : pas de bordure ;
• sa largeur : border-width, dont la valeur est une distance ou un mot-clef de type medium.

Exemple

<div style="border-color: gray;
  border-style: dotted;
  border-width: medium">
    Bla bla bla
</div>

donne

On peut synthétiser tout cela avec border, l'exemple ci-dessus devient alors

<div style="border: gray dotted medium">
  Bla bla bla
</div>

On peut définir une bordure différente

• en haut, avec border-top ;
• en bas, avec border-bottom ;
• à gauche, avec border-left ;
• et à droite, avec border-right.

Exemple

.foo {
  border-top:solid 1px black;
  border-bottom:solid 1px black;
  border-left:none;
  border-right:none
}

et on peut définir indépendemmant chaque caractéristique de chaque trait : border-top-width, border-top-style, …

[modifier] Marge extérieure

La marge extérieure est définie par la propriété margin, selon le même modèle que l'espace intérieur. On peut définir les quatre marges indépendamment (margin-top, margin-bottom, margin-left, margin-right) ou bien les définir avec une seule propriété (margin).

[modifier] Exemples d'applications

Double soulignement

On peut combiner la propriété text-decoration avec border-bottom pour produire un double soulignement

.double-soulignement {
  text-decoration: underline;
  padding-bottom: 0.90em;
  border-bottom: solid 1px
}

Soulignement pointillé

La propriété border-bottom permet de produire un « faux » soulignement, mais avec plus de possibilités de mise en forme. Par exemple, pour une mise en forme du type de celle par défaut avec la balise HTML <abbr>…</abbr>, on peut utiliser border-bottom: dotted 1px.

[modifier] Contour

Le contour s'apparente à la bordure dont il reprend en grande partie les propriétés de couleur, de style et de largeur. Il en diffère cependant sur plusieurs points :

• un contour ne peut pas avoir le style hidden
• il admet une nouvelle valeur de couleur, invert, qui le dessine en inversant les valeurs de couleurs d'arrière-plan et de premier plan du contexte
• il n'est pas comptabilisé dans les dimensions de l'objet et ne modifie pas le placement des éléments lorsqu'on modifie sa largeur
• il suit les limites de l'élément et peut donc ne pas être rectangulaire lorsque l'élément s'étale sur plusieurs lignes par exemple
• il ne peut pas être ouvert, et se referme toujours autour de l'élément

Les syntaxes des propriétés de contours sont similaires à celles des bordures:

• outline-color prend les mêmes valeurs que border-color, plus invert
• outline-style prend les mêmes valeurs que border-style, sauf hidden
• outline-width prend les mêmes valeurs que border-width
• La propriété raccourcie outline s'utilise comme la propriété border

L'utilisation principale des contours est de signaler visuellement quel élément a reçu le focus à la suite d'une action de l'utilisateur: entrée dans un champ de formulaire, sélection d'un bouton ou d'un lien. Chaque navigateur graphique restitue alors un contour selon ses propres styles par défaut. Ces contours jouent donc un rôle clé pour les utilisateurs qui interagissent avec la page Web via le clavier ou un dispositif similaire, et non avec la souris. Les auteurs de pages Web ne doivent en aucun cas tenter de forcer leur disparition, et ne doivent agir qu'avec prudence s'ils souhaitent en modifier l'apparence.

Enfin, les propriétés de contours sont inégalement supportées selon les navigateurs graphiques, et leurs valeurs par défaut diffèrent (par exemple, une bordure grise pointillée dans Internet Explorer, une inversion des couleurs de l'élément dans Opera)..