Le langage CSS/Fonds, bordures, marges et espacements

Texte

Listes

Le langage CSS

Introduction
- Premier exemple
- Structure et syntaxe
- Les sélecteurs
- Valeurs et unités utilisées
Mise en forme
Mise en page
Pour aller plus loin
Annexes

Version imprimable

[ Modifier le sommaire ]

Texte

Listes

Surface

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

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 :

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

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 est tout à fait compatible 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.

L'URL doit être spécifié comme une chaîne de caractère à la fonction url() :

background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a6/VST_image_of_the_Hercules_galaxy_cluster.jpg");

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.

Fond en dégradé de couleur

La même propriété background-image permet d'afficher un dégradé de couleur, en utilisant une fonction de dégradé au lieu de la fonction url().

Gradient linéaire

Exemple :

background-image: linear-gradient(rgb(100,100,160),rgb(100,160,160));

Le fond en dégradé.

L'angle peut être spécifié en premier argument.

Exemples :

Angle en degré

30°

background-image: linear-gradient(30deg, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

90°

background-image: linear-gradient(90deg, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

230°

background-image: linear-gradient(230deg, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

Angle donné par une direction

vers le bas

background-image: linear-gradient(to bottom, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

vers le haut à droite

background-image: linear-gradient(to top right, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

vers le bas à gauche

background-image: linear-gradient(to bottom left, rgb(100,100,160), rgb(100,160,160));

Le fond en dégradé.

Il est possible d'utiliser plus de deux couleurs, chacune étant suivie de la position relative dans le dégradé.

background-image: linear-gradient(to right, rgb(255,0,0), rgb(255,255,255) 25%, rgb(0,255,255) 50% ,rgb(0,0,0));

Le fond en dégradé.

La position peut aussi être spécifiée pour les première et dernière couleurs :

background-image: linear-gradient(to right, rgb(200,200,200) 35%, rgb(0,100,200) 65%);
/* Équivaut à : rgb(200,200,200), rgb(200,200,200) 35%, rgb(0,100,200) 65%, rgb(0,100,200) */

Le fond en dégradé.

Gradient linéaire répété

La fonction repeating-linear-gradient permet de définir un dégradé linéaire répété, en spécifiant les positions avec des unités absolues.

background-image: repeating-linear-gradient(110deg,
	rgb(200, 0, 0),
	rgb(100, 0, 0) 20px,
	rgb(200, 0, 0) 40px);

Le fond en dégradé.

Gradient radial

La fonction radial-gradient permet de définir un dégradé radial. Les premiers paramètres spécifient la forme et la position du centre où débute le dégradé.

La fonction repeating-radial-gradient permet de définir un dégradé radial répété. Le rayon du cercle (circle) doit être spécifié, les deux rayons pour la forme en ellipse (ellipse).

background-image: radial-gradient(circle at 50% 50%, rgb(0, 160, 255), rgb(0, 0, 88) 80%);

Le fond en dégradé.

background-image: repeating-radial-gradient(30px circle, rgb(0, 160, 255), rgb(0, 0, 88) 50%, rgb(0, 160, 255));

Le fond en dégradé.

background-image: repeating-radial-gradient(40px 20px ellipse, rgb(0, 160, 255), rgb(0, 0, 88) 50%, rgb(0, 160, 255));

Le fond en dégradé.

Gradient conique

La fonction conic-gradient permet de définir un dégradé conique, c'est-à-dire dont la couleur change selon l'angle par rapport à un angle de départ centré sur un point. Les premiers arguments spécifient ces deux paramètres.

background-image: conic-gradient(from 45deg at 50% 50%,
  rgb(0, 160, 255),
  rgb(0, 0, 88) 60deg,
  rgb(120, 0, 0) 180deg,
  rgb(255,255,0) 270deg,
  rgb(255,255,255) 315deg,
  rgb(0,160,255));

Le fond en dégradé.

Le raccourci `background`

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é

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; padding: 5px 20px;">
  <div style="background-color: lightblue; opacity: 0.5;">Bleu sur jaune.</div>
  <div style="background-color: red; opacity: 0.5;">Rouge sur jaune.</div>
</div>

donne :

Bleu sur jaune.

Rouge sur jaune.

Bordures et marges

La bordure (border) est séparée du contenu par un espace intérieur (padding), et du bord de la boîte par une marge (margin). Chaque propriété définie la valeur pour les quatre côtés de la zone rectangulaire de l'élément, et peut être déclinée en quatre propriétés (qui ont la priorité) pour modifier chacun des côtés individuellement.

Propriétés pour les quatre côtés ayant un fonctionnement similaire
Tous les côtés	En haut	À droite	En bas	À gauche
`border`	`border-top`	`border-right`	`border-bottom`	`border-left`
`padding`	`padding-top`	`padding-right`	`padding-bottom`	`padding-left`
`margin`	`margin-top`	`margin-right`	`margin-bottom`	`margin-left`

Les propriétés border, padding et margin spécifient la bordure, l'espacement interne et l'espacement externe pour les quatre côtés, et définissent donc quatre valeurs successives dont seule la première est obligatoire, dans l'ordre suivant :

Valeur pour le haut (top), obligatoire,
Valeur pour la droite (right), optionnelle, même valeur que pour le haut si absente,
Valeur pour le bas (bottom), optionnelle, même valeur que pour le haut si absente,
Valeur pour la gauche (left), optionnelle, même valeur que pour la droite si absente.

L'ordre des valeurs est celui de la rotation dans le sens horaire en partant du haut.

Espace intérieur

On peut distinguer les quatre espaces intérieurs :

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

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-right: 1em
    padding-bottom: 0.5em;
    padding-left: 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

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 en HTML

<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épendamment chaque caractéristique de chaque trait : border-top-width, border-top-style, …

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

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.08em;
    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

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

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

border-radius: 10px;

Profondeur

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 de la profondeur.

Une valeur plus grande pour z-index met l'élément en avant de ceux ayant une valeur plus faible.
La valeur par défaut est 0.
Les éléments ayant la même valeur sont superposés dans l'ordre d'apparition dans le document source, celui défini en premier étant derrière ceux définis après.
La valeur spéciale auto attribue la même profondeur à l'élément que l'élément parent.

Exemple 1 : La zone bleue a une valeur de z-index supérieure à celle de la zone rouge :

<div style="position: relative; padding: 4em; height: 10em;">
<div style="width: 30em; position: absolute; z-index: 5; left:0; top:40px; background-color:#fff;"><div style="background-color: #00f4 !important; padding: 4em;">Fond bleu</div></div>
<div style="width: 30em; position: absolute; z-index: 4; left:40px; top:0; background-color:#fff;"><div style="background-color: #f004 !important; padding: 4em;">Fond rouge</div></div>
</div>

donne :

Fond bleu

Fond rouge

Exemple 2 : La zone bleue a une valeur de z-index inférieure à celle de la zone rouge :

<div style="position: relative; padding: 4em; height: 10em;">
<div style="width: 30em; position: absolute; z-index: 5; left:0; top:40px; background-color:#fff;"><div style="background-color: #00f4 !important; padding: 4em;">Fond bleu</div></div>
<div style="width: 30em; position: absolute; z-index: 6; left:40px; top:0; background-color:#fff;"><div style="background-color: #f004 !important; padding: 4em;">Fond rouge</div></div>
</div>

donne :

Fond bleu

Fond rouge

Le langage CSS/Fonds, bordures, marges et espacements

Surface

Aire intérieure

Couleur du fond

Image du fond

Fond en dégradé de couleur

Gradient linéaire

Gradient linéaire répété

Gradient radial

Gradient conique

Le raccourci background

Opacité

Bordures et marges

Espace intérieur

Bordure

Marge extérieure

Exemples d'applications

Contour

Arrondis

Profondeur

Le raccourci `background`