From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: 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 --- .../css/styling_text/styling_links/index.html | 44 ++++++++++------------ 1 file changed, 20 insertions(+), 24 deletions(-) (limited to 'files/fr/learn/css/styling_text/styling_links/index.html') 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
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
-

Lors de la mise en forme de liens, 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.

+

Lors de la mise en forme de liens, 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.

- +
@@ -56,10 +56,10 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens

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><a href="#">Un simple lien</a></p>
+
<p><a href="#">Un simple lien</a></p>
 

 
-
p {
+
p {
   font-size: 2rem;
   text-align: center;
 }

@@ -67,7 +67,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

 
 

-
Note : 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.

+
Note : 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.

 

 
 
Vous remarquerez quelques petites choses en explorant les styles par défaut :

@@ -97,7 +97,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
 
 

-
Note : 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 !

+
Note : 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 !

 

 
 
Mise en forme de quelques liens

@@ -106,7 +106,7 @@ original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens
 
 
Pour commencer, nous écrirons notre jeu de règles vides :

 
-
a {
+
a {
 
 }
 
@@ -135,7 +135,7 @@ a:active {
 
 
Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

 
-
body {
+
body {
   width: 300px;
   margin: 0 auto;
   font-size: 1.2rem;
@@ -177,7 +177,7 @@ a:active {
 
 
Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

 
-
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
+
<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>

 
@@ -206,10 +206,7 @@ Firefox</a>, <a href="#">Google Chrome</a>, et
 
 
Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

 
-
 
-
{{ EmbedLiveSample('Playable_code', 700, 800) }}

+
{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}

 
 
Inclusion d'icônes dans des liens

 
@@ -292,12 +288,12 @@ window.addEventListener("load", drawOutput);
 
 
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>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
+
<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>

 
 
Ensuite, le CSS:

 
-
body {
+
body {
   width: 300px;
   margin: 0 auto;
   font-family: sans-serif;
@@ -348,7 +344,7 @@ a[href*="http"] {
 
Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

 
 

-
Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

+
Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

 

 
 
Mise en forme de liens comme des boutons

@@ -359,13 +355,13 @@ a[href*="http"] {
 
 
D'abord, un peu d'HTML :

 
-
<ul>
+
<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>

 
 
Et maintenant, notre CSS :

 
-
body,html {
+
body,html {
   margin: 0;
   font-family: sans-serif;
 }
@@ -427,7 +423,7 @@ a:active {
 
 
 

-
Note : 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 Fighting the space between inline block elements.

+
Note : 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 Fighting the space between inline block elements.

 

 
 
Résumé

@@ -444,6 +440,6 @@ a:active {
  
  • Initiation à la mise en forme du texte
    • 
  
  • Style de listes
    • 
  
  • Mise en forme des liens
    • 
- 
  • Polices de caractères web
    • 
- 
  • Composition d'une page d'accueil d'une école communale
    • 
+ 
  • Polices de caractères web
    • 
+ 
  • Composition d'une page d'accueil d'une école communale
    • 
 
-- 
cgit v1.2.3-54-g00ecf
    Prérequis :