Le langage CSS/Fonds, bordures, marges et espacements

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


Surface[modifier | modifier le wikicode]

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.

marge extérieure (margin)

bordure (border)

espace intérieur (padding)

aire intérieure

 

 

 

Aire intérieure[modifier | modifier le wikicode]

Couleur du fond[modifier | modifier le wikicode]

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 :

Paragraphe avec fond coloré

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.

Image du fond[modifier | modifier le wikicode]

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.

Le raccourci background[modifier | modifier le wikicode]

La propriété background permet de définir une couleur ou une image de fond. Exemple : <div style="background: lightblue;">Test de couleur</div> donne :

Test de couleur

Opacité[modifier | modifier le wikicode]

La propriété opacity à 0 engendre une transparence totale, à 1 une opacité totale.

Exemple d'un test d'opacité / transparence à 50 % :

<div style="background-color: yellow; width: 100%; padding: 5px;">
  <div style="background-color: lightblue; opacity: 0.5; position:50px;">Bleu sur jaune.</div>
  <div style="background-color: red; opacity: 0.5; position:50px;">Rouge sur jaune.</div>
</div>

donne :

Bleu sur jaune.
Rouge sur jaune.

Bordures et marges[modifier | modifier le wikicode]

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).

Espace intérieur[modifier | modifier le wikicode]

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.

Bordure[modifier | modifier le wikicode]

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 : Aucune 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
'

Bla bla bla

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, …

Marge extérieure[modifier | modifier le wikicode]

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).

Exemples d'applications[modifier | modifier le wikicode]

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.

Contour[modifier | modifier le wikicode]

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)...

Arrondis[modifier | modifier le wikicode]

On définit l'arrondit d'un cadre avec le rayon de ses quatre coins :

border-radius: 10px;

Profondeur[modifier | modifier le wikicode]

Vue de Wikilivres vu en 3D, avec Firefox Tilt.

La 3D peut-être mesurée par trois axes : x (longueur), y (hauteur), z (profondeur). Pour définir dans quel ordre les objets doivent se superposer, on utilise la propriété z-index, qui représente leurs positions sur l'axe z.

Exemple :

  <div style="background-color: lightblue; position: 50px; z-index: 9; margin-bottom:-10px;">Bleu sous rouge</div>
  <div style="background-color: red; position: 50px; z-index: 11;">Rouge sur bleu.</div>

donne :

Bleu sous rouge
Rouge sur bleu.