aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/tutorials
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/tutorials
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/tutorials')
-rw-r--r--files/fr/web/css/tutorials/index.md87
1 files changed, 40 insertions, 47 deletions
diff --git a/files/fr/web/css/tutorials/index.md b/files/fr/web/css/tutorials/index.md
index 58b0c426b2..4621b01771 100644
--- a/files/fr/web/css/tutorials/index.md
+++ b/files/fr/web/css/tutorials/index.md
@@ -8,50 +8,43 @@ tags:
- Tutorial
translation_of: Web/CSS/Tutorials
---
-<p>Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux <strong>tutoriels à propos de CSS</strong>. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.</p>
-
-<p>Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.</p>
-
-
-<h2 id="Beginner-level_CSS_tutorials">Tutoriels pour les débutants</h2>
-
-<dl>
- <dt><a href="/fr/docs/Learn/CSS/First_steps">Débuter en CSS</a></dt>
- <dd>Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Utiliser plusieurs arrière-plans</a></dt>
- <dd>Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images">Mise à l'échelle des images d'arrière-plan</a></dt>
- <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.</dd>
- <dt><a href="/fr/docs/Web/CSS/Media_Queries"><i>Media queries</i> (requêtes de média)</a></dt>
- <dd>La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les <i>Media queries</i> sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Comprendre le z-index</a></dt>
- <dd>Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.</dd>
-</dl>
-
-<h2 id="Intermediate-level_CSS_tutorials">Tutoriels de niveau intermédiaire</h2>
-
-<p>Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Compteurs CSS</a></dt>
- <dd>Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser <a href="/fr/docs/Web/CSS/counter-reset"><code>counter-reset</code></a>, <a href="/fr/docs/Web/CSS/counter-increment"><code>counter-increment</code></a>, <a href="/fr/docs/Web/CSS/counters()"><code>counters()</code></a>, et <a href="/fr/docs/Web/CSS/counter()"><code>counter()</code></a>.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Animations CSS</a></dt>
- <dd>Les animations CSS vous permettent de définir des configurations de style via des <i><a href="/fr/docs/Web/CSS/CSS_Animations">keyframes</a></i>, et de réaliser une transition entre elles pour définir une animation.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Transitions CSS</a></dt>
- <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Transformations CSS</a></dt>
- <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Dégradés CSS</a></dt>
- <dd>Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
-</dl>
-
-<h2 id="Advanced-level_CSS_tutorials">Tutoriels avancés</h2>
-
-<p>CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Mise en page avec les colonnes</a></dt>
- <dd>Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.</dd>
- <dt><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Mise en page avec les boîtes flexibles (<i>Flexbox</i>)</a></dt>
- <dd>Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.</dd>
-</dl>
+Apprendre CSS peut sembler une tâche impressionnante. Cependant, pour vous aider, nous avons écrit de nombreux **tutoriels à propos de CSS**. Certains d'entre eux sont à l'attention des non-initiés, tandis que d'autres présentent des fonctionnalités complexes qui peuvent être utiles aux utilisateurs expérimentés.
+
+Cette page liste l'ensemble des tutoriels, avec une courte description. Ils sont regroupés par complexité, de sorte que vous puissiez choisir le plus adapté à votre niveau.
+
+## Tutoriels pour les débutants
+
+- [Débuter en CSS](/fr/docs/Learn/CSS/First_steps)
+ - : Ce guide est destiné aux non-initiés : vous n'avez jamais écrit une seule ligne de CSS ? Cet article est pour vous ! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.
+- [Utiliser plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+ - : Les arrière-plans sont fondamentaux afin d'obtenir une mise en forme appréciable. CSS vous permet d'en définir plusieurs pour chaque boîte. Ce tutoriel explique comment les arrière-plans interagissent et comment utiliser ces interactions pour réaliser des effets.
+- [Mise à l'échelle des images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
+ - : CSS vous permet de redimensionner des images utilisées comme élément d'arrière-plan. Ce tutoriel décrit comment faire.
+- [_Media queries_ (requêtes de média)](/fr/docs/Web/CSS/Media_Queries)
+ - : La taille des écrans ou la nature des appareils varie grandement (cela va des écrans tactiles aux documents imprimés). Les _Media queries_ sont des briques fondamentales pour construire des sites web avec un rendu de grande qualité sur n'importe quel appareil.
+- [Comprendre le z-index](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index)
+ - : Cet indice vous permet de contrôler la superposition des boites qui sont affichées sur une page web. Vous verrez ici comment il est calculé et utilisé.
+
+## Tutoriels de niveau intermédiaire
+
+Certaines fonctionnalités, parfois plus récemment apparues, sont plus avancées. Une fois les bases acquises, vous pourrez les utiliser distinctement si besoin.
+
+- [Compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
+ - : Compter les éléments et pages est une tâche aisée en CSS. Apprenez à utiliser [`counter-reset`](/fr/docs/Web/CSS/counter-reset), [`counter-increment`](/fr/docs/Web/CSS/counter-increment), [`counters()`](</fr/docs/Web/CSS/counters()>), et [`counter()`](</fr/docs/Web/CSS/counter()>).
+- [Animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+ - : Les animations CSS vous permettent de définir des configurations de style via des _[keyframes](/fr/docs/Web/CSS/CSS_Animations)_, et de réaliser une transition entre elles pour définir une animation.
+- [Transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
+ - : Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la manière dont elles s'appliquent.
+- [Transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
+ - : Les transformations CSS vous permettent de changer la position d'éléments en modifiant leurs coordonnées spatiales. On peut ainsi réaliser des translations, rotations et déformations en espaces 3D et 2D.
+- [Dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+ - : Les dégradés CSS forment des images via un dégradé entre plusieurs couleurs. Il existe différents types de dégradés CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.
+
+## Tutoriels avancés
+
+CSS possède différentes méthodes pour organiser la disposition du contenu dans un document.
+
+- [Mise en page avec les colonnes](/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
+ - : Il est possible d'organiser une mise en page selon plusieurs colonnes. Si ce n'est pas une méthode visuelle fréquente pour les écrans, on la retrouve souvent sur les documents imprimés.
+- [Mise en page avec les boîtes flexibles (_Flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
+ - : Cette mise en page permet de donner de la flexibilité aux boîtes, celles-ci pouvant alors être redimensionnées de façon fluide.