diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-14 14:23:22 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-14 14:23:22 +0100 |
| commit | d596e86a4f13b04981f51d327af257b07e6d21c3 (patch) | |
| tree | 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/css/styling_text | |
| parent | 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff) | |
| download | translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2 translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip | |
Prepare Learning Area section for Markdown conversion (#2738)
* Remove summary, spans and fonts
* Remove notranslate class
* Remove ids other than headings
* Remove hidden blocks
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* Fix notes
* Remove code in pre, sub/sup and some styles
* fix dls
* fix absolute / english links
* fix figures and others
* fix other issues from report
* Fix other one-off issues excl. imgs
* Fix images
* Fixes #2842 for Learning area
Diffstat (limited to 'files/fr/learn/css/styling_text')
6 files changed, 123 insertions, 158 deletions
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> |