diff options
Diffstat (limited to 'files/fr/learn/css')
50 files changed, 1007 insertions, 1426 deletions
diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html index b9aaa7b5ce..da13496b05 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html @@ -18,9 +18,9 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p> +<p>Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,7 +42,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box </ul> <div class="note"> -<p><strong>Note</strong>: Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -76,7 +76,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> +<p><img alt="" src="fancy-box.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -94,6 +94,6 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html index 8091fe664e..3d0b3c1fe5 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> +<p>Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> + <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <h2 id="Ombres_des_boîtes">Ombres des boîtes</h2> -<p>Revenons au module <a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> +<p>Revenons au module <a href="/fr/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> <p>Vous trouverez les exemples de cet article dans le fichier <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">code source</a> également).</p> @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p> -<div id="example_1"> + <pre class="brush: html"><article class="simple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> @@ -59,7 +59,7 @@ article { max-width: 500px; padding: 10px; color: white ; -<code class="language-css"><span class="property token"> text-align</span><span class="punctuation token">:</span> center</code> ; + text-align: center; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } @@ -67,11 +67,11 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); }</pre> -</div> + <p>donnent le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_1', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}</p> <p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p> @@ -88,14 +88,12 @@ article { <p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html"><article class="multiple"> +<pre class="brush: html hidden"><article class="multiple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> </div> -<pre class="brush: css">p { +<pre class="brush: css hidden">p { margin: 0; } @@ -114,11 +112,10 @@ article { 5px 5px 1px black, 6px 6px 1px black; } </pre> -</div> <p>Nous obtenons le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_2', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}</p> <p>Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.</p> @@ -128,7 +125,6 @@ article { <p>D'abord un HTML différent pour cet exemple :</p> -<div id="example_3"> <pre class="brush: html"><button>Appuyez ici !</button></pre> <pre class="brush: css">button { @@ -152,20 +148,17 @@ button:active { inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); }</pre> -</div> <p>Et voici le résultat :</p> -<p>{{ EmbedLiveSample('example_3', '100%', 70) }}</p> - -<p> </p> +<p>{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}</p> <p>Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.</p> <p>Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.</p> <div class="note"> -<p><strong>Note </strong>: il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> +<p><strong>Note :</strong> il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> </div> <h2 id="Filtres">Filtres</h2> @@ -186,7 +179,7 @@ button:active { <pre class="brush: css">p { margin: 1rem auto; padding: 20px; - <code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> center</code> ; + <code class="language-css">text-align: center</code> ; width: 100px; border: 5px dashed red; } @@ -214,7 +207,7 @@ button:active { </ul> <div class="note"> -<p><strong>Note </strong>: Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> +<p><strong>Note :</strong> Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> </div> <p>Vous pouvez voir d'autres exemples de filtres sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">code source</a>).</p> @@ -233,7 +226,7 @@ button:active { <p>Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">code source</a>) et à la page de référence de {{cssxref("<blend-mode>")}}.</p> <div class="note"> -<p><strong>Note </strong>: Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> +<p><strong>Note :</strong> Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> </div> <h3 id="background-blend-mode">background-blend-mode</h3> @@ -331,7 +324,7 @@ article div:last-child { <p>Vous voyez ici que <code>mix-blend-mode: multiply;</code> a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <code><div></code> situé dessous.</p> <div class="note"> -<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> +<p><strong>Note :</strong> Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> </div> <h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> @@ -348,7 +341,7 @@ article div:last-child { <p>Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.</p> <div class="note"> -<p><strong>Note </strong>: Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> +<p><strong>Note :</strong> Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> </div> <h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2> @@ -357,10 +350,8 @@ article div:last-child { <p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> </div></textarea> @@ -385,7 +376,7 @@ article div:last-child { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -411,9 +402,9 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<p>{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}</p> <h2 id="Résumé">Résumé</h2> @@ -421,8 +412,6 @@ window.addEventListener("load", drawOutput); <p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> - <h2 id="Dans_ce_module">Dans ce module</h2> <ul> @@ -431,6 +420,6 @@ window.addEventListener("load", drawOutput); <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> 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 33bf88edac..105df053a6 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 @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <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"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -94,8 +94,8 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <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> +<div class="note"> +<p><strong>Note :</strong> La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> </div> <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> @@ -280,7 +280,7 @@ background-position: 10px 20px, top right;</pre> <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> +<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="summary">Résumé</h2> diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.html b/files/fr/learn/css/building_blocks/box_model_tasks/index.html index eb968b8e31..0d4034be70 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.html +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.html @@ -10,8 +10,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p> -<div class="notecard note"> -<p><strong>Note</strong> : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> <p>Si vous bloquez, demandez-nous de l'aide : voir la section <a href="#assessment_or_further_help">Évaluation et aide</a> en bas de cette page.</p> </div> @@ -25,8 +25,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2> @@ -48,8 +48,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2> @@ -62,8 +62,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks <p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> -<div class="notecard note"> -<p>Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> +<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="assessment_or_further_help">Évaluation et aide</h2> diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html index c7dd0051f5..7bc80fb59e 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -19,11 +19,11 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <p>Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -75,8 +75,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <p>Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p> +<div class="note"> +<p><strong>Note :</strong> Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la <a href="/fr/docs/Web/CSS/color#Specifications">section des spécifications de la propriété color</a>, par exemple.</p> </div> <h2 id="Comprendre_comment_ces_concepts_se_combinent">Comprendre comment ces concepts se combinent</h2> @@ -108,12 +108,12 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <dd>Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que <code>inherit</code>, sinon il est identique à <code>initial</code>.</dd> </dl> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p> +<div class="note"> +<p><strong>Note :</strong> Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.</p> </div> <p>Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.</p> @@ -140,7 +140,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <h2 id="Comprendre_la_cascade">Comprendre la cascade</h2> -<p><span>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le </span><code><body></code><span>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</span></p> +<p>Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <code><body></code>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.</p> <p>Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :</p> @@ -180,7 +180,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage </ol> <div class="note"> -<p><strong>Note </strong>: Le sélecteur universel (<code>*</code>), les combinateurs (<code>+</code>, <code>></code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p> +<p><strong>Note :</strong> Le sélecteur universel (<code>*</code>), les combinateurs (<code>+</code>, <code>></code>, <code>~</code>, ' '), et la pseudo-class de négation (<code>:not</code>) n'affectent en rien la spécificité.</p> </div> <p>Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la <a href="/fr/docs/Web/CSS/CSS_Selectors">référence MDN des sélecteurs</a>.</p> @@ -253,7 +253,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage </ul> <div class="note"> -<p><strong>Note </strong>: Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p> +<p><strong>Note :</strong> Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un <em>million</em> de sélecteurs de <strong>class</strong> combinés ne prendront jamais le dessus sur <em>un</em> sélecteur d'<strong>id</strong>.</p> <p>Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.</p> </div> @@ -275,8 +275,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <li>Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration <code>!important</code> dans la deuxième règle — écrit après <code>border: none</code>, ce mot-clé signifie que cette déclaration l'emporte sur le <code>border</code> définie dans la règle précédente, même si l'ID a une spécificité plus élevée.</li> </ol> -<div class="blockIndicator note"> -<p><strong>Note </strong>: La seule façon de dépasser cette déclaration <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p> +<div class="note"> +<p><strong>Note :</strong> La seule façon de dépasser cette déclaration <code>!important</code> serait d'ajouter un <code>!important</code> dans une déclaration de même<em> spécificité</em> apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.</p> </div> <p>Il est utile de connaître <code>!important</code> , ne serait-ce que pour le reconnaître dans le code des autres. <strong>Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.</strong> <code>!important</code> modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.</p> @@ -322,23 +322,23 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <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="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <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="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></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> diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html index b5e9d31c2e..720f34217f 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}</div> -<p class="summary">Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p> +<p>Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -46,7 +46,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper </ul> <div class="note"> -<p><strong>Note </strong>: Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Résumé_du_projet">Résumé du projet</h2> @@ -88,7 +88,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <p>Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="letterhead.png"></p> <p> </p> @@ -108,6 +108,6 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html index d3d8121acb..e367a4cd59 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.html +++ b/files/fr/learn/css/building_blocks/debugging_css/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + <td>Basic computer literacy, <a href="/fr/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/fr/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -23,27 +23,27 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <h2 id="Comment_accéder_aux_outils_de_développement_du_navigateur">Comment accéder aux outils de développement du navigateur</h2> -<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p> +<p>L'article <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement de navigateurs</a> est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.</p> -<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p> +<p>You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, and <a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.</p> <p>In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">an example file</a>. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.</p> <h2 id="The_DOM_versus_view_source">The DOM versus view source</h2> -<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/en-US/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p> +<p>Something that can trip up newcomers to DevTools is the difference between what you see when you <a href="/fr/docs/Tools/View_source">view the source</a> of a webpage, or look at the HTML file you put on the server, and what you can see in the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.</p> <p>In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <code><h2></code> but closing with an <code></h3></code>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <code><h2></code> with an <code></h2></code>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.</p> -<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p> +<p>View Source in comparison, is simply the HTML source code as stored on the server. The <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.</p> <h2 id="Inspecting_the_applied_CSS">Inspecting the applied CSS</h2> <p>Select an element on your page, either by right/ctrl-clicking on it and selecting <em>Inspect</em>, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of <code>box1</code>; this is the first element on the page with a bordered box drawn around it.</p> -<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> +<p><img alt="The example page for this tutorial with DevTools open." src="inspecting1.png"></p> -<p>If you look at the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> +<p>If you look at the <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> <p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p> @@ -63,7 +63,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p> -<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> +<p><img alt="DevTools Styles Panel with a color picker open." src="inspecting2-color-picker.png"></p> <h2 id="Adding_a_new_property">Adding a new property</h2> @@ -71,17 +71,17 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p> -<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="inspecting3-font-size.png"></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> +<div class="note"> +<p><strong>Note :</strong> There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> </div> <h2 id="Understanding_the_box_model">Understanding the box model</h2> -<p>In previous lessons we have discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> +<p>In previous lessons we have discussed <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> -<p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> +<p>The <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> <p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p> @@ -89,10 +89,10 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p> -<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> +<p><img alt="The Layout section of the DevTools" src="inspecting4-box-model.png"></p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Find out more in <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Find out more in <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> </div> <h2 id="Solving_specificity_issues">Solving specificity issues</h2> @@ -101,26 +101,26 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>In our example file there are two words that have been wrapped in an <code><em></code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p> -<pre class="brush: css notranslate">em { +<pre class="brush: css">em { color: hotpink; font-weight: bold; }</pre> <p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: orange; }</pre> -<p>As you will recall from the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> +<p>As you will recall from the lesson on <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> <p><strong>Inspect the <code><em></code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p> -<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="inspecting5-specificity.png"></p> <h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2> -<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/en-US/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> +<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/fr/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/fr/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> <h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2> @@ -143,7 +143,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p> -<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="no-support.png"></p> <p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p> @@ -181,23 +181,23 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS <h2 id="In_this_module">In this module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <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="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <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="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></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> diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html index 8c6008bfa0..114467a4f8 100644 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -19,9 +19,9 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}</div> -<p class="summary">Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p> +<p>Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension </ul> <div class="note"> -<p><strong>Note </strong>: À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> À défaut, vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">URL</a> pour faire pointer l'élément <code><img></code> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <code><style></code> dans l'élément <code>head</code> du document.</p> </div> <h2 id="Énoncé_du_projet">Énoncé du projet</h2> @@ -87,7 +87,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension </ul> <div class="note"> -<p><strong>Note </strong>: Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p> +<p><strong>Note :</strong> Gardez présent à l'esprit que le 2e jeu de règles définit <code>font-size: 10px;</code> pour l'élément <code><html></code> — cela signifie que pour tous les enfants de <code><html></code>, un <code>em</code> vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un <code>font-size</code> différent placés entre eux et <code><html></code> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).</p> </div> <p>Autres choses à prendre en considération :</p> @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <p>La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :</p> -<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png"></p> <p> </p> @@ -126,13 +126,13 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_fonctionnement_de_CSS">Comment fonctionnent les CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">Sélecteurs</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Sélecteurs simples</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinaisons et sélecteurs multiples</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Unités et valeurs pour les CSS</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade et héritage</a></li> <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Débogage des CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Compréhension des fondements des CSS</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html index 4523b58fa4..6d01ee3f41 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -10,7 +10,7 @@ original_slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions <p>Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées <strong>modes d'écriture</strong> (<i lang="en">writing modes</i> en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html index d0992257a9..996ef6e24f 100644 --- a/files/fr/learn/css/building_blocks/index.html +++ b/files/fr/learn/css/building_blocks/index.html @@ -34,40 +34,40 @@ original_slug: Apprendre/CSS/Building_blocks <p>Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.</p> <div class="note"> -<p><strong>Note : </strong>Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p> +<p><strong>Note :</strong> Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.</p> </div> <dl> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance (Cascade et héritage)</a></dt> <dd>Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors (sélecteurs CSS)</a></dt> <dd>Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <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> </dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model (le modèle des boîtes)</a></dt> <dd>Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders (arrières-plans et bordures)</a></dt> <dd>Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions (manipuler les différentes directions du texte)</a></dt> <dd>Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (<strong>writing modes</strong>). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content (quand ça dépasse)</a></dt> <dd>Autre concept important du CSS: le dépassement (<strong>overflow</strong>) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units (valeurs et unités)</a></dt> <dd>Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS (dimensionner les éléments en CSS)</a></dt> <dd>Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements (images, médias et éléments de formulaires)</a></dt> <dd>Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.</dd> <dt><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page des tableaux</a></dt> <dd>Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS (déboguer le CSS)</a></dt> <dd>Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt> + <dt><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS (organiser votre CSS)</a></dt> <dd>Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.</dd> </dl> diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html index 5adba69e5e..6eb65c2dca 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.html +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <p>Dans ce cours nous allons étudier un autre concept important en CSS : les <strong>débordements</strong> (<i lang="en">overflows</i> en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -91,7 +91,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content <h2 id="test_your_skills!">Testez vos compétences !</h2> -<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> +<p>Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) <a href="/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Testez vos compétences: overflow</a>.</p> <h2 id="summary">Résumé</h2> diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html index 94b5601bf6..f56a321023 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -121,8 +121,8 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> +<div class="note"> +<p><strong>Note :</strong> Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> </div> <h2 id="Pas_suivants">Pas suivants</h2> diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html index 7a63a06d36..ecef10ea21 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html @@ -12,11 +12,11 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td> + <td>Connaissances informatiques de base, <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">les outils de base installés</a>, connaissance de base de <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">gestion des fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (voir <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a>.)</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -29,7 +29,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le <strong>combinateur descendant</strong>— en général représenté par un seul espace (<code> </code>) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.</p> -<pre class="brush: css notranslate">body article p +<pre class="brush: css">body article p </pre> <p>Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <code><p></code>, qui est à l'intérieur d'un élément de classe <code>.box</code>.</p> @@ -40,7 +40,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le combinateur enfant (<code>></code>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <code><p></code> qui sont des enfants directs des éléments <code><article></code>:</p> -<pre class="brush: css notranslate">article > p</pre> +<pre class="brush: css">article > p</pre> <p>Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <code><li></code> qui sont un enfant direct d'un <code><ul></code>, et leur ai donné une bordure supérieure.</p> @@ -52,7 +52,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Le sélecteur de frère adjacent (<code>+</code>) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <code><img></code> qui viennent juste après les éléments <code><p></code>:</p> -<pre class="brush: css notranslate">p + img</pre> +<pre class="brush: css">p + img</pre> <p>Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <code><h1></code>, et le stylisons.</p> @@ -64,7 +64,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (<code>~</code>). Pour sélectionner tous les éléments <code><img></code> qui viennent n'importe où après les éléments <code><p></code>, nous ferions ceci:</p> -<pre class="brush: css notranslate">p ~ img</pre> +<pre class="brush: css">p ~ img</pre> <p>Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <code><p></code> qui viennent après le <code><h1></code>, et même s'il y a aussi un <code><div></code> dans le document, le <code><p></code> qui vient après qu'il est sélectionné.</p> @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <p>Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <code><ul></code>, je pourrais utiliser ce qui suit.</p> -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> +<pre class="brush: css">ul > li[class="a"] { }</pre> <p>Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.</p> @@ -82,7 +82,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <h2 id="Testez_vos_compétences!">Testez vos compétences!</h2> -<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> +<p>Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> <h2 id="Passer_à_la_suite">Passer à la suite</h2> @@ -93,10 +93,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs <h2 id="Dans_ce_module">Dans ce module</h2> <ol> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Cascade_et_heritage">Cascade et héritage</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe, d'ID</a></li> <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-%C3%A9l%C3%A9ments">Pseudo-classes and pseudo-élements</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Combinateurs">Combinateurs</a></li> @@ -104,12 +104,12 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs </li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite">Le modèle de Boîte</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Overflowing_content">Débordement de contenu</a></li> <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">Valeurs et unités</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS">Taille des élements</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, média, et élements de formulaire</a></li> <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li> + <li><a href="/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS">Débogage CSS</a></li> <li><a href="/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html index 2ba25e54d4..ece86d8018 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors <p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,7 +25,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors <p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p> -<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p> +<p><img alt="Du code où h1 est surligné." src="selector.png"></p> <p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p> diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index f7d62596c1..8e89104fdd 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -14,13 +14,13 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> -<p>Voyons maintenant les sélecteurs de<span> <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</span></p> +<p>Voyons maintenant les sélecteurs de <strong>pseudo-classes</strong> et de <strong>pseudo-éléments</strong>. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -35,7 +35,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Les pseudo-classes sont signalées par un mot clé commençant par deux points <code>:</code></p> -<pre class="notranslate">:<em>pseudo-class-name</em></pre> +<pre>:<em>pseudo-class-name</em></pre> <h3 id="Exemple_dune_pseudo-classe_élémentaire">Exemple d'une pseudo-classe élémentaire </h3> @@ -50,17 +50,17 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :</p> <ul> - <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/fr/docs/Web/CSS/:invalid">:invalid</a></code></li> </ul> <h3 id="Pseudo-classes_daction_utilisateur">Pseudo-classes d'action utilisateur</h3> <p>Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées <em>pseudo-classes dynamiques</em>, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :</p> -<p><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br> - <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> +<p><code><a href="/fr/docs/Web/CSS/:hover">:hover</a></code> — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.<br> + <code><a href="/fr/docs/Web/CSS/:focus">:focus</a></code> — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> @@ -68,10 +68,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points <code>::</code>.</p> -<pre class="notranslate"><em>::pseudo-element-name</em></pre> +<pre><em>::pseudo-element-name</em></pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p> +<div class="note"> +<p><strong>Note :</strong> Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.</p> </div> <p>Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.</p> @@ -88,14 +88,14 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <p>Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs <code>:first-child</code> et <code>::first-line</code> Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <code><p></code>, qui se trouve à l'intérieur d'un élément <code><article></code></p> -<pre class="brush: css notranslate"><code>article p:first-child::first-line { +<pre class="brush: css">article p:first-child::first-line { font-size: 120%; font-weight: bold; -}</code></pre> +}</pre> <h2 id="Générer_du_contenu_avec_before_et_after">Générer du contenu avec ::before et ::after</h2> -<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/en-US/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p> +<p>Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété <code><a href="/fr/docs/Web/CSS/content">content</a></code> pour insérer du contenu dans votre document en utilisant le CSS.</p> <p>Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément <code>::before</code> en <code>::after</code> et voir le texte inséré à la fin de l'élément au lieu du début.</p> @@ -139,7 +139,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":blank") }}</td> - <td>Matches an <a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> element</a> whose input value is empty.</td> + <td>Matches an <a href="/fr/docs/Web/HTML/Element/input"><code><input></code> element</a> whose input value is empty.</td> </tr> <tr> <td>{{ Cssxref(":checked") }}</td> @@ -155,7 +155,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":dir") }}</td> - <td>Select an element based on its directionality (value of the HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> property).</td> + <td>Select an element based on its directionality (value of the HTML <code><a href="/fr/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute or CSS <code><a href="/fr/docs/Web/CSS/direction">direction</a></code> property).</td> </tr> <tr> <td>{{ Cssxref(":disabled") }}</td> @@ -171,7 +171,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":first") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td> + <td>In <a href="/fr/docs/Web/CSS/Paged_Media">Paged Media</a>, matches the first page.</td> </tr> <tr> <td>{{ Cssxref(":first-child") }}</td> @@ -203,7 +203,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":indeterminate") }}</td> - <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> + <td>Matches UI elements whose value is in an indeterminate state, usually <a href="/fr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> </tr> <tr> <td>{{ Cssxref(":in-range") }}</td> @@ -215,7 +215,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":lang") }}</td> - <td>Matches an element based on language (value of the HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td> + <td>Matches an element based on language (value of the HTML <a href="/fr/docs/Web/HTML/Global_attributes/lang">lang</a> attribute).</td> </tr> <tr> <td>{{ Cssxref(":last-child") }}</td> @@ -227,7 +227,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":left") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td> + <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches left-hand pages.</td> </tr> <tr> <td>{{ Cssxref(":link")}}</td> @@ -307,7 +307,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- </tr> <tr> <td>{{ Cssxref(":right") }}</td> - <td>In <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td> + <td>In <a href="/fr/docs/Web/CSS/CSS_Pages">Paged Media</a>, matches right-hand pages.</td> </tr> <tr> <td>{{ Cssxref(":root") }}</td> @@ -378,23 +378,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <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="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <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="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></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> diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 33f687df82..376bfcb1cd 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <p>Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -39,7 +39,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <h3 id="Utiliser_le_sélecteur_universel_pour_rendre_les_sélecteurs_plus_lisibles">Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles</h3> -<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code><article></code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> +<p>On peut utiliser <code>*</code> pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <code><article></code> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes et pseudo-éléments</a> : </p> <pre class="brush: css">article :first-child { @@ -84,7 +84,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> <div class="blockIndicator note"> -<p><strong>Note </strong>: Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p> +<p><strong>Note :</strong> Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.</p> </div> <h2 id="Prochain_article">Prochain article</h2> @@ -96,23 +96,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <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="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <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="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></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> diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html index 47e0ee79a1..74258dbe1b 100644 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS <div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -85,8 +85,8 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS <p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p> -<div class="notecard note"> - <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> +<div class="note"> + <p><strong>Note :</strong> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> </div> <h2 id="viewport_units">Unités de la fenêtre d'affichage</h2> diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html index 0b8eb4bd14..2543732c2a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -17,13 +17,13 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p> +<p>Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> - <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td> + <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>.)</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -79,7 +79,7 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables <p>Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>) :</p> -<p><img alt="Liste des groupes punk du Royaume Uni" src="https://mdn.mozillademos.org/files/16114/punk.png" style="display: block; height: 275px; margin: 0px auto; width: 1012px;"></p> +<p><img alt="Liste des groupes punk du Royaume Uni" src="punk.png"></p> <p>Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.</p> @@ -136,14 +136,14 @@ th, td { <li>Définir pour le tableau la valeur <code>fixed</code> pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec <code>table-layout: fixed</code>, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur <code>thead th:nth-child(n)</code> ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br> <br> Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).</li> - <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="https://mdn.mozillademos.org/files/16116/cadre_1.png" style="display: block; height: 68px; margin: 0px auto; width: 231px;"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="https://mdn.mozillademos.org/files/16117/cadre_2.png" style="display: block; height: 59px; margin: 0px auto; width: 223px;"></li> + <li>La valeur <code>collapse</code> pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : <img alt="Encadrement des éléments d'un tableau" src="cadre_1.png"> Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec <code>border-collapse : collapse;</code>, les bordures se condensent en une seule, ce qui est beaucoup mieux :<img alt="Avec border-collapse: collapse; les encadrements se condensent" src="cadre_2.png"></li> <li>Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.</li> <li>Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.</li> </ul> <p>À ce stade, le tableau a déjà meilleure mine :</p> -<p><img alt="Première mise en forme du tableau" src="https://mdn.mozillademos.org/files/16118/punk_A.png" style="display: block; height: 460px; margin: 0px auto; width: 1096px;"></p> +<p><img alt="Première mise en forme du tableau" src="punk_A.png"></p> <h3 id="Simple_typographie">Simple typographie</h3> @@ -194,7 +194,7 @@ tfoot th { <p>Cela fait un peu plus propre :</p> -<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="https://mdn.mozillademos.org/files/16119/punk_B.png" style="display: block; height: 531px; margin: 0px auto; width: 1055px;"></p> +<p><img alt="Deuxième mise en forme : modifications des polices de caractères." src="punk_B.png"></p> <h3 id="Graphisme_et_couleurs">Graphisme et couleurs</h3> @@ -248,7 +248,7 @@ table { <p>Et voici l'explosion de couleurs résultante :</p> -<p><img alt="Troisième mise en forme : coloriage agressif" src="https://mdn.mozillademos.org/files/16120/punk_C.png" style="display: block; height: 496px; margin: 0px auto; width: 1257px;"></p> +<p><img alt="Troisième mise en forme : coloriage agressif" src="punk_C.png"></p> <p>Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.</p> @@ -268,7 +268,7 @@ table { <p>Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur <code>bottom</code>. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>) :</p> -<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="https://mdn.mozillademos.org/files/16121/punk_D.png" style="display: block; height: 539px; margin: 0px auto; width: 1254px;"></p> +<p><img alt="Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin" src="punk_D.png"></p> <h2 id="Apprentissage_actif_mettez_en_page_votre_propre_tableau">Apprentissage actif : mettez en page votre propre tableau</h2> @@ -303,6 +303,6 @@ table { <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Création d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html index a673fb36d6..b099bc42fb 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.html +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -57,8 +57,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> </div> <p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> @@ -127,8 +127,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> +<div class="note"> +<p><strong>Note :</strong> La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> </div> <h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3> @@ -152,8 +152,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite box-sizing: inherit; }</pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> +<div class="note"> +<p><strong>Note :</strong> Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> </div> <h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2> @@ -164,8 +164,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> +<div class="note"> +<p><strong>Note :</strong> vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> </div> <h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3> diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html index bf161a3abc..7542b9e2e5 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.html +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p>Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,12 +25,12 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p>Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code> ou <code><a href="/fr/docs/Web/CSS/length"><length></a></code>. Quand vous voyez le type de valeur <code><color></code>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>.</p> -<div class="notecard note"> -<p><strong>Note</strong> : Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> +<div class="note"> +<p><strong>Note :</strong> Vous verrez également des valeurs CSS appelées <em>types de données</em>. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme <em>valeur</em> se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.</p> </div> -<div class="notecard note"> -<p><strong>Note</strong> : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> +<div class="note"> +<p><strong>Note :</strong> Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, comparée au type de données <a href="/fr/docs/Web/CSS/color_value"><color></a>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.</p> </div> <p>Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction <code>rgb()</code> :</p> @@ -289,9 +289,8 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units <p><strong>Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.</strong></p> -<div class="notecard note"> -<h4>Note :</h4> -<p>Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> +<div class="note"> +<p><strong>Note :</strong> Avec la spécification <i lang="en">CSS Colors Level 4</i>, <code>rgba()</code> est un alias pour <code>rgb()</code> et <code>hsla()</code> est un alias pour <code>hsl()</code> (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions <code>rgba()</code> à des fonctions <code>rgb()</code> pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.</p> </div> <h3 id="hsl_and_hsla_values">Valeurs HSL et HSLA</h3> diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html index a151a1da09..17a2d6e00f 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> +<p>Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> -<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> +<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> <p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p> @@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> -<h2 id="Voici_un_exemple_simple"><span>Voici un exemple simple</span></h2> +<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> <p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p> <p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2> @@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Voici le résultat :</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> +<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> </div> -<h2 id="Aparté_sur_le_modèle_flex"><span>Aparté sur le modèle flex</span></h2> +<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> <p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> -<p><img alt="Terminologie pour les boîtes modulables" class="default internal" src="https://mdn.mozillademos.org/files/16096/termes_flex.png" style="display: block; height: 333px; margin: 0px auto; width: 563px;"></p> +<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p> <ul> <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li> @@ -101,14 +101,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> +<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> </div> <h2 id="Enveloppement">Enveloppement</h2> <p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p> -<p><img alt="Débordement des éléments modulables" src="https://mdn.mozillademos.org/files/16098/Exemple_flexbox_2.png" style="display: block; height: 663px; margin: 0px auto; width: 933px;"></p> +<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p> <p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p> @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> -<p><img alt="Conditionnement des éléments modulables" src="https://mdn.mozillademos.org/files/16099/Exemple_flexbox_3.png" style="display: block; height: 918px; margin: 0px auto; width: 933px;">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> +<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> <p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p> @@ -165,7 +165,7 @@ article:nth-of-type(3) { <p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> -<p><img alt="Modulation de la largeur" src="https://mdn.mozillademos.org/files/16100/Exemple_flexbox_4.png" style="border-style: solid; border-width: 1px; display: block; height: 484px; margin: 0px auto; width: 1001px;"></p> +<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p> <p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p> @@ -185,7 +185,7 @@ article:nth-of-type(3) { <p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p> -<p><img alt="Alignement" src="https://mdn.mozillademos.org/files/16101/Exemple_flexbox_5.png" style="display: block; height: 105px; margin: 0px auto; width: 960px;"></p> +<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p> <p>D'abord, faites une copie locale de cet exemple.</p> @@ -256,7 +256,7 @@ article:nth-of-type(3) { <p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p> -<p><img alt="Imbrications avec flexbox" src="https://mdn.mozillademos.org/files/16102/Exemple_flexbox_6.png" style="border-style: solid; border-width: 1px; display: block; height: 559px; margin: 0px auto; width: 1003px;"></p> +<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p> <p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} :</p> @@ -316,7 +316,7 @@ article:nth-of-type(3) { <p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p> -<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> +<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> <h2 id="Résumé">Résumé</h2> @@ -328,15 +328,15 @@ article:nth-of-type(3) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> </div> diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html index d46a7b5f55..4e473510b9 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.html +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -10,8 +10,8 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> +<div class="note"> +<p><strong>Note :</strong> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> <br> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> </div> @@ -20,21 +20,21 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p> -<p><img alt="Flex items laid out as a row with space between them." src="https://mdn.mozillademos.org/files/16938/flex-task1.png" style="height: 135px; width: 1441px;"></p> +<p><img alt="Flex items laid out as a row with space between them." src="flex-task1.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Two">Flex Layout Two</h2> <p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p> -<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="https://mdn.mozillademos.org/files/16939/flex-task2.png" style="height: 586px; width: 1424px;"></p> +<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="flex-task2.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> @@ -46,22 +46,22 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> </ul> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Three">Flex Layout Three</h2> <p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p> -<p><img alt="A box centered inside another box." src="https://mdn.mozillademos.org/files/16940/flex-task3.png" style="height: 632px; width: 840px;"></p> +<p><img alt="A box centered inside another box." src="flex-task3.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Four">Flex Layout Four</h2> @@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br> </p> -<p><img alt="A set of items displayed as rows." src="https://mdn.mozillademos.org/files/16941/flex-task4.png" style="height: 445px; width: 942px;"></p> +<p><img alt="A set of items displayed as rows." src="flex-task4.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Assessment_or_further_help">Assessment or further help</h2> diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html index ffcc762cea..386185ea62 100644 --- a/files/fr/learn/css/css_layout/floats/index.html +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> +<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> -<p>La propriété <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> -<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> <p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p> @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> - - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> -<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> +<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -92,11 +90,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Float_Example_1">Float Example 1</h6> +<h3>Faire flotter la boîte</h3> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> + +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -124,10 +122,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> <p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p> @@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> +<h3>Visualiser le flottement</h3> -<div id="Float_2"> -<div class="hidden"> -<h6 id="Float_Example_2">Float Example 2</h6> +<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -181,10 +175,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> <p>Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p> @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<div id="Float_3"> -<div class="hidden"> -<h6 id="Float_Example_3">Float Example 3</h6> - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -235,10 +223,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: left; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> <p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété <code>clear</code> accepte les valeurs suivantes :</p> @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; }</pre> -<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> +<h3>Le problème</h3> -<div id="Float_4"> -<div class="hidden"> -<h6 id="Float_Example_4">Float Example 4</h6> +<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -307,10 +291,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> <p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p> @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> -<div id="Float_5"> -<div class="hidden"> -<h6 id="Float_Example_5">Float Example 5</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -371,10 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: block; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> <h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; }</pre> -<div id="Float_6"> -<div class="hidden"> -<h6 id="Float_Example_6">Float Example 6</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -427,10 +399,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> <p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p> @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; }</pre> -<div id="Float_7"> -<div class="hidden"> -<h6 id="Float_Example_7">Float Example 7</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -483,28 +449,26 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> -<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> +<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html index 05f16693ae..3694a00968 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -6,77 +6,77 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- <div>{{LearnSidebar}}</div> -<p class="summary"><font>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également.<span> </span></font><font>Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</font></p> +<p>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><strong style="">Conditions préalables</strong>:</th> - <td><span style="">Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</span></td> + <th scope="row"><strong>Conditions préalables</strong>:</th> + <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</td> </tr> <tr> - <th scope="row"><strong style="">Objectif</strong>:</th> - <td><span style="">Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</span></td> + <th scope="row"><strong>Objectif</strong>:</th> + <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> </tr> </tbody> </table> -<h2 id="dossier_de_projet"><font><font>dossier de projet</font></font></h2> +<h2 id="dossier_de_projet">dossier de projet</h2> -<p><span style="">Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</span></p> +<p>Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> +<p><img alt="" src="layout-task-complete.png"></p> -<h3 id="configuration_de_base"><font><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>configuration de base</font></span></font></h3> +<h3 id="configuration_de_base">configuration de base</h3> -<p style=""><font><font>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images<span> </span></font></font><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension" rel="noopener" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none; white-space: pre-line;"><font><font>ici</font></font></a><font><font><span> </span>.</font></font></p> +<p>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</p> -<p style=""><font><font>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>images</code><font><font>.<span> </span></font><font>Ouvrir le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>index.html</code><font><font>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</font></font></p> +<p>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</p> -<p style=""><font><font>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</font></font></p> +<p>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> +<p><img alt="" src="layout-task-start.png"></p> -<h3 id="Votre_section_detâches"><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font><font>Votre<span> </span></font></font></span><font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#Your_tasks" style="margin: 0px; padding: 0px; border: 0px; color: inherit; text-decoration: none;"><span><font>section de</font></span></a><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>tâches</font></span></font></h3> +<h3 id="Votre_section_detâches">Votre section de tâches</h3> -<p style=""><font><font>Vous devez maintenant implémenter votre mise en page.<span> </span></font><font>Les tâches que vous devez accomplir sont:</font></font></p> +<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> -<ol style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les<span> </span></font><font>éléments<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, en syndication)."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><article></code></a><font><font>et<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <apartement> représente une partie d'un document dont le contenu est uniquement indirectement lié au contenu principal du document."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><aside></code></a><font><font>doivent s'afficher sous la forme d'une disposition à deux colonnes.<span> </span></font><font>La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</font></font></li> +<ol> + <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li> + <li>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</li> + <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</li> + <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</li> </ol> -<p style=""><font><font>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</font></font></p> +<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnement</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flotte</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flexbox</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>CSS Grid Layout</font></font></li> +<ul> + <li>Positionnement</li> + <li>Flotte</li> + <li>Flexbox</li> + <li>CSS Grid Layout</li> </ul> -<p style=""><font><font>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses.<span> </span></font><font>Essayez différentes approches et voyez laquelle fonctionne le mieux.<span> </span></font><font>Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>.</font></font></p> +<p>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</p> <h2 id="Evaluation">Evaluation</h2> -<p><font><font>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.<span> </span></font><font>Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le<span> </span></font></font><a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener" style=""><font><font>fil de discussion relatif à cet exercice</font></font></a><font><font><span> </span>ou sur le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style=""><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>sur<span> </span></font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener" style=""><font><font>Mozilla IRC</font></font></a><font><font><span> </span>.<span> </span></font><font>Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</font></font></p> - -<h2 id="Dans_ce_module_Section" style=""><font><font>Dans ce module<span> </span></font></font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#In_this_module" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><span><font><font>Section</font></font></span></a></h2> - -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Introduction à la mise en page CSS</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Débit normal</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flexbox</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>la grille</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flotteurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Positionnement</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Mise en page à plusieurs colonnes</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Conception sensible</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Guide du débutant aux questions des médias</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Méthodes de mise en page héritées</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Soutenir les anciens navigateurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Évaluation fondamentale de la compréhension de la mise en page.</font></font></a></li> +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p> + +<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> + +<ul> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html index 272858a9e8..6a0d5da4ad 100644 --- a/files/fr/learn/css/css_layout/grids/index.html +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -22,13 +22,13 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> +<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -43,7 +43,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p> -<p><img alt="Schéma du quadrillage" src="https://mdn.mozillademos.org/files/16104/grille.png" style="display: block; height: 346px; margin: 0px auto; width: 747px;"></p> +<p><img alt="Schéma du quadrillage" src="grille.png"></p> <h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2> @@ -70,11 +70,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Simple_Grid_Example">Simple Grid Example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -88,7 +84,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -102,10 +98,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids display: grid; grid-template-columns: 200px 200px 200px; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> <h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> @@ -127,11 +121,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -151,7 +141,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -160,13 +150,11 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> +<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> </div> <h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> @@ -181,11 +169,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p> -<div id="Grid_3"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -222,7 +206,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> +<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> </div> <pre class="brush: css">.container { @@ -250,11 +234,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p> -<div id="Grid_4"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -268,7 +248,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -278,7 +258,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -286,9 +265,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: 100px; grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> <h3 id="La_fonction_minmax">La fonction minmax()</h3> @@ -311,11 +289,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> -<div id="Grid_5"> -<div class="hidden"> -<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -330,7 +304,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -339,7 +313,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -347,9 +320,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: minmax(100px, auto); grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> <p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p> @@ -399,11 +371,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_6"> -<div class="hidden"> -<h6 id="Line-based_placement">Line-based placement</h6> - -<pre class="brush: css"> body { +<pre class="brush: css hidden"> body { width: 90%; max-width: 900px; margin: 2em auto; @@ -448,8 +416,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -462,13 +430,11 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> +<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> </div> <h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> @@ -505,11 +471,8 @@ footer { <p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p> -<div id="Grid_7"> -<div class="hidden"> -<h6 id="Line-based_placement_2">Line-based placement</h6> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -555,8 +518,8 @@ footer { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -569,10 +532,8 @@ footer { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> <p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> @@ -612,11 +573,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_8"> -<div class="hidden"> -<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -662,8 +619,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -676,14 +633,12 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> -<p>Si vous utilisez <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> +<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> -<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16109/trames.png" style="height: 677px; width: 1363px;"></p> +<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> <h2 id="Résumé">Résumé</h2> @@ -692,8 +647,8 @@ aside { <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> @@ -703,14 +658,14 @@ aside { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html index fac781b37b..b6b10499ce 100644 --- a/files/fr/learn/css/css_layout/index.html +++ b/files/fr/learn/css/css_layout/index.html @@ -22,12 +22,12 @@ original_slug: Apprendre/CSS/CSS_layout --- <div>{{LearnSidebar}}</div> -<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> +<p>À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir développeuse ou développeur web front-end ?</h4> + <p>Vous cherchez à devenir développeuse ou développeur web front-end ?</p> <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> </p> </div> @@ -42,8 +42,7 @@ original_slug: Apprendre/CSS/CSS_layout </ol> <div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> + <p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> </div> <h2 id="guides">Guides</h2> diff --git a/files/fr/learn/css/css_layout/introduction/index.html b/files/fr/learn/css/css_layout/introduction/index.html index 61936d08b4..c295efa170 100644 --- a/files/fr/learn/css/css_layout/introduction/index.html +++ b/files/fr/learn/css/css_layout/introduction/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> -<p class="summary">Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> +<p>Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p> <div class="note"> -<p><strong>Note</strong>: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> +<p><strong>Note :</strong> « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> </div> <p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p> @@ -82,11 +82,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> <ul> - <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li> <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li> <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li> - <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> + <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="/fr/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> </ul> <h2 id="La_propriété_«_display_»">La propriété « display »</h2> @@ -99,17 +99,15 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <h2 id="Flexbox">Flexbox</h2> -<p>Flexbox est l'abréviation pour <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> +<p>Flexbox est l'abréviation pour <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> <p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p> -<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> +<h3>Utiliser display: flex</h3> -<div id="Flex_1"> -<div class="hidden"> -<h6 id="Flexbox_Exemple_1">Flexbox Exemple 1</h6> +<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -117,7 +115,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -130,19 +127,16 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> + +<h3>Définir la propriété flex</h3> <p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p> <p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p> -<div id="Flex_2"> -<div class="hidden"> -<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> - -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -150,7 +144,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -167,12 +160,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> <div class="note"> -<p><strong>Note </strong>: Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> +<p><strong>Note :</strong> Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> </div> <h2 id="Disposition_en_trame">Disposition en trame</h2> @@ -181,11 +173,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Grid_example_1">Grid example 1</h6> +<h3>Utiliser display: grid</h3> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -193,7 +183,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -212,17 +201,14 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box6">Six</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> -<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> +<h3>Placer des objets sur la grille</h3> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Grid_example_2">Grid example 2</h6> +<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -230,7 +216,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -263,10 +248,10 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction </pre> </div> -<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> <div class="note"> -<p><strong>Note </strong>: Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> +<p><strong>Note :</strong> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> </div> <p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p> @@ -286,11 +271,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code><div></code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Floats_example">Floats example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -308,7 +289,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> @@ -326,12 +306,11 @@ p { margin-right: 30px; } </pre> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> <div class="note"> -<p><strong>Note </strong>: Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> +<p><strong>Note :</strong> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> </div> <h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> @@ -394,17 +373,13 @@ p { <p>Ajouter ce code donne le résultat suivant :</p> -<div id="Relative_1"> -<div class="hidden"> -<h6 id="Relative_positioning_example">Relative positioning example</h6> - -<pre class="brush: html"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement relatif.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -417,7 +392,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: relative; @@ -426,9 +400,8 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> <h3 id="Positionnement_absolu">Positionnement absolu</h3> @@ -444,17 +417,13 @@ p { <p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p> -<div id="Absolute_1"> -<div class="hidden"> -<h6 id="Absolute_positioning_example">Absolute positioning example</h6> - -<pre class="brush: html"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement absolu.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -467,7 +436,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: absolute; @@ -476,11 +444,10 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}</p> -<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> <h3 id="Positionnement_fixé">Positionnement fixé</h3> @@ -497,11 +464,7 @@ p { <p>Paragraphe 3.</p> </pre> -<div id="Fixed_1"> -<div class="hidden"> -<h6 id="Fixed_positioning_example">Fixed positioning example</h6> - -<pre class="brush: html"><h1>Positionnement fixé</h1> +<pre class="brush: html hidden"><h1>Positionnement fixé</h1> <div class="positioned">Fixé</div> @@ -513,7 +476,7 @@ p { </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -525,26 +488,20 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> <h3 id="Positionnement_collant">Positionnement collant</h3> <p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Sticky_positioning_example">Sticky positioning example</h6> - -<pre class="brush: html"><h1>Positionnement collant</h1> +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -554,7 +511,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -566,19 +523,17 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: pour plus de précisions à propos du positionnement, voir l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> +<p><strong>Note :</strong> pour plus de précisions à propos du positionnement, voir l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> </div> <h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> @@ -670,11 +625,7 @@ form p { <p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="Multicol_example">Multicol example</h6> - -<pre class="brush: html"> <div class="container"> +<pre class="brush: html hidden"> <div class="container"> <h2>Disposition en colonnes</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -685,15 +636,13 @@ form p { </div> </pre> -<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> -</div> +<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> <pre class="brush: css"> .container { column-width: 200px; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> <h2 id="Résumé">Résumé</h2> @@ -706,12 +655,12 @@ form p { <ul> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html index f4777dd68d..e78ffa385a 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> +<p>Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -93,11 +93,9 @@ div:nth-of-type(2) { <p>En mettant tout ensemble, voici le résultat :</p> -<div id="Floated_Two_Col"> -<div class="hidden"> -<h6 id="Simple_two-column_layout">Simple two-column layout</h6> +<h3>Exemple complet</h3> -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> +<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> <div> <h2>Première colonne</h2> @@ -110,7 +108,7 @@ div:nth-of-type(2) { </div> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -126,20 +124,18 @@ div:nth-of-type(2) { float: right; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> +<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> <p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> </div> <h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> -<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> +<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> <p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p> @@ -176,7 +172,7 @@ div:nth-of-type(2) { <p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> +<p><img alt="" src="simple-grid-finished.png"></p> <p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p> @@ -217,7 +213,7 @@ body { <p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> <div class="note"> -<p><strong>Note</strong> : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> +<p><strong>Note :</strong> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> </div> <p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p> @@ -242,7 +238,7 @@ body { <p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p> <div class="note"> -<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> </div> <p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p> @@ -323,12 +319,12 @@ body { <p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p> <div class="note"> -<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> </div> <h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> -<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> +<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> <p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p> @@ -351,11 +347,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> </div> <div class="note"> -<p><strong>Note </strong>: Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> +<p><strong>Note :</strong> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> </div> <h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> @@ -369,7 +365,7 @@ body { }</pre> <div class="note"> -<p><strong>Note </strong>: Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> +<p><strong>Note :</strong> Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> </div> <h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> @@ -401,15 +397,15 @@ body { <pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> -<p><strong>Note</strong> : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> +<p><strong>Note :</strong> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> </div> <p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="offset-grid-finished.png"></p> <div class="note"> -<p><strong>Note </strong>: Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> +<p><strong>Note :</strong> Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> </div> <h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> @@ -457,7 +453,7 @@ body { <p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="flexbox-grid-incomplete.png"></p> <p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p> @@ -485,7 +481,7 @@ body { <p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p> <div class="note"> -<p><strong>Note</strong> : <a href="/en-US/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> +<p><strong>Note :</strong> <a href="/fr/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> </div> <p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> @@ -553,7 +549,7 @@ body { <p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> <div class="note"> -<p><strong>Note </strong>: Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> +<p><strong>Note :</strong> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> </div> <p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p> @@ -573,14 +569,14 @@ body { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html index 552d1982df..f629d17eb3 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> + <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -50,22 +50,22 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> -<pre class="brush: css"><code>@media print { +<pre class="brush: css">@media print { body { font-size: 12pt; } -}</code></pre> +}</pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: the media type here is different from the so-called {{glossary("MIME type")}}.</p> +<div class="note"> +<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> +<div class="note"> +<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> +<div class="note"> +<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> </div> <h3 id="Media_feature_rules">Media feature rules</h3> @@ -78,37 +78,37 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> -<pre class="brush: css"><code>@media screen and (width: 600px) { +<pre class="brush: css">@media screen and (width: 600px) { body { color: red; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> <p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> -<pre class="brush: css"><code>@media screen and (max-width: 400px) { +<pre class="brush: css">@media screen and (max-width: 400px) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> <p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> <h4 id="Orientation">Orientation</h4> <p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> -<pre class="brush: css"><code>@media (orientation: landscape) { +<pre class="brush: css">@media (orientation: landscape) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> @@ -118,11 +118,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> -<pre class="brush: css"><code>@media (hover: hover) { +<pre class="brush: css">@media (hover: hover) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> @@ -140,11 +140,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> @@ -152,11 +152,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> @@ -164,11 +164,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> -<pre class="brush: css"><code>@media not all and (orientation: landscape) { +<pre class="brush: css">@media not all and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> @@ -178,9 +178,9 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> -<p>The <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> <h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> @@ -194,7 +194,7 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> -<pre class="brush: css"><code>* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -244,11 +244,11 @@ nav a:hover { article { margin-bottom: 1em; } -</code></pre> +</pre> <p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> -<pre class="brush: html"><code><body> +<pre class="brush: html"><body> <div class="wrapper"> <header> <nav> @@ -288,7 +288,7 @@ article { <footer><p>&copy;2019</p></footer> </div> </body> -</code></pre> +</pre> <p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> @@ -300,7 +300,7 @@ article { <p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> -<pre class="brush: css"><code>@media screen and (min-width: 40em) { +<pre class="brush: css">@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,7 +315,7 @@ article { flex: 1; } } -</code></pre> +</pre> <p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> @@ -353,7 +353,7 @@ article { <p>This could be achieved using the following:</p> -<pre class="brush: html"><code><ul class="grid"> +<pre class="brush: html"><ul class="grid"> <li> <h2>Card 1</h2> <p>...</p> @@ -374,9 +374,9 @@ article { <h2>Card 5</h2> <p>...</p> </li> -</ul></code></pre> +</ul></pre> -<pre class="brush: css"><code>.grid { +<pre class="brush: css">.grid { list-style: none; margin: 0; padding: 0; @@ -388,7 +388,7 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> @@ -396,7 +396,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary">Summary</h2> @@ -411,16 +411,16 @@ article { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html index 9d28e265de..248c788e2b 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> +<p>Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -47,18 +47,13 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="column-count_example">column-count example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -</div> <pre class="brush: html"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> @@ -76,13 +71,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -<pre class="brush: css">.container { - column-count: 3; -} -</pre> -</div> +<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> +<h3>Définir column-width</h3> <p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> @@ -93,18 +84,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p> -<div id="Multicol_2"> -<div class="hidden"> -<h6 id="column-width_example">column-width example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -118,15 +105,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> - -<pre class="brush: css">.container { - column-width: 200px; -} -</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> <h2 id="Style_des_colonnes">Style des colonnes</h2> @@ -154,11 +134,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Ajoutons des règles pour les divers styles et couleurs.</p> -<div id="Multicol_3"> -<div class="hidden"> -<h6 id="Styling_the_columns">Styling the columns</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -170,7 +146,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -184,10 +160,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> -</div> -<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> <p>Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p> @@ -197,11 +171,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p> -<div id="Multicol_4"> -<div class="hidden"> -<h6 id="Cards_example">Cards example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -209,7 +179,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout } </pre> </div> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -279,11 +249,12 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> -<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> +<h3>Utiliser break-inside</h3> + +<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> <p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p> @@ -299,18 +270,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Actualisez la page et les boîtes devraient rester entières.</p> -<div id="Multicol_5"> -<div class="hidden"> -<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -368,7 +335,6 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -</div> <pre class="brush: css">.container { column-width: 250px; @@ -383,9 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> @@ -394,8 +359,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> @@ -403,14 +368,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html index 00f1cc1882..b0edfa8415 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.html +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> -<p class="summary">Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> +<p>Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -41,7 +41,8 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>Voici un exemple simple expliquant cela :</p> -<div id="Normal_Flow"> +<h3 id="Exemple">Exemple</h3> + <pre class="brush: html"><h2>Cours d'un document de base</h2> <p>Je suis un élément de niveau bloc de base. @@ -65,7 +66,7 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <span>sont placés sur une nouvelle ligne si possible (comme celle‑ci contenant du texte)</span>, sinon ils sont placés sur une nouvelle ligne, comme cette image : - <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + <img src="long.jpg"></p></pre> <pre class="brush: css">body { width: 500px; @@ -83,9 +84,8 @@ span { background: white; border: 1px solid black; }</pre> -</div> -<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> <h2 id="Résumé">Résumé</h2> @@ -96,14 +96,14 @@ span { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html index c4a9c593b6..8485a78f70 100644 --- a/files/fr/learn/css/css_layout/positioning/index.html +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -22,9 +22,9 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> +<p>Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -51,25 +51,25 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html"><p class="positioned"> ... </p></pre> <p>Puis ajoutez la règle suivante au bas de votre CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: static; background: yellow; }</pre> <p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p> <div class="note"> -<p><strong>Remarque </strong>: ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> +<p><strong>Note :</strong> ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> </div> <h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> <p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css">position: relative;</pre> <p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p> @@ -77,25 +77,23 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p> -<pre class="notranslate">top: 30px; +<pre>top: 30px; left: 30px;</pre> <div class="note"> -<p><strong>Remarque </strong>: les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> +<p><strong>Note :</strong> les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> </div> <p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> -<div id="example_1"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -111,35 +109,31 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> -<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela <span class="st">peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif</span>. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> +<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> <div class="note"> -<p><strong>Remarque</strong>: à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> <p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> -<pre class="notranslate">position: absolute;</pre> +<pre>position: absolute;</pre> <p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -155,25 +149,23 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_2', '100%', 420) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> -<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. <span class="st">Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste.</span> C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> +<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> -<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu <span class="st">de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant.</span> Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> +<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> <div class="note"> -<p><strong>Note</strong> : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> +<p><strong>Note :</strong> vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> </div> <div class="note"> -<p><strong>Note </strong>: Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> +<p><strong>Note :</strong> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> </div> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> </div> <h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> @@ -182,21 +174,19 @@ span { <p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p> -<pre class="notranslate">position: relative;</pre> +<pre>position: relative;</pre> <p>Cela devrait donner le résultat suivant:</p> -<div id="example_3"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Contextes de positionnement</h1> +<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; @@ -220,15 +210,13 @@ span { top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_3','100%', 420) }}</p> +<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> -<p><span class="st">À présent, l</span>'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> <div class="note"> -<p><strong>Note </strong>: à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> </div> <h3 id="Présentation_du_z-index">Présentation du z-index</h3> @@ -237,7 +225,7 @@ span { <p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -252,22 +240,20 @@ span { <p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> -<pre class="notranslate">z-index: 1;</pre> +<pre>z-index: 1;</pre> <p>Voici maintenant l'exemple terminé :</p> -<div id="example_4"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html hidden"><h1>z-index</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; } @@ -291,15 +277,13 @@ p:nth-of-type(1) { right: 30px; z-index: 1; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> <p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p> <div class="note"> -<p><strong>Note</strong> : sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> +<p><strong>Note :</strong> sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> @@ -310,7 +294,7 @@ p:nth-of-type(1) { <p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p> -<pre class="notranslate">body { +<pre>body { width: 500px; height: 1400px; margin: 0 auto; @@ -318,7 +302,7 @@ p:nth-of-type(1) { <p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p> -<pre class="notranslate">h1 { +<pre>h1 { position: fixed; top: 0; width: 500px; @@ -331,22 +315,20 @@ p:nth-of-type(1) { <p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Voici l'exemple terminé :</p> -<div id="example_5"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement fixe</h1> +<pre class="brush: html hidden"><h1>Positionnement fixe</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Je ne suis plus positionné...</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -376,24 +358,21 @@ h1 { p:nth-of-type(1) { margin-top: 60px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note</strong> : à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> </div> <h3 id="«_position_sticky_»">« position: sticky »</h3> <p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Exemple_de_positionnement_collant">Exemple de positionnement collant</h6> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<h4>Exemple simple</h4> + +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -403,7 +382,7 @@ p:nth-of-type(1) { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -415,20 +394,21 @@ p:nth-of-type(1) { margin: 10px; border-radius: 5px; }</pre> -</div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p>{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}</p> + +<h4>Index déroulant</h4> <p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<pre class="brush: html"><h1>Positionnement collant</h1> <dl> <dt>A</dt> @@ -461,7 +441,7 @@ p:nth-of-type(1) { <p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css">dt { background-color: black; color: white; padding: 10px; @@ -472,9 +452,7 @@ p:nth-of-type(1) { } </pre> -<div id="Sticky_2"> -<div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -491,43 +469,10 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> - -<dl> -<dt>A</dt> -<dd>Abeille</dd> -<dd>Abricot</dd> -<dd>Altimètre</dd> -<dd>Avion</dd> -<dt>B</dt> -<dd>Banane</dd> -<dd>Betterave</dd> -<dd>Bœuf</dd> -<dd>Bouvreuil</dd> -<dd>Buzzard</dd> -<dt>C</dt> -<dd>Calculateur</dd> -<dd>Camera</dd> -<dd>Cane</dd> -<dd>Chameau</dd> -<dt>D</dt> -<dd>Dime</dd> -<dd>Dindon</dd> -<dd>Drapeau</dd> -<dd>Drone</dd> -<dt>E</dt> -<dd>Eau</dd> -<dd>Éléphant</dd> -<dd>Escadrille</dd> -</dl> -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> </div> <h2 id="Résumé">Résumé</h2> @@ -540,20 +485,20 @@ dt { <ul> <li>Référence de la propriété {{cssxref("position")}}.</li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> </ul> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html index 05df9cfd85..312eea3059 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.html +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -41,26 +41,22 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> -<figure><img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> </div> <p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> -<figure><img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> +<div class="note"> +<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> </div> <p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> @@ -69,7 +65,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a> <sup>(EN)</sup>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> <p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> @@ -93,7 +89,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -114,12 +110,12 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -129,36 +125,32 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> </p> -<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> <p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> -<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> </div> <h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> -<p>Les méthodes de mise en page modernes telles que <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> <h3 id="Multicol">Multicol</h3> <p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -169,7 +161,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -178,29 +170,29 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> <p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> </div> <h2 id="Images_responsives">Images responsives</h2> <p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> -<pre class="brush: css notranslate"><code>img { +<pre class="brush: css"><code>img { max-width: 100%: } </code> </pre> @@ -211,7 +203,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> -<p>Vous pouvez trouver un <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> <h2 id="Typographie_responsive">Typographie responsive</h2> @@ -219,7 +211,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -238,18 +230,14 @@ h1 { <p>Sur un mobile, le titre est plus petit :</p> -<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> <p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> -<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> </div> <p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> @@ -258,7 +246,7 @@ h1 { <p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -266,21 +254,21 @@ h1 { <p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> <p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> -<div class="blockIndicator note"> -<p>Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> </div> <h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> <p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> @@ -305,8 +293,8 @@ h1 { <p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> </div> <h2 id="Sommaire">Sommaire</h2> diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html index b7eea3d877..1aeb151ae9 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> +<p>Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/css/first_steps/getting_started/index.html b/files/fr/learn/css/first_steps/getting_started/index.html index 999acf147b..9bbccc2107 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.html +++ b/files/fr/learn/css/first_steps/getting_started/index.html @@ -15,9 +15,9 @@ translation_of: Learn/CSS/First_steps/Getting_started <div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> -<p class="summary">Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> +<p>Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,7 +34,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom <code>index.html</code>.</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> @@ -61,8 +61,8 @@ translation_of: Learn/CSS/First_steps/Getting_started </html> </pre> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.</p> +<div class="note"> +<p><strong>Note :</strong> Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.</p> </div> <h2 id="Ajouter_CSS_à_notre_document">Ajouter CSS à notre document</h2> @@ -73,11 +73,11 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Pour lier <code>styles.css</code> à <code>index.html</code> ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :</p> -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> +<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> <p>Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut <code>rel</code> ; la valeur de l'attribut <code>href</code> donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans <code>styles.css</code>. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; }</pre> @@ -91,13 +91,13 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur <code>p</code>. Voilà la règle pour passer en vert tous les paragraphes :</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: green; }</pre> <p>On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :</p> -<pre class="brush: css notranslate">p, li { +<pre class="brush: css">p, li { color: green; }</pre> @@ -111,7 +111,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre <code><ul></code>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :</p> -<pre class="brush: css notranslate">li { +<pre class="brush: css">li { list-style-type: none; }</pre> @@ -127,7 +127,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans le document HTML, ajouter un <a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut class</a> au deuxième item de la liste :</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item un</li> <li <strong>class="special"</strong>>Item deux</li> <li>Item <em>trois</em></li> @@ -135,7 +135,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Dans votre CSS vous pouvez maintenant cibler la classe <code>special</code> grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: orange; font-weight: bold; }</pre> @@ -146,14 +146,14 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe :</p> -<pre class="brush: css notranslate">li.special { +<pre class="brush: css">li.special { color: orange; font-weight: bold; }</pre> <p>Cette syntaxe signifie "s'applique à tous les éléments <code>li</code> dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>". Cette règle ne s'applique alors plus à l'élément <code><span></code> ou à tout autre élément dont l'attribut <code>class</code> a la valeur <code>special</code><em> </em>mais<em> </em>qui n'est pas un <code><li>.</code> Pour que la règle s'applique aussi au <code><span></code> il faudrait l'ajouter dans la liste des sélecteurs :</p> -<pre class="brush: css notranslate">li.special, +<pre class="brush: css">li.special, span.special { color: orange; font-weight: bold; @@ -167,7 +167,7 @@ span.special { <p>Ajoutez la règle suivante à votre feuille de style :</p> -<pre class="brush: css notranslate">li em { +<pre class="brush: css">li em { color: rebeccapurple; }</pre> @@ -177,7 +177,7 @@ span.special { <p>Ajoutez cette règle à votre feuille de style :</p> -<pre class="brush: css notranslate">h1 + p { +<pre class="brush: css">h1 + p { font-size: 200%; }</pre> @@ -185,15 +185,15 @@ span.special { <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> +<div class="note"> +<p><strong>Note :</strong> A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS Selectors</a> du cours suivant.</p> </div> <h2 id="Mise_en_forme_basée_sur_létat">Mise en forme basée sur l'état</h2> -<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> +<p>Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <code><a href="/fr/docs/Web/HTML/Element/a"><a></a></code> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (<code>visited</code>), est survolé par le curseur (<code>hover</code>), a le focus clavier (<code>focus</code>), ou si l'utilisateur est en train de cliquer sur ce lien (<code>active</code>). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.</p> -<pre class="brush: css notranslate">a:link { +<pre class="brush: css">a:link { color: pink; } @@ -203,7 +203,7 @@ a:visited { <p>On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :</p> -<pre class="brush: css notranslate">a:hover { +<pre class="brush: css">a:hover { text-decoration: none; }</pre> @@ -213,8 +213,8 @@ a:visited { <p>Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> +<div class="note"> +<p><strong>Note :</strong> dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> : les règles pour que nos pages soient compréhensibles et utilisables par tous.</p> <p>Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.</p> @@ -225,7 +225,7 @@ a:visited { <p>On peut associer sélecteurs et combinateurs. Par exemple :</p> -<pre class="brush: css notranslate">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ +<pre class="brush: css">/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ article p span { ... } /* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1> */ @@ -233,7 +233,7 @@ h1 + ul + p { ... }</pre> <p>On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :</p> -<pre class="brush: css notranslate">body h1 + p .special { +<pre class="brush: css">body h1 + p .special { color: yellow; background-color: black; padding: 5px; diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html index a5dca8a25a..057da54fc4 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html @@ -9,7 +9,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured <p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -244,18 +244,19 @@ p { </ul> <div class="warning"> -<p><strong>Important :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> +<p><strong>Attention :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> </div> <div class="warning"> -<p><strong>Important :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> +<p><strong>Attention :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> </div> <h3 id="functions">Fonctions</h3> <p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p> -<div id="calc_example"> +<h4 id="Exemple_calc">Exemple calc</h4> + <pre class="brush: html"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> <pre class="brush: css">.outer { @@ -268,17 +269,17 @@ p { background-color: rebeccapurple; color: white; }</pre> -</div> <p>La page devrait s'afficher comme ceci :</p> -<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Exemple_calc', '100%', 200)}}</p> <p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p> <p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/<transform>"><code><transform></code></a>, telles que <code>rotate()</code>.</p> -<div id="transform_example"> +<h4 id="Exemple_transform">Exemple transform</h4> + <pre class="brush: html"><div class="box"></div></pre> <pre class="brush: css">.box { @@ -288,11 +289,10 @@ p { background-color: rebeccapurple; transform: rotate(0.8turn) }</pre> -</div> <p>La page devrait s'afficher comme ceci :</p> -<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Exemple_transform', '100%', 200)}}</p> <p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p> diff --git a/files/fr/learn/css/first_steps/how_css_works/index.html b/files/fr/learn/css/first_steps/how_css_works/index.html index 35f603c50d..0a578ae2a0 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.html +++ b/files/fr/learn/css/first_steps/how_css_works/index.html @@ -1,23 +1,18 @@ --- -title: 'CSS, comment ça marche ?' +title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works -tags: - - Apprendre - - CSS - - DOM - - Débutant translation_of: Learn/CSS/First_steps/How_CSS_works --- <p>{{LearnSidebar}}<br> {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> -<p class="summary">Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.</p> +<p>Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.)</td> + <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.)</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -41,7 +36,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Le diagramme suivant propose une vue synthétique de ce traitement.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> +<p><img alt="" src="rendering.svg"></p> <h2 id="À_propos_du_DOM">À propos du DOM</h2> @@ -79,11 +74,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :</p> -<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> +<p>{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}</p> -<div class="hidden"> -<pre class="brush: css">p {margin:0;}</pre> -</div> +<pre class="brush: css hidden">p {margin:0;}</pre> <h2 id="Appliquer_CSS_au_DOM">Appliquer CSS au DOM</h2> @@ -103,17 +96,17 @@ translation_of: Learn/CSS/First_steps/How_CSS_works background-color: lime; }</pre> -<p>Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur <code>span</code>, ça va être rapide à trier ! La règle est attachée à chaque nœud <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">SPAN</span></font> du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à <em>peindre</em> la représentation visuelle finale à l'écran.</p> +<p>Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur <code>span</code>, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à <em>peindre</em> la représentation visuelle finale à l'écran.</p> <p>Voilà le résultat après mise à jour :</p> -<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> +<p>{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}</p> -<p>Dans le prochain module, dans l'article <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a>, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.</p> +<p>Dans le prochain module, dans l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a>, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.</p> <h2 id="Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas">Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?</h2> -<p>Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait <a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS#Prise_en_charge_par_les_navigateurs">dans une leçon précédente</a>. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.</p> +<p>Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait <a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs">dans une leçon précédente</a>. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.</p> <p>La réponse : ne rien faire et passer à la suite !</p> @@ -123,7 +116,6 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise <code>colour</code> pour le mot <em>couleur.</em> Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.</p> -<div id="Skipping_example"> <pre class="brush: html"><p> Je veux que ce texte soit grand, gras et bleu.</p></pre> <pre class="brush: css">p { @@ -131,19 +123,13 @@ translation_of: Learn/CSS/First_steps/How_CSS_works colour: blue; /* incorrect spelling of the color property */ font-size: 200%; }</pre> -</div> -<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}</p> <p>Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la <em>cascade</em> : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.</p> <p>Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter <code>calc()</code> pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de <code>width</code> est calculée par <code>calc(</code><code>)</code>. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec <code>calc()</code> qui, par cascade, écrase la déclaration précédente.</p> -<pre class="brush: css">.box { - width: 500px; - width: calc(100% - 50px); -}</pre> - <p>Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.</p> <h2 id="Et_enfin">Et enfin</h2> diff --git a/files/fr/learn/css/first_steps/index.html b/files/fr/learn/css/first_steps/index.html index 91a9d56dbf..2b0e0238ec 100644 --- a/files/fr/learn/css/first_steps/index.html +++ b/files/fr/learn/css/first_steps/index.html @@ -11,18 +11,12 @@ translation_of: Learn/CSS/First_steps --- <div>{{LearnSidebar}}</div> -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs.</span> <span title="">Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</span></span></div> -</div> +<p>CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.</p> -<div class="callout"> <h3 id="Vous_voulez_devenir_un_développeur_web_front-end">Vous voulez devenir un développeur web front-end ?</h3> <p>Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Commencer</a></p> -</div> - <h2 id="Prérequis">Prérequis</h2> <p>Avant de commencer ce module, vous devriez avoir :</p> @@ -34,7 +28,7 @@ translation_of: Learn/CSS/First_steps </ol> <div class="note"> -<p><strong>Note </strong>: Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme <a href="/fr/docs/">JSBin</a> ou <a href="/fr/docs/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme <a href="/fr/docs/">JSBin</a> ou <a href="/fr/docs/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> @@ -43,7 +37,7 @@ translation_of: Learn/CSS/First_steps <dl> <dt><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est-ce que le CSS?</a></dt> - <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.</dd> + <dd><p><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.</p></dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></dt> <dd>Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.</dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment est structuré le CSS </a></dt> @@ -52,12 +46,11 @@ translation_of: Learn/CSS/First_steps <dd>Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.</dd> <dt><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Utilisez vos nouvelles compétences</a></dt> <dd>Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.</dd> - <dd></dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <dl> <dt>Literacy<a href="/fr/docs/"> Web intermédiaire 1 : Introduction au CSS</a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module <em>Introduction à CSS</em>.</span> Approfondissements à propos de<span title=""> l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P</span></span></dd> + <dd>Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module <em>Introduction à CSS</em>. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P</dd> </dl> diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html index c49978ebb6..87b94d05bf 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html @@ -10,9 +10,9 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge --- <p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> -<p class="summary">Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. </p> +<p>Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. </p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -29,8 +29,8 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>Vous pouvez travailler dans l'éditeur ci-dessous ou <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">télécharger le point de départ</a> pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section <code><head></code>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ou <a href="https://glitch.com/" rel="noopener">Glitch</a> pour travailler sur les tâches proposées.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: ne restez pas coincé, appelez à l'aide — voir la section <a href="#evaluation">Evaluation et comment obtenir de l'aide</a> au bas de cette page.</p> +<div class="note"> +<p><strong>Note :</strong> ne restez pas coincé, appelez à l'aide — voir la section <a href="#evaluation">Evaluation et comment obtenir de l'aide</a> au bas de cette page.</p> </div> <h2 id="Travailler_avec_CSS">Travailler avec CSS</h2> @@ -60,7 +60,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>Vous devriez obtenir un rendu qui ressemble à cela :</p> -<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> +<p><img alt="Screenshot of how the example should look after completing the assessment." src="learn-css-basics-assessment.png"></p> <p>Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la <a href="/fr/docs/Web/CSS/Reference">référence CSS sur MDN</a> !</p> @@ -68,7 +68,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> -<h2 id="Evaluation_ou_compléments_dinformation"><a id="evaluation" name="evaluation">Evaluation ou compléments d'information</a></h2> +<h2 id="Evaluation_ou_compléments_dinformation">Evaluation ou compléments d'information</h2> <p>Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :</p> diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html index 7389147591..bfdeb9fa33 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.html +++ b/files/fr/learn/css/first_steps/what_is_css/index.html @@ -15,9 +15,9 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> -<p class="summary"><strong>{{Glossary("CSS")}}</strong> (<em>Cascading Style Sheets</em>) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.</p> +<p><strong>{{Glossary("CSS")}}</strong> (<em>Cascading Style Sheets</em>) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -32,7 +32,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Dans le cours <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.</p> -<p><img alt="La mise en forme par défaut appliquée par un navigateur." src="https://mdn.mozillademos.org/files/17059/basic_styling_fr.png" style="border: 1px solid #cccccc; height: 232px; width: 953px;"></p> +<p><img alt="La mise en forme par défaut appliquée par un navigateur." src="basic_styling_fr.png"></p> <p>Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.</p> @@ -48,8 +48,8 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p><strong>"Présenter</strong> un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.</p> +<div class="note"> +<p><strong>Note :</strong> Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.</p> </div> <p>CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer <a href="/fr/docs/Web/CSS/Type_color">la couleur</a> et <a href="/fr/docs/Web/CSS/font-size">la taille</a> des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">un texte affiché sur une colonne</a> en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des <a href="/fr/docs/Web/CSS/Animations_CSS">animations</a>. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.</p> @@ -62,7 +62,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; font-size: 5em; }</pre> @@ -73,7 +73,7 @@ original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS <p>Une feuille de style CSS est constituée d'une succession de telles règles :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: red; font-size: 5em; } @@ -84,8 +84,8 @@ p { <p>On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Sur MDN, dans <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a>, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn <em>nom-de-propriété-ou-fonctionnalité-css</em>" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !</p> +<div class="note"> +<p><strong>Note :</strong> Sur MDN, dans <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a>, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn <em>nom-de-propriété-ou-fonctionnalité-css</em>" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !</p> </div> <h2 id="Modules_CSS">Modules CSS</h2> diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html index dd242c62a3..31db5f3ac9 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -1,16 +1,12 @@ --- title: Créer de belles boîtes slug: Learn/CSS/Howto/create_fancy_boxes -tags: - - Apprendre - - CSS - - Débutant translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> +<p>Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> -<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p> +<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition en CSS</a>.</p> <p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> @@ -35,9 +31,7 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h3 id="Créer_des_cercles">Créer des cercles</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> @@ -75,18 +69,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h2 id="Les_arrière-plans">Les arrière-plans</h2> -<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> +<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> <p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> <ul> - <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> + <li>On peut définir <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> </ul> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Passons à la manipulation :</p> @@ -123,18 +115,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> <div class="note"> -<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p> +<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="https://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">notre article dédié</a>.</p> </div> <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> -<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> +<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> <h3 id="Un_nuage">Un nuage</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> @@ -275,13 +265,11 @@ blockquote i { <p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> -<h2 id="L'assemblage">L'assemblage</h2> +<h2 id="Assemblage">Assemblage</h2> <p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> @@ -308,8 +296,8 @@ blockquote i { transform: rotate(4deg); }</pre> -<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p> +<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> <h2 id="La_suite">La suite</h2> -<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p> +<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition</a>.</p> diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html index cd56e36305..aa8656013b 100644 --- a/files/fr/learn/css/howto/generated_content/index.html +++ b/files/fr/learn/css/howto/generated_content/index.html @@ -7,154 +7,61 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -<p> </p> -<p>Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.</p> -<p>Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.</p> -<h3 id="Information_:_contenu" name="Information_:_contenu">Information : contenu</h3> -<p>Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document</p> -<p>Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. - <p>Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.</p> - <p>Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_textuel" name="Contenu_textuel">Contenu textuel</h4> -<p>CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez <code>:before</code> ou <code>:after</code> au sélecteur. Dans la déclaration, spécifiez la propriété <code>content</code> en lui donnant comme valeur le contenu textuel.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute le texte <span style="font-weight: bold; color: navy;">Référence :</span> devant chaque élément de la classe <code>ref</code> : - <div style="width: 30em;"> - <pre class="eval"> -.ref:before { +<p>{{LearnSidebar}}</p> + +<p>Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.</p> + +<p>L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.</p> + +<div class="note"> +<p><strong>Note :</strong> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.</p> +</div> + +<p>Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.</p> + +<p>Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Contenu_textuel">Contenu textuel</h3> + +<p>CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html">Un texte où j'en ai besoin de <span class="ref"> quelque chose</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.ref::before { font-weight: bold; color: navy; - content: "Référence : "; - } -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> dans la spécification CSS. - <p>Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a>, ainsi que <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> dans la spécification CSS.</p> - </td> - </tr> - </tbody> -</table> -<h4 id="Contenu_sous_forme_d.27images" name="Contenu_sous_forme_d.27images">Contenu sous forme d'images</h4> -<p>Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété <code>content</code>.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe <code>glossaire</code>: - <div style="width: 45em;"> - <pre class="eval"> -a.glossaire:after {content: " " url("../images/glossary-icon.gif");} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<p><br> - Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété <code>background</code>. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.</p> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Exemple</caption> - <tbody> - <tr> - <td>Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. - <p>Le sélecteur spécifie l'id de l'élément. La valeur <code>no-repeat</code> fait que l'image apparaîtra une seule fois :</p> - <div style="width: 50em;"> - <pre class="eval"> -#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;} -</pre> - </div> - </td> - </tr> - </tbody> -</table> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> - <caption> - Plus de détails</caption> - <tbody> - <tr> - <td>Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#q2">The background</a> dans la spécification CSS.</td> - </tr> - </tbody> -</table> -<h3 id="Action_:_ajout_d.27une_image_de_fond" name="Action_:_ajout_d.27une_image_de_fond">Action : ajout d'une image de fond</h3> -<p>Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :</p> -<table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> - </tr> - </tbody> -</table> -<p>(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)</p> -<p>Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.</p> -<div style="width: 40em;"> - <pre class="eval">background: url("ligne-bleue.png"); -</pre> -</div> -<p>La valeur <code>repeat</code> est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :</p> -<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - <div style="font-style: normal; padding-top: 2px; height: 8em;"> - <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> - </div> - </div> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> - <caption> - Challenge</caption> - <tbody> - <tr> - <td>Téléchargez cette image : - <table style="border: 2px solid #ccc;"> - <tbody> - <tr> - <td><img alt="Image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"></td> - </tr> - </tbody> - </table> - <p>Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :</p> - <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> - <p style="margin: 0px;"><img alt="Image:fond-lignes-bleues.png" class="internal" src="/@api/deki/files/1373/=Fond-lignes-bleues.png"></p> - <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> - <div style="font-style: italic; width: 24em; padding-top: 8px;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - <div style="font-style: normal; padding-top: 12px; height: 8em;"> - <img alt="image:punaise-jaune.png" class="internal" src="/@api/deki/files/1427/=Punaise-jaune.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> - </div> - </div> - </td> - </tr> - </tbody> -</table> -<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> -<p>Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.</p> -<p>La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : <strong><a href="/fr/docs/CSS/Premiers_pas/Listes" title="fr/CSS/Premiers_pas/Listes">Listes.</a></strong></p> + content: "Réference "; +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}</p> + +<p>L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q23">4.4 Représentation de la feuille de style CSS</a> dans la spécification CSS.</p> + +<p>Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir <a href="https://www.w3.org/TR/CSS21/syndata.html#q24">Référencer des caractères non représentés par l'encodage</a> et <a href="https://www.w3.org/TR/CSS21/syndata.html#q6">Caractères et casse</a> dans la spécification CSS.</p> + +<h3 id="Contenu_avec_une_image">Contenu_avec_une_image</h3> + +<p>Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.</p> + +<p>Cette règle ajoute un espace et une icône après chaque lien qui possède la classe <code>glossary</code> :</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a.glossary::after { + content: " " url("glossary-icon.gif"); +}</pre> + +<p>{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}</p> diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html index aabbb12aa7..d14cb33a16 100644 --- a/files/fr/learn/css/howto/index.html +++ b/files/fr/learn/css/howto/index.html @@ -8,57 +8,50 @@ tags: translation_of: Learn/CSS/Howto original_slug: Apprendre/CSS/Comment --- -<p> </p> - -<p class="summary">Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> +<p>Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.</p> <h2 id="Scénarios_fréquents">Scénarios fréquents</h2> -<div class="column-container"> -<div class="column-half"> -<h3 id="Basess">Basess</h3> +<h3 id="Basess">Bases</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML">Comment appliquer CSS au HTML</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs">Comment utiliser les espaces en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires">Comment écrire des commentaires en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples">Comment sélectionner des éléments par leur nom, leur classe ou leur ID</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut">Comment sélectionner des éléments par le nom et le contenu de l'attribut</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes">Comment utiliser les pseudo-classes</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments">Comment utiliser les pseudo-éléments</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs">Comment appliquer plusieurs sélecteurs à la même règle</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">Comment spécifier les couleurs en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Comment déboguer CSS dans le navigateur</a></li> </ul> <h3 id="CSS_et_texte">CSS et texte</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Comment donner un style au texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Comment personnaliser une liste d'éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Comment donner un style aux liens</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte">Comment ajouter des ombres au texte</a></li> </ul> -</div> -<div class="column-half"> + <h3 id="Boîtes_et_mises_en_page">Boîtes et mises en page</h3> <ul> - <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> + <li><a href="/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Comment tailler les boîtes CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements">Comment contrôler le contenu débordant</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan">Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Comment définir <em>"inline</em>", <em>"block"</em> et <em>"inline-block"</em> ?</a></li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes">Comment créer des boîtes fantaisies </a> (lire aussi le module <a href="/fr/docs/Learn/CSS/Styling_boxes">Styles pour boites</a>, généralités).</li> + <li><a href="/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans">Comment utiliser <code>background-clip</code> pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Comment changer complètement le modèle de boîte en utilisant <code>box-sizing</code></a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Comment contrôler l'arrière-plan</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Comment contrôler les bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Comment donner un style à une table HTML</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">Comment ajouter des ombres aux boîtes</a></li> </ul> -</div> -</div> <h2 id="Techniques_avancées_ou_peu_communes">Techniques avancées ou peu communes</h2> @@ -67,15 +60,15 @@ original_slug: Apprendre/CSS/Comment <h3 id="Général">Général</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity">Comment calculer la spécificité d'un sélecteur de CSS</a></li> + <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage">Comment contrôler l'héritage en CSS</a></li> </ul> <h3 id="Effets_avancés">Effets avancés</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">Comment utiliser des filtres en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">Comment utiliser les modes fusion</a></li> </ul> <h3 id="Mise_en_page">Mise en page</h3> @@ -83,9 +76,9 @@ original_slug: Apprendre/CSS/Comment <ul> <li><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes">Utiliser les boîtes flexibles CSS (<em>flexbox</em>)</a></li> <li><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Utiliser une structure CSS avec plusieurs colonnes</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> + <li><a href="/fr/docs/CSS/Premiers_pas/Contenu">Utiliser les contenus générés par CSS</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> +<p><a href="/fr/docs/Web/CSS/CSS_questions_frequentes">CSS FAQ</a> — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.</p> diff --git a/files/fr/learn/css/index.html b/files/fr/learn/css/index.html index 7af85e54ec..0d3547603f 100644 --- a/files/fr/learn/css/index.html +++ b/files/fr/learn/css/index.html @@ -31,7 +31,7 @@ original_slug: Apprendre/CSS <li>du <a href="/fr/docs/Learn/JavaScript">JavaScript</a> et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web.</li> </ul> -<p id="sect1">Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p> +<p>Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.</p> <p>Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">Installer les logiciels de base</a> et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.</p> diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html index c43c2fdd55..1aa02da170 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.html +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -16,13 +16,13 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte <div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.</p> +<p>Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> + <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,7 +36,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte <p>Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.</p> <div class="note"> -<p><strong>Note</strong> : si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Modèle de boîte</a> avant de poursuivre.</p> +<p><strong>Note :</strong> si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Modèle de boîte</a> avant de poursuivre.</p> </div> <p>Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :</p> @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte </ul> <div class="note"> -<p><strong>Note </strong>: Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::first-letter">::first-letter</a> (sélectionne la première lettre du texte d'un élément), <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::first-line">::first-line</a> (sélectionne la première ligne du texte d'un élément) ou <a href="https://developer.mozilla.org/fr/docs/Web/CSS/::selection">::selection</a> (sélectionne le texte actuellement mis en surbrillance par le curseur) .</p> +<p><strong>Note :</strong> Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme <a href="/fr/docs/Web/CSS/::first-letter">::first-letter</a> (sélectionne la première lettre du texte d'un élément), <a href="/fr/docs/Web/CSS/::first-line">::first-line</a> (sélectionne la première ligne du texte d'un élément) ou <a href="/fr/docs/Web/CSS/::selection">::selection</a> (sélectionne le texte actuellement mis en surbrillance par le curseur) .</p> </div> <h2 id="Fontes">Fontes</h2> @@ -67,7 +67,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> <div class="note"> -<p>(NdT : Extrait et traduction <em>approximative</em> de la chanson <em>Tommy the Cat</em> du groupe <a href="https://fr.wikipedia.org/wiki/Primus_(groupe)">Primus)</a></p> +<p><strong>Note :</strong> (NdT : Extrait et traduction <em>approximative</em> de la chanson <em>Tommy the Cat</em> du groupe <a href="https://fr.wikipedia.org/wiki/Primus_(groupe)">Primus)</a></p> </div> <p>Vous pouvez trouver l'<a href="https://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple (en) fini</a> sur Github (voir aussi <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">le code source</a>).</p> @@ -76,7 +76,7 @@ occasions, comme maintenant.</p></pre> <p>La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.</p> -<p><code>color</code> accepte toutes les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">unités de couleur des CSS</a>, par exemple :</p> +<p><code>color</code> accepte toutes les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs">unités de couleur des CSS</a>, par exemple :</p> <pre class="brush: css">p { color: red; @@ -84,8 +84,7 @@ occasions, comme maintenant.</p></pre> <p>Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -96,7 +95,6 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <p>{{ EmbedLiveSample('Couleur', '100%', 220) }}</p> @@ -122,7 +120,7 @@ occasions, comme maintenant.</p></pre> <thead> <tr> <th scope="col">Nom</th> - <th scope="col" style="white-space: nowrap;">Type générique</th> + <th scope="col">Type générique</th> <th scope="col">Notes</th> </tr> </thead> @@ -138,12 +136,12 @@ occasions, comme maintenant.</p></pre> <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Courier New</em> appelée <em>Courier</em>. Il est recommandé d'utiliser les deux avec <em>Courier New</em> comme alternative préférée.</td> </tr> <tr> - <td style="white-space: nowrap;">Georgia</td> + <td>Georgia</td> <td>serif</td> <td> </td> </tr> <tr> - <td style="white-space: nowrap;">Times New Roman</td> + <td>Times New Roman</td> <td>serif</td> <td>Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police <em>Times New Roman</em> appelée <em>Times</em>. Il est recommandé d'utiliser les deux avec <em>Times New Roman</em> comme alternative préférée.</td> </tr> @@ -161,11 +159,11 @@ occasions, comme maintenant.</p></pre> </table> <div class="note"> -<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Le site <a href="https://www.cssfontstack.com/">cssfontstack.com</a> met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.</span></span></p> +<p><strong>Note :</strong> Le site <a href="https://www.cssfontstack.com/">cssfontstack.com</a> met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.</p> </div> <div class="note"> -<p><strong>Note </strong>: Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : <strong>les polices web</strong>. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.</p> +<p><strong>Note :</strong> Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : <strong>les polices web</strong>. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.</p> </div> <h4 id="Polices_par_défaut">Polices par défaut</h4> @@ -186,27 +184,27 @@ occasions, comme maintenant.</p></pre> <tr> <td><code>serif</code></td> <td>Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)</td> - <td><span style="font-family: serif;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>sans-serif</code></td> <td>Les polices qui n'ont pas d'empattements</td> - <td><span style="font-family: sans-serif;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>monospace</code></td> <td>Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.</td> - <td><span style="font-family: monospace;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>cursive</code></td> <td>Les polices destinées à émuler l'écriture, avec des traits fluides et connectés.</td> - <td><span style="font-family: cursive;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> <tr> <td><code>fantasy</code></td> <td>Les polices destinées à être décoratives.</td> - <td><span style="font-family: fantasy;">Mon grand éléphant rouge</span></td> + <td>Mon grand éléphant rouge</td> </tr> </tbody> </table> @@ -219,12 +217,12 @@ occasions, comme maintenant.</p></pre> font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> -<p>Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. <span>Si c'est le cas, il applique cette police aux éléments sélectionnés.</span> <span>Sinon, il passe à la police suivante et ainsi de suite.</span></p> +<p>Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.</p> <p>Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !</p> <div class="note"> -<p><strong>Note </strong>: Les noms de police comportant plus d'un mot — comme <code>Trebuchet MS</code> — doivent être entourés de guillemets, par exemple <code>"Trebuchet MS"</code>.</p> +<p><strong>Note :</strong> Les noms de police comportant plus d'un mot — comme <code>Trebuchet MS</code> — doivent être entourés de guillemets, par exemple <code>"Trebuchet MS"</code>.</p> </div> <h4 id="Un_exemple_de_font-family">Un exemple de font-family</h4> @@ -238,8 +236,7 @@ occasions, comme maintenant.</p></pre> <p>Cela donne le résultat suivant :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -250,18 +247,17 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> <h3 id="Taille_de_la_police_de_caractères">Taille de la police de caractères</h3> -<p>Dans l'article <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units">Valeurs et unités CSS</a> de notre prédédent module, nous avons vu les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille">unités de longueur et taille</a>. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages">pourcentages</a>). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :</p> +<p>Dans l'article <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units">Valeurs et unités CSS</a> de notre prédédent module, nous avons vu les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille">unités de longueur et taille</a>. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages">pourcentages</a>). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :</p> <ul> <li><code>px</code> (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.</li> <li><code>em</code> : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser <code>em</code> pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des <code>em</code>, la maintenance en sera facilitée.</li> - <li><code>rem</code> : il fonctionne comme <code>em</code>, excepté que un <code>rem</code> est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les <code>rem</code> ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux <code>em</code> ou aux <code>px</code>, soit utiliser une <span class="st">prothèse d'émulation</span> ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> + <li><code>rem</code> : il fonctionne comme <code>em</code>, excepté que un <code>rem</code> est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les <code>rem</code> ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux <code>em</code> ou aux <code>px</code>, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> </ul> <p>La propriété <code>font-size</code> d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété <code>font‑size</code> est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 <code>em</code> définie par défaut, donc aura une taille finale de 32 px.</p> @@ -281,8 +277,7 @@ occasions, comme maintenant.</p></pre> <p>Notre nouveau résultat ressemble à :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -293,7 +288,6 @@ brillant au fond du canon de cet extraordinaire rôdeur en quête de proie. Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -</div> <pre class="brush: css">html { font-size: 10px; @@ -325,7 +319,7 @@ p { </li> <li>{{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), mais en réalité, vous les utiliserez rarement en dehors de <code>normal</code> et <code>bold</code> (gras): <ul> - <li><code>normal</code>, <code>bold</code> : graisse de la police, normale ou <strong style="font-weight: bold;">bold</strong>.</li> + <li><code>normal</code>, <code>bold</code> : graisse de la police, normale ou <strong>bold</strong>.</li> <li><code>lighter</code>, <code>bolder</code> : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.</li> <li><code>100–900</code> : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.</li> </ul> @@ -333,28 +327,27 @@ p { <li>{{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : <ul> <li><code>none</code> : aucune transformation.</li> - <li><code>uppercase</code> : met <span style="text-transform: uppercase;">tout le texte en majuscules</span>.</li> + <li><code>uppercase</code> : met tout le texte en majuscules.</li> <li><code>lowercase</code> : met tout le texte en minuscules.</li> - <li><code>capitalize</code> : transforme tous les mots en mettant leur <span style="text-transform: capitalize;">première lettre en majuscule</span>s.</li> + <li><code>capitalize</code> : transforme tous les mots en mettant leur première lettre en majuscules.</li> <li><code>full-width</code> : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)</li> </ul> </li> <li>{{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : <ul> <li><code>none</code>: désactive les décorations du texte déjà présentes.</li> - <li><code>underline</code>: <u>souligne le texte</u>.</li> - <li><code>overline</code>: <span style="text-decoration: overline;">trace une ligne au-dessus du texte</span>.</li> - <li><code>line-through</code>: <s style="text-decoration: line-through;">barre le texte</s>.</li> + <li><code>underline</code>: souligne le texte.</li> + <li><code>overline</code>: trace une ligne au-dessus du texte.</li> + <li><code>line-through</code>: barre le texte.</li> </ul> - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple <code>text-decoration: underline overline</code>. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple <code>text-decoration: line-through red wavy</code>.</li> </ul> <p>Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.</p> <p>Notre nouveau résultat ressemble à :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -367,7 +360,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> </div> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -397,29 +390,28 @@ p { <p>Les 4 propriétés sont les suivantes :</p> <ol> - <li>Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.</li> + <li>Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.</li> <li>Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.</li> - <li>Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS.</li> - <li>La couleur de l'ombre, qui peut prendre toute <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">unité de couleur CSS</a>. Si elle n'est pas définie, c'est la couleur noire par défaut.</li> + <li>Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a> des CSS.</li> + <li>La couleur de l'ombre, qui peut prendre toute <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">unité de couleur CSS</a>. Si elle n'est pas définie, c'est la couleur noire par défaut.</li> </ol> <div class="note"> -<p><strong>Note</strong> : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple <code>-1px -1px</code>.</p> +<p><strong>Note :</strong> Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple <code>-1px -1px</code>.</p> </div> <h4 id="Ombres_multiples">Ombres multiples</h4> <p>Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :</p> -<pre class="brush: css language-css"><code class="language-css">text-shadow: -1px -1px 1px #aaa, +<pre class="brush: css">text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), - 0px 0px 7px rgba(0,0,0,0.4);</code></pre> + 0px 0px 7px rgba(0,0,0,0.4);</pre> <p>Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -431,7 +423,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css line-numbers language-css"><code class="language-css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -453,35 +445,32 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; } -</code> </pre> -</div> <p>{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir plus d'exemples intéressants de <code>text-shadow</code> dans l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> (Clair de lune avec text-shadow).</p> +<p><strong>Note :</strong> Vous pouvez voir plus d'exemples intéressants de <code>text-shadow</code> dans l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> (Clair de lune avec text-shadow).</p> </div> -<h2 id="Mise_en_page_du_texte"><small lang="en">Mise en page du texte</small></h2> +<h2 id="Mise_en_page_du_texte">Mise en page du texte</h2> -<p><span id="result_box" lang="fr"><span>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</span></span></p> +<p>Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.</p> <h3 id="Alignement_du_texte">Alignement du texte</h3> -<p>La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles <span id="result_box" lang="fr"><span>fonctionnent à peu près de la même manière que dans un traitement de texte</span></span> :</p> +<p>La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :</p> <ul> <li><code>left</code>: le texte est aligné à gauche.</li> <li><code>right</code>: le texte est aligné à droite.</li> <li><code>center</code>: le texte est centré.</li> - <li><code>justify</code>: <span id="result_box" lang="fr"><span>étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte.</span> <span>Vous devez l'utiliser avec discernement </span></span> — <span lang="fr"><span> il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots.</span> <span>Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.</span></span></li> + <li><code>justify</code>: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.</li> </ul> <p>Si nous appliquons <code>text-align: center;</code> à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -516,7 +505,6 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> -</div> <p>{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}</p> @@ -528,8 +516,7 @@ p { <p>En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -541,7 +528,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -564,13 +551,12 @@ p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> -</div> <p>{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}</p> <h3 id="Espacement_entre_les_lettres_et_les_mots">Espacement entre les lettres et les mots</h3> -<p>Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des <a href="https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>.</p> +<p>Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des <a href="/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">unités de longueur et de taille</a>.</p> <p>Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :</p> @@ -581,8 +567,7 @@ p { <p>Nous obtiendrons :</p> -<div class="hidden"> -<pre class="brush: html"><h1>Tommy le Chat</h1> +<pre class="brush: html hidden"><h1>Tommy le Chat</h1> <p>Je m'en souviens comme mon dernier repas...</p> @@ -594,7 +579,7 @@ Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p></pre> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-size: 10px; } @@ -623,7 +608,6 @@ p { font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }</pre> -</div> <p>{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}</p> @@ -683,10 +667,7 @@ p { <p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> avec le bouton de même nom.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Un peu de texte pour vous délecter !</p></textarea> @@ -704,7 +685,7 @@ p { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -730,9 +711,8 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}</p> <h2 id="Résumé">Résumé</h2> @@ -742,16 +722,10 @@ window.addEventListener("load", drawOutput); <h2 id="Dans_ce_module">Dans ce module</h2> -<p> </p> - <ul> <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> - -<p> </p> - -<p> </p> diff --git a/files/fr/learn/css/styling_text/index.html b/files/fr/learn/css/styling_text/index.html index 57d52b0b06..18838ad893 100644 --- a/files/fr/learn/css/styling_text/index.html +++ b/files/fr/learn/css/styling_text/index.html @@ -13,16 +13,14 @@ tags: - Texte translation_of: Learn/CSS/Styling_text --- -<div> </div> - -<p class="summary"><span id="result_box" lang="fr"><span>Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS.</span></span><span lang="fr"> Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. <span>Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.</span></span></p> +<p>Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.</p> <h2 id="Prérequis">Prérequis</h2> -<p>Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>, et être à l'aise avec les fondamentaux de CSS étudiés dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</p> +<p>Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>, et être à l'aise avec les fondamentaux de CSS étudiés dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, <span id="result_box" lang="fr"><span>vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que</span></span> <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> @@ -30,14 +28,14 @@ translation_of: Learn/CSS/Styling_text <p>Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></dt> - <dd><span id="result_box" lang="fr"><span>Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de liste</a></dt> - <dd><span id="result_box" lang="fr"><span>Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte.</span> <span>Cet article explique tout.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Styling_links">Style de lien</a></dt> - <dd><span id="result_box" lang="fr"><span>Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets.</span> <span>Nous examinerons tous ces sujets dans cet article.</span></span></dd> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></dt> - <dd><span id="result_box" lang="fr"><span>Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.</span></span></dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></dt> + <dd>Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de liste</a></dt> + <dd>Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Styling_links">Style de lien</a></dt> + <dd>Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.</dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></dt> + <dd>Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.</dd> </dl> <h2 id="Auto-évaluation">Auto-évaluation</h2> @@ -45,6 +43,6 @@ translation_of: Learn/CSS/Styling_text <p>Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.</p> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></dt> - <dd>Dans cette auto-évaluation, nous testerons votre compréhension du style de texte <span id="result_box" lang="fr"><span>en vous amenant à créer le style du texte de la page d'accueil d'une école communale.</span></span></dd> + <dt><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></dt> + <dd>Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.</dd> </dl> diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html index 27276fac47..7e88a2f941 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.html +++ b/files/fr/learn/css/styling_text/styling_links/index.html @@ -21,9 +21,9 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p> +<p>Lors de la mise en forme de <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">liens</a>, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -56,10 +56,10 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).</p> -<pre class="brush: html notranslate"><p><a href="#">Un simple lien</a></p> +<pre class="brush: html"><p><a href="#">Un simple lien</a></p> </pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-size: 2rem; text-align: center; }</pre> @@ -67,7 +67,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}</p> <div class="note"> -<p><strong>Note </strong>: tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p> +<p><strong>Note :</strong> tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.</p> </div> <p>Vous remarquerez quelques petites choses en explorant les styles par défaut :</p> @@ -97,7 +97,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens </ul> <div class="note"> -<p><strong>Note </strong>: vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p> +<p><strong>Note :</strong> vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !</p> </div> <h3 id="Mise_en_forme_de_quelques_liens">Mise en forme de quelques liens</h3> @@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens <p>Pour commencer, nous écrirons notre jeu de règles vides :</p> -<pre class="brush: css notranslate">a { +<pre class="brush: css">a { } @@ -135,7 +135,7 @@ a:active { <p>Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 300px; margin: 0 auto; font-size: 1.2rem; @@ -177,7 +177,7 @@ a:active { <p>Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :</p> -<pre class="brush: html notranslate"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla +<pre class="brush: html"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, et <a href="#">Microsoft Edge</a>.</p></pre> @@ -206,10 +206,7 @@ Firefox</a>, <a href="#">Google Chrome</a>, et <p>Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, appuyez sur le bouton <em>Afficher la solution</em> pour insérer l'exemple que nous avons montré ci-dessus.</p> -<div class="hidden"> -<h5 id="Playable_code">Playable code</h5> - -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, et @@ -249,7 +246,7 @@ a:active { </div> </pre> -<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -282,9 +279,8 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}</p> <h2 id="Inclusion_dicônes_dans_des_liens">Inclusion d'icônes dans des liens</h2> @@ -292,12 +288,12 @@ window.addEventListener("load", drawOutput); <p>Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :</p> -<pre class="brush: html notranslate"><p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, +<pre class="brush: html"><p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>, jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p></pre> <p>Ensuite, le CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 300px; margin: 0 auto; font-family: sans-serif; @@ -348,7 +344,7 @@ a[href*="http"] { <p>Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !</p> <div class="note"> -<p><strong>Note </strong>: ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p> +<p><strong>Note :</strong> ne vous inquiétez pas si vous n'êtes pas encore familier avec les <a href="/fr/Apprendre/CSS/styliser_boites">arrières-plans</a> et le <a href="/fr/Apps/app_layout/responsive_design_building_blocks">responsive web design</a> ; ceux-ci sont expliqués par ailleurs.</p> </div> <h2 id="Mise_en_forme_de_liens_comme_des_boutons">Mise en forme de liens comme des boutons</h2> @@ -359,13 +355,13 @@ a[href*="http"] { <p>D'abord, un peu d'HTML :</p> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li> </ul></pre> <p>Et maintenant, notre CSS :</p> -<pre class="brush: css notranslate">body,html { +<pre class="brush: css">body,html { margin: 0; font-family: sans-serif; } @@ -427,7 +423,7 @@ a:active { </ul> <div class="note"> -<p><strong>Note</strong> : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> +<p><strong>Note :</strong> vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -444,6 +440,6 @@ a:active { <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> diff --git a/files/fr/learn/css/styling_text/styling_lists/index.html b/files/fr/learn/css/styling_text/styling_lists/index.html index fbbaa1fd87..e7fb1721ba 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.html +++ b/files/fr/learn/css/styling_text/styling_lists/index.html @@ -16,17 +16,17 @@ translation_of: Learn/CSS/Styling_text/Styling_lists <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> -<p class="summary"><span id="result_box" lang="fr"><span>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte.</span> <span>Cet article explique tout.</span></span></p> +<p>Les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes">listes</a> se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td> + <td>Connaissances de base informatiques, bases HTML (étudiées dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction à HTML</a>), bases CSS (étudiées dans <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction à CSS</a>), <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">la mise en forme du texte</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> - <td><span id="result_box" lang="fr"><span>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</span></span></td> + <td>Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.</td> </tr> </tbody> </table> @@ -35,7 +35,7 @@ translation_of: Learn/CSS/Styling_text/Styling_lists <p>Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible sur Github</a> (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">code source</a>).</p> -<p><span id="result_box" lang="fr"><span>Le code HTML pour nos exemples de liste ressemble à ceci :</span></span></p> +<p>Le code HTML pour nos exemples de liste ressemble à ceci :</p> <pre class="brush: html"><h2>Liste de courses (non ordonnée)</h2> @@ -77,11 +77,11 @@ paragraphe de référence, paragraphe de référence, paragraphe de référence. <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd> </dl></pre> -<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p> +<p>Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">les outils de développement du navigateur</a>, vous noterez quelques valeurs de style par défaut :</p> <ul> <li>Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas et une propriété {{cssxref("padding-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> - <li>Les éléments de la liste ({{htmlelement("li")}}) <span id="result_box" lang="fr"><span>n'ont aucun paramètre d'espacement par défaut</span></span><span lang="fr"><span>.</span></span></li> + <li>Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.</li> <li>L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de<code>16 px</code> (<code>1 em</code>) en haut et en bas , mais pas de définition du remplissage.</li> <li>Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de <code>40 px</code> (<code>2.5 em</code>.)</li> <li>Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de <code>16 px</code> (<code>1 em</code>) en haut et en bas, identiques à ceux des différents types de listes.</li> @@ -154,7 +154,7 @@ dd { <p>Cela donne l'apparence suivante :</p> -<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="https://mdn.mozillademos.org/files/16069/ex_1.png" style="border-style: solid; border-width: 1px; display: block; height: 94px; margin: 0px auto; width: 406px;"></p> +<p><img alt="une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste." src="ex_1.png"></p> <p>Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.</p> @@ -169,7 +169,7 @@ dd { list-style-position: inside; }</pre> -<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="https://mdn.mozillademos.org/files/16070/ex_2.png" style="border-style: solid; border-width: 1px; display: block; height: 147px; margin: 0px auto; width: 406px;"></p> +<p><img alt="une liste ordonnée avec les puces intégrées au texte des éléments de la liste." src="ex_2.png"></p> <h3 id="Utilisation_d'une_puce_image_personnalisée">Utilisation d'une puce image personnalisée</h3> @@ -179,7 +179,7 @@ dd { list-style-image: url(star.svg); }</pre> -<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="https://developer.mozilla.org/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p> +<p>Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module <a href="/fr/Apprendre/CSS/styliser_boites"> Styliser les boîtes</a>. Pour l'instant, voici un avant-goût !</p> <p>Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :</p> @@ -213,7 +213,7 @@ ul li { <p>Ceci nous donne le résultat suivant :</p> -<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="https://mdn.mozillademos.org/files/16071/ex_3.png" style="border-style: solid; border-width: 1px; display: block; height: 115px; margin: 0px auto; width: 194px;"></p> +<p><img alt="une liste non ordonnée avec les puces définies comme de petites images d'étoiles." src="ex_3.png"></p> <h3 id="Raccourci_de_style_de_liste">Raccourci de style de liste</h3> @@ -269,7 +269,7 @@ ul li { <h3 id="Valeurs_individualisées">Valeurs individualisées</h3> -<p>L'attribut {{htmlattrxref("value","ol")}} vous permet <span id="result_box" lang="fr"><span>de numéroter les éléments de liste avec des valeurs numériques de votre choix</span></span> . L'exemple suivant :</p> +<p>L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :</p> <pre class="brush: html"><ol> <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li> @@ -283,7 +283,7 @@ ul li { <p>{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}</p> <div class="note"> -<p><strong>Note</strong> : Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p> +<p><strong>Note :</strong> Même si vous utilisez une propriété {{cssxref ("type-style-list")}} avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut <code>value</code>.</p> </div> <h2 id="Apprentissage_actif_définir_le_style_d'une_liste_imbriquée">Apprentissage actif : définir le style d'une liste imbriquée</h2> @@ -299,10 +299,7 @@ ul li { <p>Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour voir une réponse possible.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>D'abord, allumez la chandelle.</li> @@ -330,7 +327,7 @@ ul li { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -365,7 +362,7 @@ window.addEventListener("load", drawOutput); </pre> </div> -<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> +<p>{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}</p> <h2 id="Voir_aussi">Voir aussi</h2> @@ -391,6 +388,6 @@ window.addEventListener("load", drawOutput); <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école communale</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école communale</a></li> </ul> diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html index 9cc49e8056..d237b8f377 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html @@ -17,9 +17,9 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.</p> +<p>Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage </ul> <div class="note"> -<p><strong>Note</strong> : Autrement, il reste possible d'utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">cet URL</a> pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <code><style></code> de l'élément <code>head</code> du document.</p> +<p><strong>Note :</strong> Autrement, il reste possible d'utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">cet URL</a> pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <code><style></code> de l'élément <code>head</code> du document.</p> </div> <h2 id="Énoncé_de_l'exercice">Énoncé de l'exercice</h2> @@ -103,7 +103,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <p>La capture d'écran ci-après montre un exemple possible du design terminé :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> +<p><img alt="" src="example2.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -121,6 +121,6 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage <li><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Initiation à la mise en forme du texte</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts" rel="nofollow">Polices de caractères web</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Web_fonts">Polices de caractères web</a></li> <li>Composition d'une page d'accueil d'une école de communauté</li> </ul> diff --git a/files/fr/learn/css/styling_text/web_fonts/index.html b/files/fr/learn/css/styling_text/web_fonts/index.html index 64724b25db..f1cafd3f21 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.html +++ b/files/fr/learn/css/styling_text/web_fonts/index.html @@ -7,13 +7,13 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> -<p class="summary">Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.</p> +<p>Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> + <td>Connaissances informatiques de base, les bases HTML (étudiées dans l'<a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), les bases CSS (étudiées dans <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction à CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -61,7 +61,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ol> <div class="note"> -<p><strong>Note </strong>: La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> +<p><strong>Note :</strong> La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !</p> </div> <h2 id="Apprentissage_actif_un_exemple_de_fonte_web">Apprentissage actif : un exemple de fonte web</h2> @@ -87,7 +87,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <p>Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.</p> <div class="note"> -<p><strong>Note </strong>: Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.</p> +<p><strong>Note :</strong> Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.</p> </div> <h3 id="Créer_le_code_requis">Créer le code requis</h3> @@ -127,10 +127,10 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <p>Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="web-font-example.png"></p> <div class="note"> -<p><strong>Note</strong> : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (lancez l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">exemple terminé directement</a>).</p> +<p><strong>Note :</strong> Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (lancez l'<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">exemple terminé directement</a>).</p> </div> <h2 id="Utiliser_un_service_de_polices_en_ligne">Utiliser un service de polices en ligne</h2> @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ol> <div class="note"> -<p><strong>Note</strong> : Vous pourrez trouver une version complétée sur <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si vous avez besoin de vérifier votre travail par rapport au nôtre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">voir en direct</a>).</p> +<p><strong>Note :</strong> Vous pourrez trouver une version complétée sur <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si vous avez besoin de vérifier votre travail par rapport au nôtre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">voir en direct</a>).</p> </div> <h2 id="font-face_plus_en_détail">@font-face plus en détail</h2> @@ -179,7 +179,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts </ul> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> (<em>Création de piles de fontes personnalisées en définissant des plages unicode</em>) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.</p> +<p><strong>Note :</strong> Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> (<em>Création de piles de fontes personnalisées en définissant des plages unicode</em>) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.</p> </div> <h2 id="Résumé">Résumé</h2> @@ -199,5 +199,5 @@ translation_of: Learn/CSS/Styling_text/Web_fonts <li><a href="/fr/docs/Learn/CSS/Styling_text/Styling_lists">Style de listes</a></li> <li><a href="/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens">Mise en forme des liens</a></li> <li>Polices de caractères web</li> - <li><a class="new" href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage" rel="nofollow">Composition d'une page d'accueil d'une école de communauté</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Composition d'une page d'accueil d'une école de communauté</a></li> </ul> |