diff options
Diffstat (limited to 'files/fr/learn')
| -rw-r--r-- | files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html | 192 |
1 files changed, 96 insertions, 96 deletions
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html index 27b6617080..33bf88edac 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -6,24 +6,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> -<p>Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> +<p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis:</th> - <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> + <th scope="row">Prérequis :</th> + <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> </tr> <tr> - <th scope="row">Objectif:</th> + <th scope="row">Objectif :</th> <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> </tr> </tbody> </table> -<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2> +<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2> -<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> +<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> <pre class="brush: css">.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, @@ -32,29 +32,29 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> -<h3 id="Couleur_de_fond">Couleur de fond</h3> +<h3 id="background_colors">Couleurs d'arrière-plan</h3> -<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> -<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p> +<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</p> <p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p> -<h3 id="Images_de_fond">Images de fond</h3> +<h3 id="background_images">Images d'arrière-plan</h3> -<p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p> -<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> +<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p> -<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> +<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> -<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4> +<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4> -<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> <ul> <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li> @@ -63,13 +63,13 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li> </ul> -<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p> +<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> -<h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4> +<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4> -<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> +<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> <p>On peut aussi utiliser les mots-clé :</p> @@ -90,9 +90,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> -<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4> +<h4 id="positioning_the_background_image">Positionner l'image de fond</h4> -<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> <div class="blockIndicator note"> <p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> @@ -100,7 +100,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> -<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p> +<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>) :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: top center; }</pre> -<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> +<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: 20px 10%; }</pre> -<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> +<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -124,9 +124,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: top 20px; }</pre> -<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> +<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; @@ -134,96 +134,96 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> <div class="note"> -<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p> +<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p> </div> -<h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3> +<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3> -<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p> +<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> -<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> +<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p> -<h3 id="Images_de_fond_multiples">Images de fond multiples</h3> +<h3 id="multiple_background_images">Images de fond multiples</h3> <p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p> -<p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> +<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> <div class="note"> -<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p> +<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p> </div> -<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> +<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;</pre> -<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' <code>image3</code> recevra la première valeur, et l' <code>image4</code> recevra la seconde valeur.</p> +<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p> -<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.</strong></p> +<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p> -<h3 id="Attachement_du_fond">Attachement du fond</h3> +<h3 id="background_attachment">Défilement de l'arrière-plan</h3> -<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:</p> +<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p> <ul> - <li><code>scroll</code>: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.</li> - <li><code>fixed</code>: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</li> - <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li> + <li><code>scroll</code> : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li> + <li><code>fixed</code> : L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li> + <li><code>local</code> : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li> </ul> -<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p> -<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3> +<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3> -<p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p> +<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p> -<p>If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with <code>no-repeat</code> and a position, then a color.</p> +<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p> -<p>There are a few rules that need to be followed when writing background image shorthand values, for example:</p> +<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p> <ul> - <li>A <code>background-color</code> may only be specified after the final comma.</li> - <li>The value for <code>background-size</code> may only be included immediately after <code>background-position</code>, separated with the '/' character, like this: <code>center/80%</code>.</li> + <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li> + <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li> </ul> -<p>Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.</p> +<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p> -<h3 id="Arrière-plans_et_accessibilité">Arrière-plans et accessibilité</h3> +<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3> -<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> +<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> <p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> -<h2 id="Bordures">Bordures</h2> +<h2 id="borders">Bordures</h2> -<p>When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.</p> +<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p> -<p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p> +<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> :</p> <pre class="brush: css">*.box { border: 1px solid black; }*</pre> -<p>Or we can target one edge of the box, for example:</p> +<p>On peut aussi cibler un seul des côtés de la boîte, par exemple :</p> <pre class="brush: css">.box { border-top: 1px solid black; }</pre> -<p>The individual properties for these shorthands would be:</p> +<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :</p> <pre class="brush: css">.box { border-width: 1px; @@ -231,7 +231,7 @@ background-position: 10px 20px, top right;</pre> border-color: black; }</pre> -<p>And for the longhands:</p> +<p>Pour la propriété qui concerne un des côtés :</p> <pre class="brush: css">.box { border-top-width: 1px; @@ -240,34 +240,34 @@ background-position: 10px 20px, top right;</pre> }</pre> <div class="note"> -<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p> +<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p> </div> -<p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p> +<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p> -<h3 id="Coins_arrondis">Coins arrondis</h3> +<h3 id="rounded_corners">Coins arrondis</h3> -<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p> +<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p> -<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> +<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> <pre class="brush: css">.box { border-radius: 10px; }</pre> -<p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> +<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> <pre class="brush: css">.box { border-top-right-radius: 1em 10%; }</pre> -<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p> +<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p> -<h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2> +<h2 id="test_your_skills">Testez vos compétences !</h2> <p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> @@ -277,13 +277,13 @@ background-position: 10px 20px, top right;</pre> <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> </ol> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p> <div class="note"> <p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> </div> -<h2 id="Résumé">Résumé</h2> +<h2 id="summary">Résumé</h2> <p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> @@ -294,23 +294,23 @@ background-position: 10px 20px, top right;</pre> <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> + <ul> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> + </ul> + </li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> + <li>Arrières-plans et bordures</li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> + </ol>
\ No newline at end of file |