From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../learn/css/howto/create_fancy_boxes/index.html | 303 --------------------- .../fr/learn/css/howto/create_fancy_boxes/index.md | 303 +++++++++++++++++++++ files/fr/learn/css/howto/css_faq/index.html | 247 ----------------- files/fr/learn/css/howto/css_faq/index.md | 247 +++++++++++++++++ .../learn/css/howto/generated_content/index.html | 67 ----- .../fr/learn/css/howto/generated_content/index.md | 67 +++++ files/fr/learn/css/howto/index.html | 84 ------ files/fr/learn/css/howto/index.md | 84 ++++++ 8 files changed, 701 insertions(+), 701 deletions(-) delete mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.html create mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.md delete mode 100644 files/fr/learn/css/howto/css_faq/index.html create mode 100644 files/fr/learn/css/howto/css_faq/index.md delete mode 100644 files/fr/learn/css/howto/generated_content/index.html create mode 100644 files/fr/learn/css/howto/generated_content/index.md delete mode 100644 files/fr/learn/css/howto/index.html create mode 100644 files/fr/learn/css/howto/index.md (limited to 'files/fr/learn/css/howto') diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html deleted file mode 100644 index 31db5f3ac9..0000000000 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Créer de belles boîtes -slug: Learn/CSS/Howto/create_fancy_boxes -translation_of: Learn/CSS/Howto/create_fancy_boxes -original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes ---- -

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

- -

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

- -

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

- -

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

- -
<div class="joli">Coucou ! Je veux être joli.</div>
- -

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

- - - -

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

- -

Jouer avec le modèle de boîte

- -

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

- -

Créer des cercles

- - - -

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

- -
.joli {
-  /* Mieux vaut centrer le texte dans un
-     cercle. */
-  text-align : center;
-
-  /* On fait attention à ce que le texte
-     ne touche pas la bordure. On placera
-     donc le texte avec un remplissage, ce
-     qui donnera une meilleure impression
-     pour le cercle. */
-  padding : 1em;
-
-  /* La bordure marquera le cercle. On
-     pourrait également utiliser un arrière-
-     plan car celui-ci aurait été contenu
-     par border-radius */
-  border : 0.5em solid black;
-
-  /* Assurons-nous que la boîte soit carrée
-     pour obtenir un cercle bien rond plutôt
-     qu'une ellipse ;) */
-  width  : 4em;
-  height : 4em;
-
-  /* Enfin, transformons le carré en cercle */
-  border-radius: 100%;
-}
- -

Et voilà comment on obtient un cercle :

- -

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

- -

Les arrière-plans

- -

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

- -

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

- - - - - -

Passons à la manipulation :

- -
.joli {
-  padding : 1em;
-  width: 100%;
-  height: 200px;
-  box-sizing: border-box;
-
-  /* La couche la plus basse sera
-     peinte avec un gris clair uni */
-  background-color: #E4E4D9;
-
-  /* Ensuite on applique des gradients
-     linéaires les uns sur les autres
-     pour créer un effet de bandes colorées.
-     Comme vous pouvez le voir, les gradients
-     sont considérés et manipulés comme des
-     images */
-  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
-}
- -

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

- -
-

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

-
- -

Les pseudo-éléments

- -

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

- -

Un nuage

- - - -

Voici un exemple qui illustre comment transformer la boîte en nuage :

- -
.joli {
-  text-align: center;
-
-  /* On utilise la même astuce que pour
-     cercles vus avant */
-  box-sizing: border-box;
-  width     : 150px;
-  height    : 150px;
-  padding   : 80px 1em 0 1em;
-
-  /* On fait de la place pour les « oreilles »
-     du nuage */
-  margin    : 0 100px;
-
-  position: relative;
-
-  background-color: #A4C9CF;
-
-  /* Enfin, le cercle n'est pas tout à fait complet
-     car on veut que la base soit plate.
-     Vous pouvez adapter ici comme bon vous semble
-     si vous souhaitez que la base ne soit pas
-     linéaire */
-  border-radius: 100% 100% 0 0;
-}
-
-/* Voici les styles qu'on appliquera aux deux
-   pseudo-éléments ::before et ::after. */
-.joli::before,
-.joli::after {
-  /* Cette déclaration est nécessaire pour afficher
-     les pseudo-éléments même si leur valeur est la
-     chaîne vide */
-  content: '';
-
-  /* On positionne les pseudo-éléments à droite et à
-     gauche de la boîte mais toujours en bas */
-  position: absolute;
-  bottom  : 0;
-
-  /* On s'assure que les pseudo-éléments passent sous
-     le contenu qu'il y aurait. */
-  z-index : -1;
-
-  background-color: #A4C9CF;
-  border-radius: 100%;
-}
-
-.joli::before {
-  /* Voici la taille pour l'oreille gauche
-     du nuage */
-  width  : 125px;
-  height : 125px;
-
-  /* On la décale un peu à gauche */
-  left    : -80px;
-
-  /* Pour que le bas du nuage reste droit, il
-     faut s'assurer que le coin en bas à gauche
-     soit bien un angle droit. */
-  border-bottom-right-radius: 0;
-}
-
-.joli::after {
-  /* Voici la taille pour l'oreille droite */
-  width  : 100px;
-  height : 100px;
-
-  /* On la décale un peu à droite */
-  right   : -60px;
-
- /* Pour que le bas du nuage reste droit, il
-    faut s'assurer que le coin en bas à droite
-    soit bien un angle droit. */
-  border-bottom-left-radius: 0;
-}
- -

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

- -

Une citation

- -

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

- -
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
-<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
- -

Voici la feuille de style que nous allons utiliser :

- -
blockquote {
-  min-height: 5em;
-  padding   : 1em 4em;
-  font      : 1em/150% sans-serif;
-  position  : relative;
-  background-color: lightgoldenrodyellow;
-}
-
-blockquote::before,
-blockquote::after {
-  position: absolute;
-  height  : 3rem;
-  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
-}
-
-blockquote::before {
-  content: '“';
-  top    : 0.3rem;
-  left   : 0.9rem;
-}
-
-blockquote::after {
-  content: '”';
-  bottom : 0.3rem;
-  right  : 0.8rem;
-}
-
-blockquote:lang(fr)::before {
-  content: '«';
-  top    : -1.5rem;
-  left   : 0.5rem;
-}
-
-blockquote:lang(fr)::after {
-  content: '»';
-  bottom : 2.6rem;
-  right  : 0.5rem
-}
-
-blockquote i {
-  display   : block;
-  font-size : 0.8em;
-  margin-top: 1rem;
-  text-style: italic;
-  text-align: right;
-}
- -

{{EmbedLiveSample('Une_citation', '100%', '300')}}

- -

Assemblage

- -

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

- - - -

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

- -
.joli {
-  position: relative;
-  background-color: #FFC;
-  padding: 2rem;
-  text-align: center;
-  max-width: 200px;
-}
-
-.joli::before {
-  content: "";
-
-  position : absolute;
-  z-index  : -1;
-  bottom   : 15px;
-  right    : 5px;
-  width    : 50%;
-  top      : 80%;
-  max-width: 200px;
-
-  box-shadow: 0px 13px 10px black;
-  transform: rotate(4deg);
-}
- -

{{EmbedLiveSample("Assemblage", '100%', '100')}}

- -

La suite

- -

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md new file mode 100644 index 0000000000..31db5f3ac9 --- /dev/null +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -0,0 +1,303 @@ +--- +title: Créer de belles boîtes +slug: Learn/CSS/Howto/create_fancy_boxes +translation_of: Learn/CSS/Howto/create_fancy_boxes +original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes +--- +

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

+ +

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

+ +

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

+ +

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

+ +
<div class="joli">Coucou ! Je veux être joli.</div>
+ +

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

+ + + +

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

+ +

Jouer avec le modèle de boîte

+ +

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

+ +

Créer des cercles

+ + + +

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

+ +
.joli {
+  /* Mieux vaut centrer le texte dans un
+     cercle. */
+  text-align : center;
+
+  /* On fait attention à ce que le texte
+     ne touche pas la bordure. On placera
+     donc le texte avec un remplissage, ce
+     qui donnera une meilleure impression
+     pour le cercle. */
+  padding : 1em;
+
+  /* La bordure marquera le cercle. On
+     pourrait également utiliser un arrière-
+     plan car celui-ci aurait été contenu
+     par border-radius */
+  border : 0.5em solid black;
+
+  /* Assurons-nous que la boîte soit carrée
+     pour obtenir un cercle bien rond plutôt
+     qu'une ellipse ;) */
+  width  : 4em;
+  height : 4em;
+
+  /* Enfin, transformons le carré en cercle */
+  border-radius: 100%;
+}
+ +

Et voilà comment on obtient un cercle :

+ +

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

+ +

Les arrière-plans

+ +

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

+ +

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

+ + + + + +

Passons à la manipulation :

+ +
.joli {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* La couche la plus basse sera
+     peinte avec un gris clair uni */
+  background-color: #E4E4D9;
+
+  /* Ensuite on applique des gradients
+     linéaires les uns sur les autres
+     pour créer un effet de bandes colorées.
+     Comme vous pouvez le voir, les gradients
+     sont considérés et manipulés comme des
+     images */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}
+ +

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

+ +
+

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

+
+ +

Les pseudo-éléments

+ +

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

+ +

Un nuage

+ + + +

Voici un exemple qui illustre comment transformer la boîte en nuage :

+ +
.joli {
+  text-align: center;
+
+  /* On utilise la même astuce que pour
+     cercles vus avant */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* On fait de la place pour les « oreilles »
+     du nuage */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* Enfin, le cercle n'est pas tout à fait complet
+     car on veut que la base soit plate.
+     Vous pouvez adapter ici comme bon vous semble
+     si vous souhaitez que la base ne soit pas
+     linéaire */
+  border-radius: 100% 100% 0 0;
+}
+
+/* Voici les styles qu'on appliquera aux deux
+   pseudo-éléments ::before et ::after. */
+.joli::before,
+.joli::after {
+  /* Cette déclaration est nécessaire pour afficher
+     les pseudo-éléments même si leur valeur est la
+     chaîne vide */
+  content: '';
+
+  /* On positionne les pseudo-éléments à droite et à
+     gauche de la boîte mais toujours en bas */
+  position: absolute;
+  bottom  : 0;
+
+  /* On s'assure que les pseudo-éléments passent sous
+     le contenu qu'il y aurait. */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.joli::before {
+  /* Voici la taille pour l'oreille gauche
+     du nuage */
+  width  : 125px;
+  height : 125px;
+
+  /* On la décale un peu à gauche */
+  left    : -80px;
+
+  /* Pour que le bas du nuage reste droit, il
+     faut s'assurer que le coin en bas à gauche
+     soit bien un angle droit. */
+  border-bottom-right-radius: 0;
+}
+
+.joli::after {
+  /* Voici la taille pour l'oreille droite */
+  width  : 100px;
+  height : 100px;
+
+  /* On la décale un peu à droite */
+  right   : -60px;
+
+ /* Pour que le bas du nuage reste droit, il
+    faut s'assurer que le coin en bas à droite
+    soit bien un angle droit. */
+  border-bottom-left-radius: 0;
+}
+ +

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

+ +

Une citation

+ +

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

+ +
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
+<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
+ +

Voici la feuille de style que nous allons utiliser :

+ +
blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}
+ +

{{EmbedLiveSample('Une_citation', '100%', '300')}}

+ +

Assemblage

+ +

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

+ + + +

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

+ +
.joli {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.joli::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}
+ +

{{EmbedLiveSample("Assemblage", '100%', '100')}}

+ +

La suite

+ +

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/learn/css/howto/css_faq/index.html b/files/fr/learn/css/howto/css_faq/index.html deleted file mode 100644 index 75479dfb18..0000000000 --- a/files/fr/learn/css/howto/css_faq/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Questions fréquentes en CSS -slug: Learn/CSS/Howto/CSS_FAQ -tags: - - CSS - - Débutant - - Exemple - - Guide -translation_of: Learn/CSS/Howto/CSS_FAQ -original_slug: Web/CSS/CSS_questions_frequentes ---- -

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

- -

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

- -

Les navigateurs modernes ont deux modes de rendu :

- - - -

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

- -

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

- -
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
-                   navigateur moderne utilise un parseur HTML5, c'est le
-                   doctype recommandé. */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"https://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"https://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- -

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

- -

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

- -

Quelle est la différence entre id et class ?

- -

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

- -

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

- -

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

- -

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

- -

Voire Les sélecteurs CSS.

- -

Comment revenir à la valeur par défaut d'un propriété ?

- -

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

- -

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

- -

Comment créer un style dérivant d'un autre ?

- -

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

- -

Comment  assigner de multiples classes à un élément?

- -

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

- -

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

- -

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

- -

Hiérarchie des éléments HTML

- -

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

- -
.news {
-  color: black;
-}
-
-.corpName {
-  font-weight: bold;
-  color: red;
-}
-
- -
<!-- Le texte de l'annonce est en noir
-     mais le nom de l'entreprise est
-     en rouge gras -->
-<div class="news"> (Reuters)
-   <span class="corpName">General Electric</span>
-  (GE.NYS) announced on Thursday...
-</div>
-
- -

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

- -

L'ordre et la redéfinition des règles

- -

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

- -
#stockTicker {
-  font-weight: bold;
-}
-.stockSymbol {
-  color: red;
-}
-/*  D'autres règles             */
-/*  D'autres règles             */
-/*  D'autres règles             */
-.stockSymbol {
-  font-weight: normal;
-}
-
- -

 

- -
<!-- La plupart du texte est en gras sauf "GE",
-     qui est en rouge et sans graisse -->
-<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
-
-
- -

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

- -

Utiliser les propriétés raccourcies

- -

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

- -
#stockTicker {
-  font-size: 12px;
-  font-family: Verdana;
-  font-weight: bold;
-}
-
-.stockSymbol {
-  font: 14px Arial;
-  color: red;
-}
-
- -
<div id="stockTicker">
-  NYS:
-  <span class="stockSymbol">
-    GE
-  </span>
-  +1.0 ...
-</div>
- -

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

- -
#stockTicker {
-  font-weight: bold;
-  font: 12px Verdana;
-  /* font-weight vaut maintenant normal */
-}
-
- -

Utiliser le sélecteur *

- -

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

- -
body * {
-  font-weight: normal;
-}
-
-#stockTicker {
-  font: 12px Verdana;
-}
-
-.corpName {
-  font-weight: bold;
-}
-
-.stockUp {
-  color: red;
-}
-
- -
<div id="section">
-  NYS:
-  <span class="corpName">
-    <span class="stockUp">
-      GE
-    </span>
-  </span>
-  +1.0 ...
-</div>
- -

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

- -

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

- -

La spécificité en CSS

- -

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

- -
div {
-  color: black;
-}
-
-#orange {
-  color: orange;
-}
-
-.green {
-  color: green;
-}
-
- -
<div id="orange" class="green" style="color: red;">
-  Voici quelque chose qui sera rouge.
-</div>
- -

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

- -

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

- -

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

- -

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

- -

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

- -

Quel est l'impact de z-index sur le positionnement des éléments ?

- -

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

- -

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

- -

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md new file mode 100644 index 0000000000..75479dfb18 --- /dev/null +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -0,0 +1,247 @@ +--- +title: Questions fréquentes en CSS +slug: Learn/CSS/Howto/CSS_FAQ +tags: + - CSS + - Débutant + - Exemple + - Guide +translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/CSS_questions_frequentes +--- +

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

+ +

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

+ +

Les navigateurs modernes ont deux modes de rendu :

+ + + +

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

+ +

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

+ +
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ +

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

+ +

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

+ +

Quelle est la différence entre id et class ?

+ +

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

+ +

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

+ +

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

+ +

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

+ +

Voire Les sélecteurs CSS.

+ +

Comment revenir à la valeur par défaut d'un propriété ?

+ +

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

+ +

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

+ +

Comment créer un style dérivant d'un autre ?

+ +

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

+ +

Comment  assigner de multiples classes à un élément?

+ +

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

+ +

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

+ +

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

+ +

Hiérarchie des éléments HTML

+ +

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

+ +
.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+
+ +
<!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras -->
+<div class="news"> (Reuters)
+   <span class="corpName">General Electric</span>
+  (GE.NYS) announced on Thursday...
+</div>
+
+ +

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

+ +

L'ordre et la redéfinition des règles

+ +

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

+ +
#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+
+ +

 

+ +
<!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse -->
+<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
+
+
+ +

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

+ +

Utiliser les propriétés raccourcies

+ +

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

+ +
#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+
+ +
<div id="stockTicker">
+  NYS:
+  <span class="stockSymbol">
+    GE
+  </span>
+  +1.0 ...
+</div>
+ +

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

+ +
#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+
+ +

Utiliser le sélecteur *

+ +

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

+ +
body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+
+ +
<div id="section">
+  NYS:
+  <span class="corpName">
+    <span class="stockUp">
+      GE
+    </span>
+  </span>
+  +1.0 ...
+</div>
+ +

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

+ +

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

+ +

La spécificité en CSS

+ +

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

+ +
div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+
+ +
<div id="orange" class="green" style="color: red;">
+  Voici quelque chose qui sera rouge.
+</div>
+ +

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

+ +

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

+ +

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

+ +

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

+ +

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

+ +

Quel est l'impact de z-index sur le positionnement des éléments ?

+ +

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

+ +

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

+ +

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html deleted file mode 100644 index aa8656013b..0000000000 --- a/files/fr/learn/css/howto/generated_content/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Contenu -slug: Learn/CSS/Howto/Generated_content -tags: - - CSS - - CSS:Premiers_pas -translation_of: Learn/CSS/Howto/Generated_content -original_slug: Apprendre/CSS/Comment/Generated_content ---- -

{{LearnSidebar}}

- -

Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.

- -

L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.

- -
-

Note : Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.

-
- -

Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.

- -

Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.

- -

Exemples

- -

Contenu textuel

- -

CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.

- -

HTML

- -
Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
-
- -

CSS

- -
.ref::before {
-  font-weight: bold;
-  color: navy;
-  content: "Réference ";
-}
- -

Résultat

- -

{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}

- -

L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

- -

Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

- -

Contenu_avec_une_image

- -

Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.

- -

Cette règle ajoute un espace et une icône après chaque lien qui possède la classe glossary :

- -

HTML

- -
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
- -

CSS

- -
a.glossary::after {
-   content: " " url("glossary-icon.gif");
-}
- -

{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}

diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md new file mode 100644 index 0000000000..aa8656013b --- /dev/null +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -0,0 +1,67 @@ +--- +title: Contenu +slug: Learn/CSS/Howto/Generated_content +tags: + - CSS + - CSS:Premiers_pas +translation_of: Learn/CSS/Howto/Generated_content +original_slug: Apprendre/CSS/Comment/Generated_content +--- +

{{LearnSidebar}}

+ +

Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.

+ +

L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.

+ +
+

Note : Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.

+
+ +

Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.

+ +

Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.

+ +

Exemples

+ +

Contenu textuel

+ +

CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.

+ +

HTML

+ +
Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
+
+ +

CSS

+ +
.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Réference ";
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}

+ +

L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

+ +

Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

+ +

Contenu_avec_une_image

+ +

Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.

+ +

Cette règle ajoute un espace et une icône après chaque lien qui possède la classe glossary :

+ +

HTML

+ +
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
+ +

CSS

+ +
a.glossary::after {
+   content: " " url("glossary-icon.gif");
+}
+ +

{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}

diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html deleted file mode 100644 index d14cb33a16..0000000000 --- a/files/fr/learn/css/howto/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Apprendre à utiliser CSS pour résoudre des problèmes -slug: Learn/CSS/Howto -tags: - - Apprendre - - CSS - - Débutant -translation_of: Learn/CSS/Howto -original_slug: Apprendre/CSS/Comment ---- -

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

- -

Scénarios fréquents

- -

Bases

- - - -

CSS et texte

- - - - -

Boîtes et mises en page

- - - -

Techniques avancées ou peu communes

- -

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

- -

Général

- - - -

Effets avancés

- - - -

Mise en page

- - - -

Voir aussi

- -

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md new file mode 100644 index 0000000000..d14cb33a16 --- /dev/null +++ b/files/fr/learn/css/howto/index.md @@ -0,0 +1,84 @@ +--- +title: Apprendre à utiliser CSS pour résoudre des problèmes +slug: Learn/CSS/Howto +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto +original_slug: Apprendre/CSS/Comment +--- +

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

+ +

Scénarios fréquents

+ +

Bases

+ + + +

CSS et texte

+ + + + +

Boîtes et mises en page

+ + + +

Techniques avancées ou peu communes

+ +

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

+ +

Général

+ + + +

Effets avancés

+ + + +

Mise en page

+ + + +

Voir aussi

+ +

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

-- cgit v1.2.3-54-g00ecf