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 --- .../building_blocks/a_cool_looking_box/index.html | 10 +- .../advanced_styling_effects/index.html | 57 +++--- .../backgrounds_and_borders/index.html | 8 +- .../css/building_blocks/box_model_tasks/index.html | 16 +- .../cascade_and_inheritance/index.html | 58 +++--- .../creating_fancy_letterheaded_paper/index.html | 10 +- .../css/building_blocks/debugging_css/index.html | 78 ++++---- .../fundamental_css_comprehension/index.html | 22 +-- .../handling_different_text_directions/index.html | 2 +- files/fr/learn/css/building_blocks/index.html | 32 ++-- .../building_blocks/overflowing_content/index.html | 4 +- .../selectors/attribute_selectors/index.html | 6 +- .../selectors/combinators/index.html | 28 +-- .../learn/css/building_blocks/selectors/index.html | 4 +- .../pseudo-classes_and_pseudo-elements/index.html | 76 ++++---- .../type_class_and_id_selectors/index.html | 38 ++-- .../building_blocks/sizing_items_in_css/index.html | 6 +- .../css/building_blocks/styling_tables/index.html | 20 +- .../css/building_blocks/the_box_model/index.html | 18 +- .../building_blocks/values_and_units/index.html | 15 +- files/fr/learn/css/css_layout/flexbox/index.html | 54 +++--- .../learn/css/css_layout/flexbox_skills/index.html | 28 +-- files/fr/learn/css/css_layout/floats/index.html | 108 ++++------- .../fundamental_layout_comprehension/index.html | 92 ++++----- files/fr/learn/css/css_layout/grids/index.html | 137 +++++--------- files/fr/learn/css/css_layout/index.html | 9 +- .../learn/css/css_layout/introduction/index.html | 153 +++++---------- .../css_layout/legacy_layout_methods/index.html | 68 ++++--- .../learn/css/css_layout/media_queries/index.html | 100 +++++----- .../css_layout/multiple-column_layout/index.html | 99 ++++------ .../fr/learn/css/css_layout/normal_flow/index.html | 32 ++-- .../fr/learn/css/css_layout/positioning/index.html | 197 +++++++------------- .../css/css_layout/responsive_design/index.html | 92 ++++----- .../supporting_older_browsers/index.html | 4 +- .../css/first_steps/getting_started/index.html | 50 ++--- .../first_steps/how_css_is_structured/index.html | 18 +- .../learn/css/first_steps/how_css_works/index.html | 38 ++-- files/fr/learn/css/first_steps/index.html | 15 +- .../using_your_new_knowledge/index.html | 12 +- .../learn/css/first_steps/what_is_css/index.html | 18 +- .../learn/css/howto/create_fancy_boxes/index.html | 38 ++-- .../learn/css/howto/generated_content/index.html | 205 ++++++--------------- files/fr/learn/css/howto/index.html | 75 ++++---- files/fr/learn/css/index.html | 2 +- .../learn/css/styling_text/fundamentals/index.html | 140 ++++++-------- files/fr/learn/css/styling_text/index.html | 28 ++- .../css/styling_text/styling_links/index.html | 44 ++--- .../css/styling_text/styling_lists/index.html | 39 ++-- .../styling_text/typesetting_a_homepage/index.html | 10 +- .../fr/learn/css/styling_text/web_fonts/index.html | 20 +- 50 files changed, 1007 insertions(+), 1426 deletions(-) (limited to 'files/fr/learn/css') 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
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
-

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.

+

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.

- +
@@ -42,7 +42,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
-

Note: Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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 <style> dans l'élément head du document.

+

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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 <style> dans l'élément head du document.

Résumé du projet

@@ -76,7 +76,7 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

-

+

Évaluation

@@ -94,6 +94,6 @@ original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
  • Encadrements
  • Mise en page des tableaux
  • Effets de boîte avancés
    • -
  • Creation d'un en-tête de papier à lettre élégant
    • +
  • Creation d'un en-tête de papier à lettre élégant
  • Une boîte d'aspect rafraîchissant
    • 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
    {{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
    -

    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.

    +

    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.

    -
    Prérequis :
    +
    - + @@ -36,7 +36,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects

    Ombres des boîtes

    -

    Revenons au module Styling text — 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.

    +

    Revenons au module Styling text — 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.

    Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

    @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects

    Débutons avec un exemple simple. D'abord, un peu de HTML :

    -
    + 
    <article class="simple">
   <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
 </article>
    @@ -59,7 +59,7 @@ article { max-width: 500px; padding: 10px; color: white ; - text-align: center ; + 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); } -
    +

    donnent le résultat suivant :

    -

    {{ EmbedLiveSample('example_1', '100%', 100) }}

    +

    {{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}

    Notez les quatre éléments valeur de la propriété box-shadow :

    @@ -88,14 +88,12 @@ article {

    Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

    -
    - -
    p {
+
-

    Nous obtenons le résultat suivant :

    -

    {{ EmbedLiveSample('example_2', '100%', 100) }}

    +

    {{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}

    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.

    @@ -128,7 +125,6 @@ article {

    D'abord un HTML différent pour cet exemple :

    -
    <button>Appuyez ici !</button>
    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);
 }
    -

    Et voici le résultat :

    -

    {{ EmbedLiveSample('example_3', '100%', 70) }}

    - -

     

    +

    {{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}

    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.

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

    -

    Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. 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.

    +

    Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. 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.

    Filtres

    @@ -186,7 +179,7 @@ button:active { 
    p {
   margin: 1rem auto;
   padding: 20px;
-  text-align: center ;
+  text-align: center ;
   width: 100px;
   border: 5px dashed red;
 }
@@ -214,7 +207,7 @@ button:active {
 
 
 
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    
 
 
    Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).
    
@@ -233,7 +226,7 @@ button:active {
 
    Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.
    
 
 
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    
 
 
    background-blend-mode
    
@@ -331,7 +324,7 @@ article div:last-child {
 
    Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.
    
 
 
    
-
    Note : 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 CSS Layout.
    
+
    Note : 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 CSS Layout.
    
 
    
 
 
    -webkit-background-clip: text
    
@@ -348,7 +341,7 @@ article div:last-child {
 
    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.
    
 
 
    
-
    Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).
    
+
    Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).
    
 
    
 
 
    Apprentissage actif : expérimenter certains effets
    
@@ -357,10 +350,8 @@ article div:last-child {
 
 
    Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code', 700, 820) }}
    
+
+
    {{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}
    
 
 
    Résumé
    
 
@@ -421,8 +412,6 @@ window.addEventListener("load", drawOutput);
 
 
    {{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
    
 
-
     
    
-
 
    Dans ce module
    
 
 
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
 
 
    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.
    
 
-
    Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
    Objectif :
    +
    @@ -94,8 +94,8 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders

    La propriété background-position permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

    -
    -

    Note : La valeur par défaut de background-position est (0,0).

    +
    +

    Note : La valeur par défaut de background-position est (0,0).

    Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

    @@ -280,7 +280,7 @@ background-position: 10px 20px, top right;

    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}

    -

    Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

    +

    Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

    Résumé

    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

    L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.

    -
    -

    Note : 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 CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

    +
    +

    Note : 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 CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

    Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

    @@ -25,8 +25,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

    {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

    -
    -

    Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    +
    +

    Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    Modèle de boîte : numéro 2

    @@ -48,8 +48,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

    {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

    -
    -

    Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    +
    +

    Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    Modèle de boîte : numéro 3

    @@ -62,8 +62,8 @@ translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks

    {{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

    -
    -

    Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    +
    +

    Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

    Évaluation et aide

    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

    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.

    -
    Prérequis :
    +
    - + @@ -75,8 +75,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

    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 !

    -
    -

    Note : 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 section des spécifications de la propriété color, par exemple.

    +
    +

    Note : 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 section des spécifications de la propriété color, par exemple.

    Comprendre comment ces concepts se combinent

    @@ -108,12 +108,12 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
    Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
    -
    -

    Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

    +
    +

    Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

    -
    -

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

    +
    +

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

    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.

    @@ -140,7 +140,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

    Comprendre la cascade

    -

    Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, 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.

    +

    Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, 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.

    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 :

    @@ -180,7 +180,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
    -

    Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

    +

    Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

    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 référence MDN des sélecteurs.

    @@ -253,7 +253,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
    -

    Note : 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 million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

    +

    Note : 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 million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

    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.

    @@ -275,8 +275,8 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage
  • Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
    • -
    -

    Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

    +
    +

    Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

    Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important 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.

    @@ -322,23 +322,23 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage

    Dans ce cours

      -
    1. Cascade and inheritance
      2. -
    2. CSS selectors +
    3. Cascade and inheritance
      4. +
    4. CSS selectors
      5. -
    5. The box model
      6. -
    6. Backgrounds and borders
      7. -
    7. Handling different text directions
      8. -
    8. Overflowing content
      9. -
    9. Values and units
      10. -
    10. Sizing items in CSS
      11. -
    11. Images, media, and form elements
      12. -
    12. Styling tables
      13. -
    13. Debugging CSS
      14. -
    14. Organizing your CSS
      15. +
    15. The box model
      16. +
    16. Backgrounds and borders
      17. +
    17. Handling different text directions
      18. +
    18. Overflowing content
      19. +
    19. Values and units
      20. +
    20. Sizing items in CSS
      21. +
    21. Images, media, and form elements
      22. +
    22. Styling tables
      23. +
    23. Debugging CSS
      24. +
    24. Organizing your CSS
    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
    {{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}
    -

    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.

    +

    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.

    -
    Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
    Objectif :
    +
    @@ -46,7 +46,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
    -

    Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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 <style> dans l'élément head du document.

    +

    Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble 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 <style> dans l'élément head du document.

    Résumé du projet

    @@ -88,7 +88,7 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper

    Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

    -

    +

     

    @@ -108,6 +108,6 @@ original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper
  • Encadrements
  • Mise en page des tableaux
  • Effets de boîte avancés
    • -
  • Création d'un en-tête de papier à lettre élégant
    • +
  • Création d'un en-tête de papier à lettre élégant
  • Une boîte d'aspect rafraîchissant
    • 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

    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.

    -
    Prérequis :
    +
    - + @@ -23,27 +23,27 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

    Comment accéder aux outils de développement du navigateur

    -

    L'article Que sont les outils de développement de navigateurs 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.

    +

    L'article Que sont les outils de développement de navigateurs 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.

    -

    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 Grid Layouts, Flexbox, and Shapes. 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.

    +

    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 Grid Layouts, Flexbox, and Shapes. 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.

    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 an example file. 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.

    The DOM versus view source

    -

    Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

    +

    Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

    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 <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

    -

    View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree 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.

    +

    View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree 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.

    Inspecting the applied CSS

    Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

    -

    The example page for this tutorial with DevTools open.

    +

    The example page for this tutorial with DevTools open.

    -

    If you look at the Rules view 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 box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. 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.

    +

    If you look at the Rules view 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 box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. 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.

    Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

    @@ -63,7 +63,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

    With box1 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.

    -

    DevTools Styles Panel with a color picker open.

    +

    DevTools Styles Panel with a color picker open.

    Adding a new property

    @@ -71,17 +71,17 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

    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 font-size, 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.

    -

    The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

    +

    The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

    -
    -

    Note: 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 Examine and edit CSS.

    +
    +

    Note : 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 Examine and edit CSS.

    Understanding the box model

    -

    In previous lessons we have discussed the Box Model, 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.

    +

    In previous lessons we have discussed the Box Model, 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.

    -

    The Layout view 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.

    +

    The Layout view 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.

    In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

    @@ -89,10 +89,10 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

    The element with a class of box2 is using border-box, 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 width: 400px.

    -

    The Layout section of the DevTools

    +

    The Layout section of the DevTools

    -
    -

    Note: Find out more in Examining and Inspecting the Box Model.

    +
    +

    Note : Find out more in Examining and Inspecting the Box Model.

    Solving specificity issues

    @@ -101,26 +101,26 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS

    In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

    -
    em {
+
    em {
   color: hotpink;
   font-weight: bold;
 }
    
 
 
    Above that in the stylesheet however is a rule with a .special selector:
    
 
-
    .special {
+
    .special {
   color: orange;
 }
    
 
-
    As you will recall from the lesson on cascade and inheritance 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.
    
+
    As you will recall from the lesson on cascade and inheritance 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.
    
 
 
    Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.
    
 
-
    Selecting an em and looking at DevTools to see what is over-riding the color.
    
+
    Selecting an em and looking at DevTools to see what is over-riding the color.
    
 
 
    Find out more about the Firefox DevTools
    
 
-
    There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.
    
+
    There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.
    
 
 
    Debugging problems in CSS
    
 
@@ -143,7 +143,7 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS
 
 
    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")}}.
    
 
-
    Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
    
+
    Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
    
 
 
    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.
    
 
@@ -181,23 +181,23 @@ original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS
 
    In this module
    
 
 
      
- 
    1. Cascade and inheritance
      2. 
- 
    2. CSS selectors
+ 
    3. Cascade and inheritance
      4. 
+ 
    4. CSS selectors
   
  
      5. 
- 
    5. The box model
      6. 
- 
    6. Backgrounds and borders
      7. 
- 
    7. Handling different text directions
      8. 
- 
    8. Overflowing content
      9. 
- 
    9. Values and units
      10. 
- 
    10. Sizing items in CSS
      11. 
- 
    11. Images, media, and form elements
      12. 
- 
    12. Styling tables
      13. 
- 
    13. Debugging CSS
      14. 
- 
    14. Organizing your CSS
      15. 
+ 
    15. The box model
      16. 
+ 
    16. Backgrounds and borders
      17. 
+ 
    17. Handling different text directions
      18. 
+ 
    18. Overflowing content
      19. 
+ 
    19. Values and units
      20. 
+ 
    20. Sizing items in CSS
      21. 
+ 
    21. Images, media, and form elements
      22. 
+ 
    22. Styling tables
      23. 
+ 
    23. Debugging CSS
      24. 
+ 
    24. Organizing your CSS
      25. 
 
    
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
 
 
    {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
    
 
-
    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.
    
+
    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.
    
 
-
    Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
    Objective:
    +
    @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
    -

    Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> 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 <style> dans l'élément head du document.

    +

    Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> 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 <style> dans l'élément head du document.

    Énoncé du projet

    @@ -87,7 +87,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
    -

    Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em 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 font-size différent placés entre eux et <html> 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).

    +

    Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em 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 font-size différent placés entre eux et <html> 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).

    Autres choses à prendre en considération :

    @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension

    La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

    -

    A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

    +

    A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

     

    @@ -126,13 +126,13 @@ original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension
  • Comment fonctionnent les CSS
  • Syntaxe CSS
  • Sélecteurs
    • -
  • Sélecteurs simples
    • -
  • Sélecteurs d'attribut
    • -
  • Pseudo-classes et pseudo-éléments
    • -
  • Combinaisons et sélecteurs multiples
    • +
  • Sélecteurs simples
    • +
  • Sélecteurs d'attribut
    • +
  • Pseudo-classes et pseudo-éléments
    • +
  • Combinaisons et sélecteurs multiples
  • Unités et valeurs pour les CSS
  • Cascade et héritage
  • Le modèle de boîte
    • -
  • Débogage des CSS
    • -
  • Compréhension des fondements des CSS
    • +
  • Débogage des CSS
    • +
  • Compréhension des fondements des CSS
    • 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

    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 modes d'écriture (writing modes 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.

    -
    Prérequis :
    +
    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

    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.

    -

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

    +

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

    -
    Cascade and inheritance (Cascade et héritage)
    +
    Cascade and inheritance (Cascade et héritage)
    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.
    -
    CSS selectors (sélecteurs CSS)
    +
    CSS selectors (sélecteurs CSS)
    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 :
    -
    The box model (le modèle des boîtes)
    +
    The box model (le modèle des boîtes)
    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.
    -
    Backgrounds and borders (arrières-plans et bordures)
    +
    Backgrounds and borders (arrières-plans et bordures)
    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.
    -
    Handling different text directions (manipuler les différentes directions du texte)
    +
    Handling different text directions (manipuler les différentes directions du texte)
    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 (writing modes). 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. .
    -
    Overflowing content (quand ça dépasse)
    +
    Overflowing content (quand ça dépasse)
    Autre concept important du CSS: le dépassement (overflow) : 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.
    -
    Values and units (valeurs et unités)
    +
    Values and units (valeurs et unités)
    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.
    -
    Sizing items in CSS (dimensionner les éléments en CSS)
    +
    Sizing items in CSS (dimensionner les éléments en CSS)
    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.
    -
    Images, media, and form elements (images, médias et éléments de formulaires)
    +
    Images, media, and form elements (images, médias et éléments de formulaires)
    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.
    Mise en page des tableaux
    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.
    -
    Debugging CSS (déboguer le CSS)
    +
    Debugging CSS (déboguer le CSS)
    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.
    -
    Organizing your CSS (organiser votre CSS)
    +
    Organizing your CSS (organiser votre CSS)
    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é.
    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

    Dans ce cours nous allons étudier un autre concept important en CSS : les débordements (overflows 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.

    -
    Prérequis :
    +
    @@ -91,7 +91,7 @@ original_slug: Apprendre/CSS/Building_blocks/Overflowing_content

    Testez vos compétences !

    -

    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) Testez vos compétences: overflow.

    +

    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) Testez vos compétences: overflow.

    Résumé

    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

    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.

    -
    Prérequis :
    +
    @@ -121,8 +121,8 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut

    {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

    -
    -

    Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

    +
    +

    Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

    Pas suivants

    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

    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.

    -
    Prérequis :
    +
    - + @@ -29,7 +29,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs

    Le combinateur descendant— en général représenté par un seul espace ( ) — 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.

    -
    body article p
+
    body article p
 
    
 
 
    Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.
    
@@ -40,7 +40,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
    Le combinateur enfant (>) 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 <p> qui sont des enfants directs des éléments <article>:
    
 
-
    article > p
    
+
    article > 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 <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.
    
 
@@ -52,7 +52,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
    Le sélecteur de frère adjacent (+) 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 <img> qui viennent juste après les éléments <p>:
    
 
-
    p + img
    
+
    p + img
    
 
 
    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 <h1>, et le stylisons.
    
 
@@ -64,7 +64,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
    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 (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:
    
 
-
    p ~ img
    
+
    p ~ img
    
 
 
    Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.
    
 
@@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
    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 <ul>, je pourrais utiliser ce qui suit.
    
 
-
    ul > li[class="a"]  {  }
    
+
    ul > li[class="a"]  {  }
    
 
 
    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.
    
 
@@ -82,7 +82,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
 
    Testez vos compétences!
    
 
-
    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 Test your skills: Selectors.
    
+
    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 Test your skills: Selectors.
    
 
 
    Passer à la suite
    
 
@@ -93,10 +93,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs
 
    Dans ce module
    
 
 
      
- 
    1. Cascade et héritage
      2. 
- 
    2. Sélecteurs CSS
+ 
    3. Cascade et héritage
      4. 
+ 
    4. Sélecteurs CSS
   
    
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
 
 
    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.
    
 
-
    Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
    Objectif:
    +
    @@ -25,7 +25,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors

    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 sujet de ce sélecteur.

    -

    Du code où h1 est surligné.

    +

    Du code où h1 est surligné.

    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 h1, ou la classe .special.

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

    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

    -

    Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. 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.

    +

    Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. 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.

    -
    Prérequis :
    +
    - + @@ -35,7 +35,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

    Les pseudo-classes sont signalées par un mot clé commençant par deux points :

    -
    :pseudo-class-name
    +
    :pseudo-class-name

    Exemple d'une pseudo-classe élémentaire 

    @@ -50,17 +50,17 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

    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 :

    Pseudo-classes d'action utilisateur

    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 pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

    -

    :hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
    - :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

    +

    :hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
    + :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

    {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

    @@ -68,10 +68,10 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

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

    -
    ::pseudo-element-name
    +
    ::pseudo-element-name
    -
    -

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

    +
    +

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

    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.

    @@ -88,14 +88,14 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

    Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line 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 <p>, qui se trouve à l'intérieur d'un élément <article>

    -
    article p:first-child::first-line {
+
    article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
-}
    
+}

    Générer du contenu avec ::before et ::after

    -

    Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

    +

    Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

    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 ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

    @@ -139,7 +139,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-
    - + @@ -155,7 +155,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -171,7 +171,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -203,7 +203,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -215,7 +215,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -227,7 +227,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -307,7 +307,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- - + @@ -378,23 +378,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-

    Dans ce cours

      -
    1. Cascade and inheritance
      2. -
    2. CSS selectors +
    3. Cascade and inheritance
      4. +
    4. CSS selectors
      5. -
    5. The box model
      6. -
    6. Backgrounds and borders
      7. -
    7. Handling different text directions
      8. -
    8. Overflowing content
      9. -
    9. Values and units
      10. -
    10. Sizing items in CSS
      11. -
    11. Images, media, and form elements
      12. -
    12. Styling tables
      13. -
    13. Debugging CSS
      14. -
    14. Organizing your CSS
      15. +
    15. The box model
      16. +
    16. Backgrounds and borders
      17. +
    17. Handling different text directions
      18. +
    18. Overflowing content
      19. +
    19. Values and units
      20. +
    20. Sizing items in CSS
      21. +
    21. Images, media, and form elements
      22. +
    22. Styling tables
      23. +
    23. Debugging CSS
      24. +
    24. Organizing your CSS
    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

    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.

    -
    Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
    Objectif :
    {{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.Matches an <input> element whose input value is empty.
    {{ Cssxref(":checked") }}
    {{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
    {{ Cssxref(":disabled") }}
    {{ Cssxref(":first") }}In Paged Media, matches the first page.In Paged Media, matches the first page.
    {{ Cssxref(":first-child") }}
    {{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.Matches UI elements whose value is in an indeterminate state, usually checkboxes.
    {{ Cssxref(":in-range") }}
    {{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).Matches an element based on language (value of the HTML lang attribute).
    {{ Cssxref(":last-child") }}
    {{ Cssxref(":left") }}In Paged Media, matches left-hand pages.In Paged Media, matches left-hand pages.
    {{ Cssxref(":link")}}
    {{ Cssxref(":right") }}In Paged Media, matches right-hand pages.In Paged Media, matches right-hand pages.
    {{ Cssxref(":root") }}
    +
    @@ -39,7 +39,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class

    Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

    -

    On peut utiliser * 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 <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

    +

    On peut utiliser * 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 <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

    article :first-child {
 
@@ -84,7 +84,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
    {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
    
 
 
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    
 
 
    Prochain article
    
@@ -96,23 +96,23 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class
 
    Dans ce cours
    
 
 
      
- 
    1. Cascade and inheritance
      2. 
- 
    2. CSS selectors
+ 
    3. Cascade and inheritance
      4. 
+ 
    4. CSS selectors
   
  
      5. 
- 
    5. The box model
      6. 
- 
    6. Backgrounds and borders
      7. 
- 
    7. Handling different text directions
      8. 
- 
    8. Overflowing content
      9. 
- 
    9. Values and units
      10. 
- 
    10. Sizing items in CSS
      11. 
- 
    11. Images, media, and form elements
      12. 
- 
    12. Styling tables
      13. 
- 
    13. Debugging CSS
      14. 
- 
    14. Organizing your CSS
      15. 
+ 
    15. The box model
      16. 
+ 
    16. Backgrounds and borders
      17. 
+ 
    17. Handling different text directions
      18. 
+ 
    18. Overflowing content
      19. 
+ 
    19. Values and units
      20. 
+ 
    20. Sizing items in CSS
      21. 
+ 
    21. Images, media, and form elements
      22. 
+ 
    22. Styling tables
      23. 
+ 
    23. Debugging CSS
      24. 
+ 
    24. Organizing your CSS
      25. 
 
    
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
 
 
    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.
    
 
-
    Prérequis :
    +
    @@ -85,8 +85,8 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS

    Cette technique est utilisée pour rendre les images responsive, 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.

    -
    -

    Note : En savoir plus sur les techniques d'images responsives.

    +
    +

    Note : En savoir plus sur les techniques d'images responsives.

    Unités de la fenêtre d'affichage

    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
    {{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
    -

    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.

    +

    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.

    -
    Prérequis :
    +
    - + @@ -79,7 +79,7 @@ original_slug: Apprendre/CSS/Building_blocks/Styling_tables

    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 punk-bands-unstyled.html) :

    -

    Liste des groupes punk du Royaume Uni

    +

    Liste des groupes punk du Royaume Uni

    Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

    @@ -136,14 +136,14 @@ th, td {
  • Définir pour le tableau la valeur fixed 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 table-layout: fixed, 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 thead th:nth-child(n) ({{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 Fixed Table Layouts.

    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).
    • -
  • La valeur collapse 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 : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
    • +
  • La valeur collapse 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 : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
  • 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.
  • 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.

    • À ce stade, le tableau a déjà meilleure mine :

    -

    Première mise en forme du tableau

    +

    Première mise en forme du tableau

    Simple typographie

    @@ -194,7 +194,7 @@ tfoot th {

    Cela fait un peu plus propre :

    -

    Deuxième mise en forme : modifications des polices de caractères.

    +

    Deuxième mise en forme : modifications des polices de caractères.

    Graphisme et couleurs

    @@ -248,7 +248,7 @@ table {

    Et voici l'explosion de couleurs résultante :

    -

    Troisième mise en forme : coloriage agressif

    +

    Troisième mise en forme : coloriage agressif

    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.

    @@ -268,7 +268,7 @@ table {

    Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. 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 punk-bands-complete.html) :

    -

    Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

    +

    Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

    Apprentissage actif : mettez en page votre propre tableau

    @@ -303,6 +303,6 @@ table {
  • Encadrements
  • Mise en page des tableaux
  • Effets de boîte avancés
    • -
  • Création d'un en-tête de papier à lettre élégant
    • +
  • Création d'un en-tête de papier à lettre élégant
  • Une boîte d'aspect rafraîchissant
    • 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

    En CSS, tout élément est inclus dans une boîte ("box" 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 Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

    -
    Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
    Objectif :
    +
    @@ -57,8 +57,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

    Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type de positionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. 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 Flexbox, dont on reparlera plus tard.

    -
    -

    Note : 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 Disposition en ligne et en bloc.

    +
    +

    Note : 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 Disposition en ligne et en bloc.

    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 flex, ou encore grid.

    @@ -127,8 +127,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

    Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard.

    -
    -

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

    +
    +

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

    Le modèle de boîte CSS alternatif

    @@ -152,8 +152,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite box-sizing: inherit; } -
    -

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

    +
    +

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

    Manipuler les modèles de boîte

    @@ -164,8 +164,8 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite

    {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

    -
    -

    Note: vous pouvez trouver une solution ici.

    +
    +

    Note : vous pouvez trouver une solution ici.

    Utiliser les outils de développement pour voir le modèle de boîte

    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

    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.

    -
    Prérequis :
    +
    @@ -25,12 +25,12 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units

    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 <color> ou <length>. Quand vous voyez le type de valeur <color>, 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 <color>.

    -
    -

    Note : Vous verrez également des valeurs CSS appelées types de données. 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 valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

    +
    +

    Note : Vous verrez également des valeurs CSS appelées types de données. 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 valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

    -
    -

    Note : 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é color, comparée au type de données <color>). 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.

    +
    +

    Note : 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é color, comparée au type de données <color>). 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.

    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 rgb() :

    @@ -289,9 +289,8 @@ original_slug: Apprendre/CSS/Building_blocks/Values_and_units

    Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.

    -
    -

    Note :

    -

    Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (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 rgba() à des fonctions rgb() 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.

    +
    +

    Note : Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (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 rgba() à des fonctions rgb() 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.

    Valeurs HSL et HSLA

    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
    {{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
    -

    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.

    +

    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.

    -
    Prérequis :
    +
    - + @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

    Pourquoi Flexbox ?

    -

    Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

    +

    Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

    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 :

    @@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

    Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

    -

    Voici un exemple simple

    +

    Voici un exemple simple

    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 — flexbox0.html 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 voir en direct ici aussi.

    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.

    -

    Échantillon d'utilisation de flexbox

    +

    Échantillon d'utilisation de flexbox

    Détermination des éléments à disposer en boîtes flexibles

    @@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

    Voici le résultat :

    -

    Échantillon d'utilisation de flexbox

    +

    Échantillon d'utilisation de flexbox

    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.

    -

    Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

    +

    Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

    -

    Aparté sur le modèle flex

    +

    Aparté sur le modèle flex

    Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

    -

    Terminologie pour les boîtes modulables

    +

    Terminologie pour les boîtes modulables

    -
    -

    For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    +
    +

    Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    Flex Layout Three

    Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

    -

    A box centered inside another box.

    +

    A box centered inside another box.

    Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

    {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

    -
    -

    For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    +
    +

    Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    Flex Layout Four

    @@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills

    Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
     

    -

    A set of items displayed as rows.

    +

    A set of items displayed as rows.

    Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

    {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

    -
    -

    For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    +
    +

    Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

    Assessment or further help

    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
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
    -

    À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float 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.

    +

    À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float 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.

    -
    Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
    Objectif :
    +
    @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

    Contexte de boîtes flottantes

    -

    La propriété float 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.

    +

    La propriété float 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.

    -

    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 float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

    +

    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 float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

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

    @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

    Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

    - - 
    <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
 
 
    Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:
    
 
-
    
-
-
    
 
-
    {{ EmbedLiveSample('Float_1', '100%', 500) }}
    
+
    {{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}
    
 
 
    Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) 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.
    
 
@@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
 }
    -

    Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin 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 :

    +

    Visualiser le flottement

    -
    - -
    -

    {{ EmbedLiveSample('Float_2', '100%', 500) }}

    +

    {{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}

    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.

    @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } -
    - -
    -

    {{ EmbedLiveSample('Float_3', '100%', 600) }}

    +

    {{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}

    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é  clear accepte les valeurs suivantes :

    @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } -

    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.

    +

    Le problème

    -
    - -
    -

    {{ EmbedLiveSample('Float_4', '100%', 600) }}

    +

    {{ EmbedLiveSample('Le_problème', '100%', 600) }}

    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.

    @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

    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 <div> en dessous avec la règle clear: both.

    -
    - -
    -

    {{ EmbedLiveSample('Float_5', '100%', 600) }}

    +

    {{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}

    Utilisation du débordement

    @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; } -
    - -
    -

    {{ EmbedLiveSample('Float_6', '100%', 600) }}

    +

    {{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}

    Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (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.

    @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; } -
    - -
    -

    {{ EmbedLiveSample('Float_7', '100%', 600) }}

    +

    {{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}

    Résumé

    -

    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 Méthodes anciennes de mise en page 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.

    +

    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 Méthodes anciennes de mise en page 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.

    {{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

    Dans ce module

    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 ---
    {{LearnSidebar}}
    -

    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.

    +

    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.

    -
    Prérequis :
    +
    - - + + - - + +
    Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
    Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
    -

    dossier de projet

    +

    dossier de projet

    -

    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.

    +

    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.

    -

    +

    -

    configuration de base

    +

    configuration de base

    -

    Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

    +

    Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

    -

    Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier 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.

    +

    Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier 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.

    -

    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.

    +

    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.

    -

    +

    -

    Votre section detâches

    +

    Votre section de tâches

    -

    Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

    +

    Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

    -
      -
    1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
      2. -
    2. 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.
      3. -
    3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
      4. -
    4. Les éléments <article>et <aside>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.
      5. -
    5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
      6. +
        +
      1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
        2. +
      2. 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.
        3. +
      3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
        4. +
      4. Les éléments <article>et <aside>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.
        5. +
      5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
      -

      Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

      +

      Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

      -

      Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

      Notre nouveau résultat ressemble à :

      - -
      html {
+
 
-
      une liste ordonnée avec les puces intégrées au texte des éléments de la liste.
      
+
      une liste ordonnée avec les puces intégrées au texte des éléments de la liste.
      
 
 
      Utilisation d'une puce image personnalisée
      
 
@@ -179,7 +179,7 @@ dd {
   list-style-image: url(star.svg);
 }
      -

      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 Styliser les boîtes. Pour l'instant, voici un avant-goût !

      +

      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 Styliser les boîtes. Pour l'instant, voici un avant-goût !

      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 :

      @@ -213,7 +213,7 @@ ul li {

      Ceci nous donne le résultat suivant :

      -

      une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

      +

      une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

      Raccourci de style de liste

      @@ -269,7 +269,7 @@ ul li {

      Valeurs individualisées

      -

      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 :

      +

      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 :

      <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 {
 
      {{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}
      
 
 
      
-
      Note : 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 value.
      
+
      Note : 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 value.
      
 
      
 
 
      Apprentissage actif : définir le style d'une liste imbriquée
      
@@ -299,10 +299,7 @@ ul li {
 
 
      Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour voir une réponse possible.
      
 
-
 
-
      {{ EmbedLiveSample('Playable_code', 700, 800) }}
      
+
      {{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}
      
 
 
      Voir aussi
      
 
@@ -391,6 +388,6 @@ window.addEventListener("load", drawOutput);
  
    6. Initiation à la mise en forme du texte
      7. 
  
    7. Style de listes
      8. 
  
    8. Mise en forme des liens
      9. 
- 
    9. Polices de caractères web
      10. 
- 
    10. Composition d'une page d'accueil d'une école communale
      11. 
+ 
    11. Polices de caractères web
      12. 
+ 
    12. Composition d'une page d'accueil d'une école communale
      13. 
 
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
 
 
      {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
      
 
-
      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.
      
+
      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.
      
 
-
+
      
@@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 
      
-
      Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL 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 <style> de l'élément head du document.
      
+
      Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL 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 <style> de l'élément head du document.
      
 
      Énoncé de l'exercice
      
@@ -103,7 +103,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 
 
      La capture d'écran ci-après montre un exemple possible du design terminé :
      
 
-
      
+
      Évaluation
      
 
@@ -121,6 +121,6 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
  
    13. Initiation à la mise en forme du texte
    14. Style de listes
    15. Mise en forme des liens
      16. 
- 
    16. Polices de caractères web
      17. 
+ 
    17. Polices de caractères web
    18. Composition d'une page d'accueil d'une école de communauté
      19. 
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
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
      
 
-
      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.
      
+
      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.
      
 
-
      
  
   
      
    Prérequis :
 
 
 
 
 
 
  
  
  
 
      
+
      
-   
+   
@@ -61,7 +61,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
      
-
      Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
      
+
      Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
      
 
      Apprentissage actif : un exemple de fonte web
      
@@ -87,7 +87,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
      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.
      
-
      Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
      
+
      Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
      
 
      Créer le code requis
      
@@ -127,10 +127,10 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
 
      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.
      
 
-
      
+
      
-
      Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).
      
+
      Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).
      
 
      Utiliser un service de polices en ligne
      
@@ -151,7 +151,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
      
-
      Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).
      
+
      Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).
      
 
      @font-face plus en détail
      
@@ -179,7 +179,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
 
      
-
      Note : 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. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
      
+
      Note : 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. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
      
 
      Résumé
      
@@ -199,5 +199,5 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
  
    19. Style de listes
    20. Mise en forme des liens
    21. Polices de caractères web
      22. 
- 
    22. Composition d'une page d'accueil d'une école de communauté
      23. 
+ 
    23. Composition d'une page d'accueil d'une école de communauté
      24. 
-- 
cgit v1.2.3-54-g00ecf


      
  
   
      
    Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
   
      
   
      
    Objectif :