From faa96e657621455284245018b8a3b5050b613e6b Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:47 +0100 Subject: convert content to md --- .../building_blocks/a_cool_looking_box/index.md | 112 ++-- .../advanced_styling_effects/index.md | 357 +++++----- .../backgrounds_and_borders/index.md | 375 ++++++----- .../css/building_blocks/box_model_tasks/index.md | 91 ++- .../cascade_and_inheritance/index.md | 400 +++++------- .../creating_fancy_letterheaded_paper/index.md | 127 ++-- .../css/building_blocks/debugging_css/index.md | 245 +++---- .../fundamental_css_comprehension/index.md | 165 +++-- .../handling_different_text_directions/index.md | 192 +++--- files/fr/learn/css/building_blocks/index.md | 106 ++- .../building_blocks/overflowing_content/index.md | 159 ++--- .../selectors/attribute_selectors/index.md | 245 +++---- .../building_blocks/selectors/combinators/index.md | 160 +++-- .../learn/css/building_blocks/selectors/index.md | 287 ++++---- .../pseudo-classes_and_pseudo-elements/index.md | 529 +++++---------- .../selectors/type_class_and_id_selectors/index.md | 156 +++-- .../building_blocks/sizing_items_in_css/index.md | 149 +++-- .../css/building_blocks/styling_tables/index.md | 328 +++++----- .../css/building_blocks/the_box_model/index.md | 435 +++++++------ .../css/building_blocks/values_and_units/index.md | 456 ++++++------- files/fr/learn/css/css_layout/flexbox/index.md | 385 +++++------ .../learn/css/css_layout/flexbox_skills/index.md | 103 ++- files/fr/learn/css/css_layout/floats/index.md | 370 ++++++----- .../fundamental_layout_comprehension/index.md | 108 ++-- files/fr/learn/css/css_layout/grids/index.md | 577 +++++++++-------- files/fr/learn/css/css_layout/index.md | 97 ++- .../fr/learn/css/css_layout/introduction/index.md | 653 ++++++++++--------- .../css/css_layout/legacy_layout_methods/index.md | 626 +++++++++--------- .../fr/learn/css/css_layout/media_queries/index.md | 452 +++++++------ .../css/css_layout/multiple-column_layout/index.md | 403 ++++++------ files/fr/learn/css/css_layout/normal_flow/index.md | 120 ++-- files/fr/learn/css/css_layout/positioning/index.md | 491 +++++++------- .../practical_positioning_examples/index.md | 411 ++++++------ .../css/css_layout/responsive_design/index.md | 353 +++++----- .../css_layout/supporting_older_browsers/index.md | 254 ++++---- .../learn/css/first_steps/getting_started/index.md | 319 +++++---- .../css/first_steps/how_css_is_structured/index.md | 513 ++++++++------- .../learn/css/first_steps/how_css_works/index.md | 200 +++--- files/fr/learn/css/first_steps/index.md | 58 +- .../first_steps/using_your_new_knowledge/index.md | 133 ++-- .../fr/learn/css/first_steps/what_is_css/index.md | 142 ++-- .../fr/learn/css/howto/create_fancy_boxes/index.md | 140 ++-- files/fr/learn/css/howto/css_faq/index.md | 214 +++--- .../fr/learn/css/howto/generated_content/index.md | 65 +- files/fr/learn/css/howto/index.md | 101 ++- files/fr/learn/css/index.md | 74 +-- .../learn/css/styling_text/fundamentals/index.md | 719 ++++++++++----------- files/fr/learn/css/styling_text/index.md | 42 +- .../learn/css/styling_text/styling_links/index.md | 354 +++++----- .../learn/css/styling_text/styling_lists/index.md | 482 +++++++------- .../styling_text/typesetting_a_homepage/index.md | 144 ++--- files/fr/learn/css/styling_text/web_fonts/index.md | 242 ++++--- 52 files changed, 7240 insertions(+), 7179 deletions(-) (limited to 'files/fr/learn/css') diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md index da13496b05..5be0014eeb 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md @@ -14,86 +14,80 @@ tags: translation_of: Learn/CSS/Building_blocks/A_cool_looking_box original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} -
{{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. - - - - - - - - - - + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.
Prérequis : + Avant de faire cet exercice vous devez avoir vu tous les articles de ce + module. +
Objectif : + Tester votre compréhension du modèle de boîte CSS et toutes les + fonctionnalités associées comme les encadrements et les arrière‑plans. +
-

Départ

+## Départ + +Pour débuter, vous devez : -

Pour débuter, vous devez :

+- faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. - +> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) 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 ` + + +

Hello World!

+

Ceci est mon premier exemple CSS

+ + +``` -

Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier style.css). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.

+Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier `style.css`). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier. -

Styles en ligne

+### Styles en ligne -

Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut style:

+Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut `style`: -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mes expérimentations CSS</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
-    <p style="color:red;">Ceci est mon premier exemple CSS</p>
-  </body>
-</html>
+```html + + + + + Mes expérimentations CSS + + +

Hello World!

+

Ceci est mon premier exemple CSS

+ + +``` -

Cette approche est vraiment à proscrire ! Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.

+**Cette approche est vraiment à proscrire !** Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile. -

Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.

+Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible. -

Jouer avec le CSS de cet article

+## Jouer avec le CSS de cet article -

Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :

+Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants : -

index.html :

+**index.html** : -
<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Mes expériences CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
+```html
+
+
+  
+    
+    Mes expériences CSS
+    
+  
+  
 
-    <p>Créez votre test ici !</p>
+    
Créez votre test ici !

 
-  </body>
-</html>
+ + +``` -

styles.css :

+**styles.css** : -
/* Créez votre test CSS ici */
+```css
+/* Créez votre test CSS ici */
 
 p {
   color: red;
-}
+} +``` -

Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <body>…</body> dans le fichier index.html ; ajoutez les règles CSS dans la feuille styles.css.

+Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises ``…`` dans le fichier `index.html` ; ajoutez les règles CSS dans la feuille `styles.css`. -

Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.

+Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences. -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}}

+{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} -

Bonne lecture !

+Bonne lecture ! -

Sélecteurs

+## Sélecteurs -

Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel Démarrer avec CSS. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.

+Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez. -

Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.

+Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs. -
h1
+```css
+h1
 a:link
 .manythings
 #onething
 *
 .box p
 .box p:first-child
-h1, h2, .intro
+h1, h2, .intro +``` -

Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !

+Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN ! -
-

Note : Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur les sélecteurs CSS, dans un prochain cours.

-
+> **Note :** Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur [les sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors), dans un prochain cours. -

Spécificité

+### Spécificité -

Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur p qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe special.

+Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur `p` qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe `special`. -
.special {
+```css
+.special {
   color: red;
 }
 
 p {
   color: blue;
-}
+} +``` -

Disons que dans notre document HTML, nous avons un paragraphe avec un attribut class valant special. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?

+Disons que dans notre document HTML, nous avons un paragraphe avec un attribut `class` valant `special`. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ? -
<p class="special">De quelle couleur suis-je?</p>
+```html +

De quelle couleur suis-je?

+``` -

Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées cascade et spécificité. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur p, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la cascade en action.

+Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées **cascade** et **spécificité**. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur `p`, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la _cascade_ en action. -
p {
+```css
+p {
   color: red;
 }
 
 p {
   color: blue;
-}
+} +``` -

Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de spécificité que le sélecteur d'élément, elle gagne donc.

+Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de _spécificité_ que le sélecteur d'élément, elle gagne donc. -

Tentez vous-même l'expérience ci-dessus — ajoutez le code HTML à votre expérience, puis ajoutez les deux règles p {…} à votre feuille de style. Ensuite, changez le premier sélecteur p en .special pour voir comment il affecte le style.

+**Tentez vous-même l'expérience ci-dessus** — **ajoutez le code HTML à votre expérience, puis ajoutez les deux règles `p {…}` à votre feuille de style. Ensuite, changez le premier sélecteur `p` en `.special`pour voir comment il affecte le style.** -

Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article Cascade et héritage vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.

+Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article [Cascade et héritage](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents. -

Propriétés et valeurs

+## Propriétés et valeurs -

Au niveau le plus fondamental, CSS se compose de deux blocs de construction :

+Au niveau le plus fondamental, CSS se compose de deux blocs de construction : - +- **Propriétés** : des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques ([`font-size`](/fr/docs/Web/CSS/font-size), [`width`](/fr/docs/Web/CSS/width), [`background-color`](/fr/docs/Web/CSS/background-color), par exemple) que vous souhaitez modifier ; +- **Valeurs** : une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan). -

L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est color et la valeur blue.

+L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est `color` et la valeur `blue`. -

Une déclaration surlignée au sein du code CSS

+![Une déclaration surlignée au sein du code CSS](declaration.png) -

Une propriété associée à une valeur s'appelle une déclaration CSS. Les déclarations CSS sont placées dans des blocs de déclaration CSS. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.

+Une propriété associée à une valeur s'appelle une _déclaration CSS_. Les déclarations CSS sont placées dans des _blocs de déclaration CSS_. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance. -

Un bloc de déclaration surligné

+![Un bloc de déclaration surligné](declaration-block.png) -

Enfin, les blocs de déclaration CSS sont associés à des sélecteurs pour produire des ensembles de règles CSS (ou règles CSS). L'image contient deux règles, une pour le sélecteur h1 et une pour le sélecteur p. La règle pour h1 est mise en surbrillance.

+Enfin, les blocs de déclaration CSS sont associés à des _sélecteurs_ pour produire des _ensembles de règles CSS_ (ou _règles CSS_). L'image contient deux règles, une pour le sélecteur `h1` et une pour le sélecteur `p`. La règle pour `h1` est mise en surbrillance. -

La règle ciblant h1 est surlignée

+![La règle ciblant h1 est surlignée](rules.png) -

Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (:).

+Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (`:`). -

Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :

+**Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :** - +- **[`font-size`](/fr/docs/Web/CSS/font-size)** +- **[`width`](/fr/docs/Web/CSS/width)** +- **[`background-color`](/fr/docs/Web/CSS/background-color)** +- **[`color`](/fr/docs/Web/CSS/color)** +- **[`border`](/fr/docs/Web/CSS/border)** -
-

Attention : Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et complètement ignorée par le moteur CSS du navigateur.

-
+> **Attention :** Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme _invalide_ et complètement ignorée par le moteur CSS du navigateur. -
-

Attention : En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit toujours être notée color. couleur ne fonctionnera pas.

-
+> **Attention :** En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit _toujours_ être notée `color`. `couleur` ne fonctionnera pas. -

Fonctions

+### Fonctions -

Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction calc(). Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :

+Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction `calc()`. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple : -

Exemple calc

+#### Exemple calc -
<div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div>
+```html +
la boite interne vaut 90% - 30px.
+``` -
.outer {
+```css
+.outer {
   border: 5px solid black;
 }
 
@@ -268,51 +298,59 @@ p {
   width: calc(90% - 30px);
   background-color: rebeccapurple;
   color: white;
-}
+} +``` -

La page devrait s'afficher comme ceci :

+La page devrait s'afficher comme ceci : -

{{EmbedLiveSample('Exemple_calc', '100%', 200)}}

+{{EmbedLiveSample('Exemple_calc', '100%', 200)}} -

Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple calc() ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.

+Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple `calc()` ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement. -

Un autre exemple serait les différentes valeurs de la propriété <transform>, telles que rotate().

+Un autre exemple serait les différentes valeurs de la propriété [``](/fr/docs/Web/CSS/), telles que `rotate()`. -

Exemple transform

+#### Exemple transform -
<div class="box"></div>
+```html +
+``` -
.box {
+```css
+.box {
   margin: 30px;
   width: 100px;
   height: 100px;
   background-color: rebeccapurple;
   transform: rotate(0.8turn)
-}
+} +``` + +La page devrait s'afficher comme ceci : -

La page devrait s'afficher comme ceci :

+{{EmbedLiveSample('Exemple_transform', '100%', 200)}} -

{{EmbedLiveSample('Exemple_transform', '100%', 200)}}

+**Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :** -

Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :

+- **[`transform`](/fr/docs/Web/CSS/transform)** +- **[`background-image`](/fr/docs/Web/CSS/background-image), en particulier les valeurs de dégradé** +- **[`color`](/fr/docs/Web/CSS/color), en particulier les valeurs rgb/rgba/hsl/hsla** - +## @rules -

@rules

e -

Nous n'avons pas rencontré jusqu'ici les @rules (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines @rules simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera @import :

-
@import 'styles2.css';
+Nous n'avons pas rencontré jusqu'ici les [`@rules`](/fr/docs/Web/CSS/At-rule) (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines `@rules` simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera `@import` : -

L'une des @rules les plus fréquemment rencontrée est @media, qui permet d'utiliser les media queries pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).

+```css +@import 'styles2.css'; +``` -

Dans le CSS ci-dessous, une règle donne à l'élément <body> un fond rose. La section @media ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.

+L'une des `@rules` les plus fréquemment rencontrée est `@media`, qui permet d'utiliser les [media queries](/fr/docs/Web/CSS/Media_Queries) pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur). -
body {
+Dans le CSS ci-dessous, une règle donne à l'élément `` un fond rose. La section `@media` ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.
+
+```css
+body {
   background-color: pink
 }
 
@@ -320,58 +358,66 @@ e
   body {
     background-color: blue;
   }
-}
+} +``` -

Tout au long de nos tutoriels CSS, vous rencontrerez d'autres @rules.

+Tout au long de nos tutoriels CSS, vous rencontrerez d'autres `@rules`. -

Ajoutez une media query à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.

+**Ajoutez une media query à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.** -

Raccourcis

+## Raccourcis -

Certaines propriétés comme font, background, padding, border, ou margin sont appelées propriétés raccourci — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.

+Certaines propriétés comme [`font`](/fr/docs/Web/CSS/font), [`background`](/fr/docs/Web/CSS/background), [`padding`](/fr/docs/Web/CSS/padding), [`border`](/fr/docs/Web/CSS/border), ou [`margin`](/fr/docs/Web/CSS/margin) sont appelées **propriétés raccourci** — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli. -

Par exemple, la ligne suivante :

+Par exemple, la ligne suivante : -
/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
+```css
+/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
    dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
    Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
    pour top/bottom, puis left/right */
-padding: 10px 15px 15px 5px;
+padding: 10px 15px 15px 5px; +``` -

produit le même effet que les quatre lignes suivantes réunies :

+produit le même effet que les quatre lignes suivantes réunies : -
padding-top: 10px;
+```css
+padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
-padding-left: 5px;
+padding-left: 5px; +``` -

Alors que :

+Alors que : -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+```css +background: red url(bg-graphic.png) 10px 10px repeat-x fixed; +``` -

produit la même chose que tout ce qui suit :

+produit la même chose que tout ce qui suit : -
background-color: red;
+```css
+background-color: red;
 background-image: url(bg-graphic.png);
 background-position: 10px 10px;
 background-repeat: repeat-x;
-background-scroll: fixed;
+background-scroll: fixed; +``` -

Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre référence CSS pour en savoir plus.

+Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre [référence CSS](/fr/docs/Web/CSS/Reference) pour en savoir plus. -

Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.

+**Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.** -
-

Attention : Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.

-
+> **Attention :** Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument. -

Commentaires

+## Commentaires -

En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.

+En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus. -

En CSS le début des commentaires est signalé par /* et la fin par */. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.

+En CSS le début des commentaires est signalé par `/*` et la fin par `*/`. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier. -
/* mise en forme des éléments de base */
+```css
+/* mise en forme des éléments de base */
 /* -------------------------------------------------------------------------------------------- */
 body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -405,27 +451,31 @@ div p{
 
 div p + p {
   padding-top: 0;
-}
+} +``` -

Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur .special a été désactivée par des commentaires :

+Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur `.special` a été désactivée par des commentaires : -
/*.special {
+```css
+/*.special {
   color: red;
 }*/
 
 p {
   color: blue;
-}
+} +``` -

Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.

+**Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.** -

Espace

+## Espace -

On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.

+On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible. -

L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.

+L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code. -
body {
+```css
+body {
   font: 1em/150% Helvetica, Arial, sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -456,11 +506,12 @@ div p {
 div p + p {
   padding-top: 0;
 }
-
+``` -

On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !

+On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain ! -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+```css
+body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
 
 h1 {font-size: 1.5em;}
@@ -468,38 +519,40 @@ h1 {font-size: 1.5em;}
 div p, #id:first-line {background-color: red; background-style: none}
 div p {margin: 0; padding: 1em;}
 div p + p {padding-top: 0;}
-
+``` -

La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.

+La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe. -

Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :

+Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS : -
margin: 0 auto;
-padding-left: 10px;
+```css +margin: 0 auto; +padding-left: 10px; +``` -

Mais les suivantes sont invalides :

+Mais les suivantes sont invalides : -
margin: 0auto;
-padding- left: 10px;
+```css +margin: 0auto; +padding- left: 10px; +``` -

0auto n'est pas reconnu comme une valeur possible pour la propriété margin (0 et auto sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.

+`0auto` n'est pas reconnu comme une valeur possible pour la propriété `margin` (`0` et `auto` sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace. -

Le navigateur ne connaît pas la propriété padding- . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.

+Le navigateur ne connaît pas la propriété `padding-` . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace. -

À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.

+**À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.** -

À suivre…

+## À suivre… -

Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — Comment CSS fonctionne — nous examinerons donc ce point.

+Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — [Comment CSS fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) — nous examinerons donc ce point. -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -

Dans ce cours

+## Dans ce cours -
    -
  1. Qu'est ce que CSS?
    2. -
  2. Démarrer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS comment ça marche ?
    5. -
  5. Mettre en œuvre vos connaissances
    6. -
+1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. Comment CSS est structuré +4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md index 0a578ae2a0..60f48f7f03 100644 --- a/files/fr/learn/css/first_steps/how_css_works/index.md +++ b/files/fr/learn/css/first_steps/how_css_works/index.md @@ -3,147 +3,169 @@ title: CSS, comment ça marche ? slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works --- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+{{LearnSidebar}} +{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -

Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.

+Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web. - - - - - - - - - - + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du CSS qu'il ne sait pas interpréter.
Prérequis : + Notions de base en l'informatique, + logiciels de base installés, + savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) +
Objectif : + Comprendre, à un niveau élémentaire, comment un navigateur traite les + codes CSS et HTML et ce qui se passe quand le navigateur rencontre du + CSS qu'il ne sait pas interpréter. +
-

CSS comment ça marche, en  fait ?

+## CSS comment ça marche, en  fait ? -

Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe :

+Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe : -
    -
  1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau).
    2. -
  2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Document Object Model) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.
    3. -
  3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et  la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.
    4. -
  4. Le navigateur parse le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (render tree).
    5. -
  5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée.
    6. -
  6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle painting).
    7. -
+1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau). +2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (_Document Object Model_) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section. +3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et  la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation. +4. Le navigateur *parse* le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'_arbre de rendu_ (render tree). +5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée. +6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle _painting_). -

Le diagramme suivant propose une vue synthétique de ce traitement.

+Le diagramme suivant propose une vue synthétique de ce traitement. -

+![](rendering.svg) -

À propos du DOM

+## À propos du DOM -

Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les parents de nœuds enfants (child nodes) et les nœuds enfants peuvent avoir des frères et sœurs (siblings).

+Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les _parents_ de _nœuds enfants_ (child nodes) et les nœuds enfants peuvent avoir des *frères et sœurs* (siblings). -

Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document.

+Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document. -

Avec les DevTools  de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux.

+Avec les DevTools  de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux. -

Une représentation concrète du DOM

+## Une représentation concrète du DOM -

Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM.

+Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM. -

Partons du code ci-dessous :

+Partons du code ci-dessous : -
<p>
+```html
+

   Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-
+ Cascading + Style + Sheets +

+``` -

Dans le DOM, le nœud correspondant à l'élément <p> est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments <span>. Les nœuds SPAN sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte :

+Dans le DOM, le nœud correspondant à l'élément `

` est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments ``. Les nœuds `SPAN` sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte : -

P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-   └─ "Sheets"
-
+ P + ├─ "Let's use:" + ├─ SPAN + | └─ "Cascading" + ├─ SPAN + | └─ "Style" + └─ SPAN + └─ "Sheets" -

C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :

+C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit : -

{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}

+{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}} - +```css hidden +p {margin:0;} +``` -

Appliquer CSS au DOM

+## Appliquer CSS au DOM -

Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé :

+Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé : -
<p>
+```html
+

   Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
+ Cascading + Style + Sheets +

+``` -

On lui applique le CSS suivant :

+On lui applique le CSS suivant : -
span {
+```css
+span {
   border: 1px solid black;
   background-color: lime;
-}
+} +``` -

Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur span, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre la représentation visuelle finale à l'écran.

+Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur `span`, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à *peindre* la représentation visuelle finale à l'écran. -

Voilà le résultat après mise à jour :

+Voilà le résultat après mise à jour : -

{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}

+{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}} -

Dans le prochain module, dans l'article Debugging CSS, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.

+Dans le prochain module, dans l'article [Debugging CSS](/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS), nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS. -

Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?

+## Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ? -

Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait dans une leçon précédente. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.

+Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait [dans une leçon précédente](/fr/docs/Learn/CSS/First_steps/What_is_CSS#prise_en_charge_par_les_navigateurs). Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter. -

La réponse : ne rien faire et passer à la suite !

+La réponse : ne rien faire et passer à la suite ! -

Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur.

+Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur. -

De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante.

+De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante. -

Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise colour pour le mot couleur. Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.

+Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise `colour` pour le mot *couleur.* Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée. -
<p> Je veux que ce texte soit grand, gras et bleu.</p>
+```html +

Je veux que ce texte soit grand, gras et bleu.

+``` -
p {
+```css
+p {
   font-weight: bold;
   colour: blue; /* incorrect spelling of the color property */
   font-size: 200%;
-}
+} +``` -

{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}

+{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}} -

Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la cascade : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.

+Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la _cascade_ : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent. -

Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter calc() pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de width est calculée par calc(). Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec  calc() qui, par cascade, écrase la déclaration précédente.

+Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter `calc()` pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de `width` est calculée par ` calc(``) `. Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec  `calc()` qui, par cascade, écrase la déclaration précédente. -

Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.

+Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs. -

Et enfin

+## Et enfin -

Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez mettre en œuvre vos nouvelles connaissances : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS.

+Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez [mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS. -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}} -

Dans ce cour

+## Dans ce cour -
    -
  1. CSS, c'est quoi ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS ça marche comment ?
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
+1. [CSS, c'est quoi ?](/fr/docs/Learn/CSS/First_steps/What_is_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS ça marche comment ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index 2b0e0238ec..3861ea29db 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -9,48 +9,40 @@ tags: - premiers pas translation_of: Learn/CSS/First_steps --- -
{{LearnSidebar}}
+{{LearnSidebar}} -

CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.

+CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML. -

Vous voulez devenir un développeur web front-end ?

+### Vous voulez devenir un développeur web front-end ? -

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. -

Prérequis

+## Prérequis -

Avant de commencer ce module, vous devriez avoir :

+Avant de commencer ce module, vous devriez avoir : -
    -
  1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;
    2. -
  2. Un environnement de travail minimal installé, comme indiqué dans la section installer les logiciels de base et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section Gérer les fichiers ;
    3. -
  3. Une familiarité avec HTML, comme discuté dans le module d'introduction à HTML.
    4. -
+1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ; +2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ; +3. Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). -
-

Note : Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme JSBin ou Thimble.

-
+> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/). -

Guides

+## Guides -

Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :

+Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences : -
-
Qu'est-ce que le CSS?
-

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.

-
Démarrer avec CSS
-
Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.
-
Comment est structuré le CSS
-
Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés.
-
Comment CSS Fonctionne
-
Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.
-
Utilisez vos nouvelles compétences
-
Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
-
+- [Qu'est-ce que le CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) + - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage. +- [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) + - : Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage. +- [Comment est structuré le CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) + - : Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés. +- [Comment CSS Fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) + - : Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web. +- [Utilisez vos nouvelles compétences](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) + - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter. -

Voir aussi

+## Voir aussi -
-
Literacy Web intermédiaire 1 : Introduction au CSS
-
Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module Introduction à CSS. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
-
+- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/) + - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md index 87b94d05bf..fcb42335eb 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md @@ -8,99 +8,92 @@ tags: - Playground translation_of: Learn/CSS/First_steps/Using_your_new_knowledge --- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -

Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. 

+Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. - - - - - - - - - - + + + + + + + + + +
Prérequis :Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML (cf. Introduction à HTML).
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
Prérequis : + Avant de vous soumettre à cette évaluation, vous avez suivi le module + sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML + (cf. Introduction à HTML). +
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
-

Point de départ

+## Point de départ -

Vous pouvez travailler dans l'éditeur ci-dessous ou télécharger le point de départ pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section <head>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme CodePen, jsFiddle, ou Glitch pour travailler sur les tâches proposées.

+Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section ``. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. -
-

Note : ne restez pas coincé, appelez à l'aide — voir la section Evaluation et comment obtenir de l'aide au bas de cette page.

-
+> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. -

Travailler avec CSS

+## Travailler avec CSS -

L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :

+L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : -
    -
  • {{cssxref("font-family")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("font-weight")}}
    • -
  • {{cssxref("font-size")}}
    • -
  • {{cssxref("text-decoration")}}
    • -
+- {{cssxref("font-family")}} +- {{cssxref("color")}} +- {{cssxref("border-bottom")}} +- {{cssxref("font-weight")}} +- {{cssxref("font-size")}} +- {{cssxref("text-decoration")}} -

J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme h1 et h2 ; j'ai aussi créé une classe job-title.

+J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. -

Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :

+Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : -
    -
  1. Affichez le titre de niveau 1 en hotpink ;
    2. -
  2.  Donnez au titre un {{cssxref("border-bottom")}} de 10px dotted de couleur purple ;
    3. -
  3. Affichez le titre de niveau 2 en italique ;
    4. -
  4. Colorez la ul des détails de contacts en {{cssxref("background-color")}} #eeeeee, avec un {{cssxref("border")}} de 5px solid purple. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.
    5. -
  5. Faites que les liens apparaissent en green lors d'un survol du curseur.
    6. -
+1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +3. Affichez le titre de niveau 2 en italique ; +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. -

Vous devriez obtenir un rendu qui ressemble à cela :

+Vous devriez obtenir un rendu qui ressemble à cela : -

Screenshot of how the example should look after completing the assessment.

+![Screenshot of how the example should look after completing the assessment.](learn-css-basics-assessment.png) -

Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la référence CSS sur MDN !

+Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! -

À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.

+À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} -

Evaluation ou compléments d'information

+## Evaluation ou compléments d'information -

Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :

+Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : -
    -
  1. Publiez votre code dans un éditeur en ligne tel CodePen, jsFiddle, or Glitch.
    2. -
  2. Si vous êtes à l'aise en anglais : -
      -
    1. Dans le forum MDN Discourse, écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : -
        -
      • Un titre parlant comme "Assessment wanted for CSS First Steps".
        • -
      • Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.
        • -
      • Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...
        • -
      • Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.
        • -
      -
      2. -
    -
    3. -
  3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.
    4. -
+1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +2. Si vous êtes à l'aise en anglais : -

La suite ?

+ 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : -

Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, construire des blocs CSS, nous approfondirons de nombreux points.

+ - Un titre parlant comme "Assessment wanted for CSS First Steps". + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}}

+3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. -

Dans ce cours

+## La suite ? -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Commencer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS, comment ça marche ?
    5. -
  5. Mettez en œuvre vos connaissances
    6. -
+Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. + +{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} + +## Dans ce cours + +1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md index bfdeb9fa33..132132d24b 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.md +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -11,123 +11,131 @@ tags: translation_of: Learn/CSS/First_steps/What_is_CSS original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

+**{{Glossary("CSS")}}** (_Cascading Style Sheets_) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits. - - - - - - - - - - + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
Prérequis : + Notions de base en l'informatique, + logiciels de base installés, + savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) +
Objectif :Apprendre ce qu'est CSS.
-

Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

+Dans le cours [Introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML), nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style. -

La mise en forme par défaut appliquée par un navigateur.

+![La mise en forme par défaut appliquée par un navigateur.](basic_styling_fr.png) -

Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

+Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix. -

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

+Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante : -

{{EmbedYouTube("spK_S0HfzFw")}}

+{{EmbedYouTube("spK_S0HfzFw")}} -

À quoi sert CSS ?

+## À quoi sert CSS ? -

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

+Comme mentionné plus haut, CSS est un langage de mise en forme des documents. -

Les documents en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.

+Les **documents** en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}. -

"Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

+**"Présenter** un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante. -
-

Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

-
+> **Note :** Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables. -

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

+CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer [la couleur](/fr/docs/Web/CSS/Type_color) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer [un texte affiché sur une colonne](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/Animations_CSS). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. -

Syntaxe de CSS

+## Syntaxe de CSS -

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.

+CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. -

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

+Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères." -

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

+Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme : -
h1 {
+```css
+h1 {
   color: red;
   font-size: 5em;
-}
+} +``` -

La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).

+La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}). -

Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété : valeur. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

+Suivent une paire d'accolades `{ }` à l'intérieur desquelles on trouve une ou plusieurs **déclarations**, sous la forme d'une paire **propriété** : **valeur**. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété `color` peut prendre différentes [valeurs de type ``](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Color). La propriété `font-size` accepte différentes [tailles](/fr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages) comme valeurs. -

Une feuille de style CSS est constituée d'une succession de telles règles :

+Une feuille de style CSS est constituée d'une succession de telles règles : -
h1 {
+```css
+h1 {
   color: red;
   font-size: 5em;
 }
 
 p {
   color: black;
-}
+} +``` -

On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.

+On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables. -
-

Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !

-
+> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn _nom-de-propriété-ou-fonctionnalité-css_" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" ! -

Modules CSS

+## Modules CSS -

L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en modules. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module Backgrounds and Borders, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).

+L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en _modules_. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module *[Backgrounds and Borders](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)*, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas). -

À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).

+À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification). -

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

+Prenons un exemple précis et revenons au module *Backgrounds and Borders* — les propriétés [`background-color`](/fr/docs/Web/CSS/background-color) et [`border-color`](/fr/docs/Web/CSS/border-color) qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module. -

Spécifications CSS

+### Spécifications CSS -

Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.

+Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies. -

CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le CSS Working Group (ou "groupe de travail CSS" en français). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des experts invités affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.

+CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le [_CSS Working Group_ (ou "groupe de travail CSS" en français)](https://www.w3.org/Style/CSS/). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des _experts invités_ affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS. -

De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le CSS Working Group a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! 

+De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le _CSS Working Group_ a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! -

Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).

+Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous). -

Prise en charge par les navigateurs

+## Prise en charge par les navigateurs -

Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.

+Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran. -

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.

+Nous étudierons ce point plus en détail dans l'article sur [le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works). Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web. -

Voici par exemple le tableau de compatibilité pour la propriété font-family.

+Voici par exemple le tableau de compatibilité pour la propriété [`font-family`](/fr/docs/Web/CSS/font-family). -

{{Compat("css.properties.font-family")}}

+{{Compat("css.properties.font-family")}} -

Où continuer

+## Où continuer -

Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon Démarrer avec CSS.

+Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}} -

Dans ce cours

+## Dans ce cours -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. La façon dont CSS est structuré
    4. -
  4. Le fonctionnement de CSS
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
+1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [La façon dont CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +4. [Le fonctionnement de CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_works) +5. [Mettre en œuvre vos nouvelles connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md index 31db5f3ac9..4b83c4ebc0 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.md +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -4,38 +4,41 @@ 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.

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

+Avant d'attaquer la partie pratique, nous vous recommandons de lire [l'article qui explique le fonctionnement du modèle de boîte CSS](/fr/docs/Learn/CSS/Building_blocks/The_box_model). Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire [les bases de la disposition en CSS](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). -

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.

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

+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>
+```html +
Coucou ! Je veux être joli.
+``` -

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

+Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ? -
    -
  • Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.
    • -
  • Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.
    • -
  • Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}
    • -
  • Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.
    • -
+- Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc. +- Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc. +- Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}} +- Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc. -

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

+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

+## 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.

+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

+### Créer des cercles - +```html hidden +
Coucou ! Je veux être joli.
+``` -

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 ?

+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 {
+```css
+.joli {
   /* Mieux vaut centrer le texte dans un
      cercle. */
   text-align : center;
@@ -61,28 +64,30 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
 
   /* Enfin, transformons le carré en cercle */
   border-radius: 100%;
-}
+} +``` -

Et voilà comment on obtient un cercle :

+Et voilà comment on obtient un cercle : -

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

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

Les arrière-plans

+## 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.

+Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont [les propriétés `background-*`](/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders). 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 :

+Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans : -
    -
  • On peut définir plusieurs arrière-plans pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.
    • -
  • Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.
    • -
+- On peut définir [plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches. +- Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte. - +```html hidden +
Coucou ! Je veux être joli.
+``` -

Passons à la manipulation :

+Passons à la manipulation : -
.joli {
+```css
+.joli {
   padding : 1em;
   width: 100%;
   height: 200px;
@@ -110,25 +115,27 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
                     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')}}

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

-
+> **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](https://lea.verou.me/css3patterns/). 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é](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients). -

Les pseudo-éléments

+## 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.

+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](/fr/docs/Web/CSS/Pseudo-elements). -

Un nuage

+### Un nuage - +```html hidden +
Coucou ! Je veux être joli.
+``` -

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

+Voici un exemple qui illustre comment transformer la boîte en nuage : -
.joli {
+```css
+.joli {
   text-align: center;
 
   /* On utilise la même astuce que pour
@@ -203,20 +210,24 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes
     faut s'assurer que le coin en bas à droite
     soit bien un angle droit. */
   border-bottom-left-radius: 0;
-}
+} +``` -

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

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

Une citation

+### 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 :

+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>
+```html +
People who think they know everything are a great annoyance to those of us who do. Isaac Asimov
+
L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. Pierre Desproges
+``` -

Voici la feuille de style que nous allons utiliser :

+Voici la feuille de style que nous allons utiliser : -
blockquote {
+```css
+blockquote {
   min-height: 5em;
   padding   : 1em 4em;
   font      : 1em/150% sans-serif;
@@ -261,19 +272,23 @@ blockquote i {
   margin-top: 1rem;
   text-style: italic;
   text-align: right;
-}
+} +``` -

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

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

Assemblage

+## 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 :

+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 : - +```html hidden +
Coucou ! Je veux être joli.
+``` -

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.

+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 {
+```css
+.joli {
   position: relative;
   background-color: #FFC;
   padding: 2rem;
@@ -294,10 +309,11 @@ blockquote i {
 
   box-shadow: 0px 13px 10px black;
   transform: rotate(4deg);
-}
+} +``` -

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

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

La suite

+## 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.

+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](/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_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](/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction). diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md index 75479dfb18..cd4ad34b7a 100644 --- a/files/fr/learn/css/howto/css_faq/index.md +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -9,88 +9,90 @@ tags: 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 ?

+## 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.

+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 modernes ont deux modes de rendu : -
    -
  • Mode Quirk: aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un DOCTYPE incomplet, incorrect ou manquant, ou avec une déclaration DOCTYPE en utilisation avant 2001 seront affichées en mode Quirks.
    • -
  • Mode Standard: le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un DOCTYPE moderne seront affichées en mode Standard.
    • -
+- _Mode Quirk:_ aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un `DOCTYPE` incomplet, incorrect ou manquant, ou avec une déclaration `DOCTYPE` en utilisation avant 2001 seront affichées en mode Quirks. +- _Mode Standard:_ le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un `DOCTYPE` moderne seront affichées en mode Standard. -

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

+Les navigateurs basés sur Gecko ont un troisième mode [Presque Standard](/fr/docs/Mode_presque_standard_de_Gecko) 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 :

+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
+```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 ?

+## 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.

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

+## 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.

+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 à 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.

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

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

+Voire [Les sélecteurs CSS](/fr/docs/CSS/Premiers_pas/Les_sélecteurs "Les sélecteurs CSS"). -

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

+## 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.

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

+Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur [`initial`](/fr/docs/Web/CSS/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 ?

+## 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.

+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](http://archivist.incutio.com/viewlist/css-discuss/2685). Par contre, assigner plusieurs classes à un seul élément peut produire le même effet. -

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

+## 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.

+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">
+```html
+
 
-<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.

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

+## 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.

+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

+### 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.

+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 {
+```css
+.news {
   color: black;
 }
 
@@ -98,24 +100,26 @@ original_slug: Web/CSS/CSS_questions_frequentes
   font-weight: bold;
   color: red;
 }
-
+``` -
<!-- Le texte de l'annonce est en noir
+```html
+
+
 (Reuters)
+   General Electric
   (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.

+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

+### 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.

+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 {
+```css
+#stockTicker {
   font-weight: bold;
 }
 .stockSymbol {
@@ -127,23 +131,24 @@ original_slug: Web/CSS/CSS_questions_frequentes
 .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>
 
-
+```html + +
NYS: GE +1.0 ...
+``` -

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.

+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

+### 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.

+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 {
+```css
+#stockTicker {
   font-size: 12px;
   font-family: Verdana;
   font-weight: bold;
@@ -153,30 +158,34 @@ original_slug: Web/CSS/CSS_questions_frequentes
   font: 14px Arial;
   color: red;
 }
-
+``` -
<div id="stockTicker">
+```html
+

   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.

+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 {
+```css
+#stockTicker {
   font-weight: bold;
   font: 12px Verdana;
   /* font-weight vaut maintenant normal */
 }
-
+``` -

Utiliser le sélecteur *

+### Utiliser le sélecteur `*` -

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

+Le sélecteur `*` fait référence à n'importe quel élément et doit donc être utilisé avec soin. -
body * {
+```css
+body * {
   font-weight: normal;
 }
 
@@ -191,27 +200,30 @@ original_slug: Web/CSS/CSS_questions_frequentes
 .stockUp {
   color: red;
 }
-
+``` -
<div id="section">
+```html
+

   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.

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

+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

+### 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.

+Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la [spécificité](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). 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 {
+```css
+div {
   color: black;
 }
 
@@ -222,26 +234,28 @@ original_slug: Web/CSS/CSS_questions_frequentes
 .green {
   color: green;
 }
-
+``` -
<div id="orange" class="green" style="color: red;">
+```html
+

   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.

+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](https://www.w3.org/TR/CSS21/cascade.html#specificity) ou [le chapitre correspondant de la section Apprendre](/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage). -

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

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

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

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

+Pour plus d'informations [sur les extensions CSS de Mozilla, vous pouvez consulter la page associée](/fr/docs/Web/CSS/Extensions_Mozilla). -

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

+## 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.

+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 ».

+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).

+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.md b/files/fr/learn/css/howto/generated_content/index.md index aa8656013b..3179e8b02c 100644 --- a/files/fr/learn/css/howto/generated_content/index.md +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -7,61 +7,66 @@ tags: translation_of: Learn/CSS/Howto/Generated_content original_slug: Apprendre/CSS/Comment/Generated_content --- -

{{LearnSidebar}}

+{{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.

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

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

-
+> **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.

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

+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

+## Exemples -

Contenu textuel

+### 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.

+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

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

CSS

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

Résultat

+#### Résultat -

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

+{{ 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.

+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](https://www.w3.org/TR/CSS21/syndata.html#q23) 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.

+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](https://www.w3.org/TR/CSS21/syndata.html#q24) et [Caractères et casse](https://www.w3.org/TR/CSS21/syndata.html#q6) dans la spécification CSS. -

Contenu_avec_une_image

+### 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") }}.

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

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

HTML

+#### HTML -
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
+```html +developer.mozilla.org +``` -

CSS

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

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

+{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }} diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md index d14cb33a16..f613014a6c 100644 --- a/files/fr/learn/css/howto/index.md +++ b/files/fr/learn/css/howto/index.md @@ -8,77 +8,64 @@ tags: 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.

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

Scénarios fréquents

+## Scénarios fréquents -

Bases

+### Bases - +- [Comment appliquer CSS au HTML](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#How_to_apply_your_CSS_to_your_HTML) +- [Comment utiliser les espaces en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blancs) +- [Comment écrire des commentaires en CSS](/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_commentaires) +- [Comment sélectionner des éléments par leur nom, leur classe ou leur ID](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_s%C3%A9lecteurs_simples) +- [Comment sélectionner des éléments par le nom et le contenu de l'attribut](/fr/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs#Les_sélecteurs_d'attribut) +- [Comment utiliser les pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-classes) +- [Comment utiliser les pseudo-éléments](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_pseudo-%C3%A9l%C3%A9ments) +- [Comment appliquer plusieurs sélecteurs à la même règle](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs#Les_combinateurs) +- [Comment spécifier les couleurs en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs) +- [Comment déboguer CSS dans le navigateur](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS) -

CSS et texte

+### CSS et texte - +- [Comment donner un style au texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Comment personnaliser une liste d'éléments](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Comment donner un style aux liens](/fr/docs/Learn/CSS/Styling_text/Styling_links) +- [Comment ajouter des ombres au texte](/fr/docs/Learn/CSS/Styling_text/Fundamentals#Ombres_du_texte) +### Boîtes et mises en page -

Boîtes et mises en page

+- [Comment tailler les boîtes CSS](/fr/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties) +- [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements) +- [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan) +- [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) +- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités). +- [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans) +- [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) +- [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) +- [Comment contrôler les bordures](/fr/docs/Learn/CSS/Styling_boxes/Borders) +- [Comment donner un style à une table HTML](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) +- [Comment ajouter des ombres aux boîtes](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows) - +## Techniques avancées ou peu communes -

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

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 -

Général

+- [Comment calculer la spécificité d'un sélecteur de CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#Specificity) +- [Comment contrôler l'héritage en CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage#L%27h%C3%A9ritage) - +### Effets avancés -

Effets avancés

+- [Comment utiliser des filtres en CSS](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters) +- [Comment utiliser les modes fusion](/fr/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes) - +### Mise en page -

Mise en page

+- [Utiliser les boîtes flexibles CSS (_flexbox_)](/fr/docs/Web/Guide/CSS/Flexible_boxes) +- [Utiliser une structure CSS avec plusieurs colonnes](/fr/docs/Web/CSS/Colonnes_CSS3 "/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts") +- [Utiliser les contenus générés par CSS](/fr/docs/CSS/Premiers_pas/Contenu) - +## Voir aussi -

Voir aussi

- -

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

+[CSS FAQ](/fr/docs/Web/CSS/CSS_questions_frequentes) — 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/index.md b/files/fr/learn/css/index.md index 0d3547603f..33af4277c2 100644 --- a/files/fr/learn/css/index.md +++ b/files/fr/learn/css/index.md @@ -15,64 +15,54 @@ tags: translation_of: Learn/CSS original_slug: Apprendre/CSS --- -
{{LearnSidebar}}
+{{LearnSidebar}} -
-

Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

-
+> Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives. -

Parcours d'apprentissage

+## Parcours d'apprentissage -

Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :

+Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet : - +- des CSS, en commençant avec le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps) +- des [Modules HTML](/fr/Learn/HTML#Modules) plus avancés +- du [JavaScript](/fr/docs/Learn/JavaScript) et sur la manière de l'utiliser pour ajouter des fonctionnalités dynamiques aux pages web. -

Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

+Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML. -

Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

+Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans [Installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants. -

Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.

+Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails. -

Modules

+## Modules -

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

+Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier. -
-
Introduction aux CSS
-
Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
-
Styliser les boîtes
-
Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
-
+- [Introduction aux CSS](/fr/Apprendre/CSS/Introduction_à_CSS) + - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS. +- [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites) + - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes. -
-
Composer du texte
-
Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
-
-
Mise en page avec les CSS
-
-

À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.

-
-
+ -

Résolution de problèmes courants avec les CSS

+- [Composer du texte](/fr/docs/Learn/CSS/Styling_text) + - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens. +- [Mise en page avec les CSS](/fr/Apprendre/CSS/CSS_layout) -

Apprendre à utiliser CSS pour résoudre des problèmes fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.

+ - : À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox. -

Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !

+## Résolution de problèmes courants avec les CSS -

"Le CSS est étrange"

+[Apprendre à utiliser CSS pour résoudre des problèmes](/fr/docs/Learn/CSS/Howto) fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web. -

Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :

+Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire ! -

{{EmbedYouTube("aHUtMbJw8iA")}}

+## "Le CSS est étrange" -

Voir aussi

+Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait : -
-
Les CSS sur MDN
-
Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
-
+{{EmbedYouTube("aHUtMbJw8iA")}} + +## Voir aussi + +- [Les CSS sur MDN](/fr/docs/Web/CSS) + - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit. diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index 1aa02da170..c56023c1f9 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -12,284 +12,233 @@ tags: translation_of: Learn/CSS/Styling_text/Fundamentals original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

+Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres. - - - - - - - - - - + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
Prérequis : + Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans + Introduction à CSS). +
Objectif : + Apprendre les techniques et propriétés fondamentales nécessaires pour + composer du texte sur les pages web. +
-

En quoi consiste la mise en forme du texte avec CSS ?

+## En quoi consiste la mise en forme du texte avec CSS ? -

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

+Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}. -
-

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

-
+> **Note :** si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. -

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

+Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article : -
    -
  • Styles de la police de caractères : ces propriétés concernent la fonte appliquée au  texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
    • -
  • Styles de composition du texte : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte  dans la boîte de contenu.
    • -
+- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au  texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. +- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte  dans la boîte de contenu. -
-

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

-
+> **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) . -

Fontes

+## Fontes -

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

+Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci : -
<h1>Tommy le Chat</h1>
+```html
+
Tommy le Chat

 
-<p>Je m'en souviens comme mon dernier repas...</p>
+
Je m'en souviens comme mon dernier repas...

 
-<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
+
Dit Tommy le Chat en jetant la tête en arrière pour dégager
 ce corps étranger qui s'était niché au fond de sa redoutable gueule.
 Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
 brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
 Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
 avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
-occasions, comme maintenant.</p>
+occasions, comme maintenant.

+``` -
-

Note : (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

-
+> **Note :** (NdT : Extrait et traduction _approximative_ de la chanson _Tommy the Cat_ du groupe [Primus)]() -

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

+Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) sur Github (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html)). -

Couleur

+### Couleur -

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

+La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. -

color accepte toutes les unités de couleur des CSS, par exemple :

+`color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple : -
p {
+```css
+p {
   color: red;
-}
+} +``` -

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

+Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard : - +occasions, comme maintenant.

+``` -

{{ EmbedLiveSample('Couleur', '100%', 220) }}

+{{ EmbedLiveSample('Couleur', '100%', 220) }} -

Familles de fontes

+### Familles de fontes -

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

+Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : -
p {
+```css
+p {
   font-family: arial;
-}
+} +``` -

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

+Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page. -

Polices web sûres

+#### Polices web sûres -

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

+En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres. -

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

+La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS). -

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

+La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices [Microsoft Core](https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web) pour le web à la fin des années 90 et début des années 2000) : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
+| Nom | Type générique | Notes | +| --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Arial | sans-serif | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. | +| Courier New | monospace | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée. | +| Georgia | serif |   | +| Times New Roman | serif | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée. | +| Trebuchet MS | sans-serif | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles. | +| Verdana | sans-serif |   | -
-

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

-
+> **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage. -
-

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

-
+> **Note :** Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : **les polices web**. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module. -

Polices par défaut

+#### Polices par défaut -

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

+CSS définit cinq noms génériques pour les polices : `serif`, `sans-serif`, `monospace`, `cursive` et `fantasy`. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.`serif`, `sans-serif` et `monospace` sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, `cursive` et `fantasy` sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure. -

Les 5 noms sont définis comme suit :

+Les 5 noms sont définis comme suit : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
+| Terme | Définition | Exemple | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | +| `serif` | Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices) | Mon grand éléphant rouge | +| `sans-serif` | Les polices qui n'ont pas d'empattements | Mon grand éléphant rouge | +| `monospace` | Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes. | Mon grand éléphant rouge | +| `cursive` | Les polices destinées à émuler l'écriture, avec des traits fluides et connectés. | Mon grand éléphant rouge | +| `fantasy` | Les polices destinées à être décoratives. | Mon grand éléphant rouge | -

Pile de polices

+#### Pile de polices -

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

+Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de `font-family` plusieurs noms de polices séparés par des virgules, par exemple : -
p {
+```css
+p {
   font-family: "Trebuchet MS", Verdana, sans-serif;
-}
+} +``` -

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

+Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite. -

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

+Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif ! -
-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

-
+> **Note :** Les noms de police comportant plus d'un mot — comme `Trebuchet MS` — doivent être entourés de guillemets, par exemple `"Trebuchet MS"`. -

Un exemple de font-family

+#### Un exemple de font-family -

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

+Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif : -
p {
+```css
+p {
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}
+} +``` -

Cela donne le résultat suivant :

+Cela donne le résultat suivant : - +occasions, comme maintenant.

+``` -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }} -

Taille de la police de caractères

+### Taille de la police de caractères -

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units) de notre prédédent module, nous avons vu les [unités de longueur et taille](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Longueur_et_taille). La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les [pourcentages](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Pourcentages)). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont : -
    -
  • px (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.
    • -
  • em : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser em pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des em, la maintenance en sera facilitée.
    • -
  • rem : il fonctionne comme em, excepté que un rem est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les rem ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux em ou aux px, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que REM-unit-polyfill.
    • -
+- `px` (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation. +- `em` : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée. +- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). -

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

+La propriété `font-size` d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété `font‑size` est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 `em` définie par défaut, donc aura une taille finale de 32 px. -

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

+Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 `em` (24 px), puis, vous voulez que les paragraphes de l'`
` aient une taille de police calculée de 20 px, quelle valeur de `em` utiliseriez-vous ? -
<!-- font-size vaut 16px pour la base du document -->
-<article> <!-- Si font-size vaut 1.5em -->
-  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
-</article>
+```html + +
+

Mon paragraphe

+
+``` -

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

+Vous devrez définir sa valeur `em` à 20/24 ou 0,83333333 `em`. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser `rem` quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible. -

Un simple exemple de dimensionnement

+#### Un simple exemple de dimensionnement -

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

+Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la `font‑size` de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de `font‑size` dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver. -

Notre nouveau résultat ressemble à :

+Notre nouveau résultat ressemble à : - +occasions, comme maintenant.

+``` -
html {
+```css
+html {
   font-size: 10px;
 }
 
@@ -301,66 +250,64 @@ p {
   font-size: 1.4rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

- -

Style de fonte, graisse, transformation et décoration de texte

- -

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

- -
    -
  • {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : -
      -
    • normal : fige le texte en police normale (suppression du style italique existant).
      • -
    • italic : met le texte en  version italique de la police si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
      • -
    • oblique : force le texte à utiliser une version simulée de fonte italique, créée en inclinant la version normale.
      • -
    -
    • -
  • {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme -light, -normal, -bold, -extrabold, -black, etc.), mais en réalité, vous les utiliserez rarement en dehors de normal et bold (gras): -
      -
    • normal, bold : graisse de la police, normale ou bold.
      • -
    • lighter, bolder : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.
      • -
    • 100–900 : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.
      • -
    -
    • -
  • {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : -
      -
    • none : aucune transformation.
      • -
    • uppercase : met tout le texte en majuscules.
      • -
    • lowercase : met tout le texte en minuscules.
      • -
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
      • -
    • full-width : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
      • -
    -
    • -
  • {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : -
      -
    • none: désactive les décorations du texte déjà présentes.
      • -
    • underline: souligne le texte.
      • -
    • overline: trace une ligne au-dessus du texte.
      • -
    • line-through: barre le texte.
      • -
    - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
    • -
- -

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

- -

Notre nouveau résultat ressemble à :

- - - +occasions, comme maintenant.

+``` - +} +``` -

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

+{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }} -

Ombres du texte

+### Ombres du texte -

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

+Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous : -
text-shadow: 4px 4px 5px red;
+```css +text-shadow: 4px 4px 5px red; +``` -

Les 4 propriétés sont les suivantes :

+Les 4 propriétés sont les suivantes : -
    -
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. -
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. -
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. -
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. -
+1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée. +2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée. +3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS. +4. La couleur de l'ombre, qui peut prendre toute [unité de couleur CSS](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). Si elle n'est pas définie, c'est la couleur noire par défaut. -
-

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

-
+> **Note :** Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple `-1px -1px`. -

Ombres multiples

+#### Ombres multiples -

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

+Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple : -
text-shadow: -1px -1px 1px #aaa,
+```css
+text-shadow: -1px -1px 1px #aaa,
              0px 4px 1px rgba(0,0,0,0.5),
              4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
+ 0px 0px 7px rgba(0,0,0,0.4); +``` -

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

+Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons : - +occasions, comme maintenant.

+``` - +``` -

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

+{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }} -
-

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

-
+> **Note :** Vous pouvez voir plus d'exemples intéressants de `text-shadow` dans l'article de Sitepoint [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/) (Clair de lune avec text-shadow). -

Mise en page du texte

+## Mise en page du texte -

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

+Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes. -

Alignement du texte

+### Alignement du texte -

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

+La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte : -
    -
  • left: le texte est aligné à gauche.
    • -
  • right: le texte est aligné à droite.
    • -
  • center: le texte est centré.
    • -
  • justify: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.
    • -
+- `left`: le texte est aligné à gauche. +- `right`: le texte est aligné à droite. +- `center`: le texte est centré. +- `justify`: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes. -

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

+Si nous appliquons `text-align: center;` à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons : - +occasions, comme maintenant.

+``` -
html {
+```css
+html {
   font-size: 10px;
 }
 
@@ -504,31 +454,37 @@ p {
   font-size: 1.4rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}
+} +``` -

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

+{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }} -

Hauteur de ligne

+### Hauteur de ligne -

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

+La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des [unités de longueur et de taille](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Length_and_size), mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de `line-height`. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci : -
line-height: 1.5;
+```css +line-height: 1.5; +``` -

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

+En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons : - +occasions, comme maintenant.

+``` - +} +``` -

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

+{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }} -

Espacement entre les lettres et les mots

+### Espacement entre les lettres et les mots -

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

+Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size). -

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

+Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple : -
p::first-line {
+```css
+p::first-line {
   letter-spacing: 2px;
   word-spacing: 4px;
-}
+} +``` -

Nous obtiendrons :

+Nous obtiendrons : - +occasions, comme maintenant.

+``` - +} +``` -

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

+{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }} -

D'autres propriétés intéressantes

+### D'autres propriétés intéressantes -

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

+Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit : -

Styles de police de caractères :

+Styles de police de caractères : -
    -
  • {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement.
    • -
  • {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices.
    • -
  • {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères OpenType.
    • -
  • {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.
    • -
  • {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales.
    • -
  • {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois.
    • -
  • {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte.
    • -
  • {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
    • -
  • {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.
    • -
  • {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle.
    • -
  • {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée.
    • -
  • {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur underline pour la propriété text-decoration-line.
    • -
  • {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte.
    • -
+- {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement. +- {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices. +- {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères [OpenType](https://en.wikipedia.org/wiki/OpenType). +- {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée. +- {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales. +- {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois. +- {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte. +- {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux. +- {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice. +- {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle. +- {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée. +- {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur `underline` pour la propriété `text-decoration-line`. +- {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte. -

styles de mise en page du texte

+styles de mise en page du texte -
    -
  • {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu.
    • -
  • {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).
    • -
  • {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.
    • -
  • {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots.
    • -
  • {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.)
    • -
  • {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge.
    • -
  • {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques.
    • -
  • {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.
    • -
  • {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne.
    • -
  • {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement.
    • -
  • {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.
    • -
+- {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu. +- {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché). +- {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés. +- {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots. +- {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.) +- {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge. +- {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques. +- {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée. +- {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne. +- {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement. +- {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes. -

Abréviations pour propriétés de fontes

+## Abréviations pour propriétés de fontes -

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

+De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}. -

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

+Parmi toutes ces propriétés, seules `font-size` et `font-family` sont requises lorsque la propriété abrégée `font` est utilisée. -

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

+Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}. -

Un exemple complet ressemblerait à ceci :

+Un exemple complet ressemblerait à ceci : -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+```css +font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; +``` -

Apprentissage actif : jouer avec les styles du texte

+## Apprentissage actif : jouer avec les styles du texte -

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

+Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous. -

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

+Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton de même nom. - +

Zone de rendu

+
+
+ +
+ +``` - +``` -

{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}

+{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }} -

Résumé

+## Résumé -

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

+Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML. -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}} -

Dans ce module

+## Dans ce module - +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/index.md b/files/fr/learn/css/styling_text/index.md index 18838ad893..8fa8a82086 100644 --- a/files/fr/learn/css/styling_text/index.md +++ b/files/fr/learn/css/styling_text/index.md @@ -13,36 +13,30 @@ tags: - Texte translation_of: Learn/CSS/Styling_text --- -

Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.

+Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens. -

Prérequis

+## Prérequis -

Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans Introduction à HTML, et être à l'aise avec les fondamentaux de CSS étudiés dans Introduction à CSS.

+Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans [Introduction à HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML), et être à l'aise avec les fondamentaux de CSS étudiés dans [Introduction à CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS). -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que JSBin ou Thimble.

-
+> **Note :** Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -

Guides

+## Guides -

Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :

+Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML : -
-
Initiation à la mise en forme du texte
-
Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.
-
Style de liste
-
Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.
-
Style de lien
-
Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.
-
Polices de caractères web
-
Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.
-
+- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) + - : Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres. +- [Style de liste](/fr/docs/Learn/CSS/Styling_text/Styling_lists) + - : Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout. +- [Style de lien](/fr/docs/Learn/CSS/Styling_text/Styling_links) + - : Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article. +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) + - : Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés. -

Auto-évaluation

+## Auto-évaluation -

Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.

+Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus. -
-
Composition d'une page d'accueil d'une école communale
-
Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.
-
+- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) + - : Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale. diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md index 7e88a2f941..ef8b665cb7 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.md +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -17,96 +17,120 @@ tags: translation_of: Learn/CSS/Styling_text/Styling_links original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens --- -
{{LearnSidebar}}
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

+Lors de la mise en forme de [liens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article. - - - - - - - - - - + + + + + + + + + +
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
Prérequis : + notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), + initiation à la mise en forme de texte. +
Objectif : + apprendre à mettre en forme les états des liens, et comment utiliser + efficacement les liens dans les fonctionnalités courantes de l'IU, comme + les menus de navigation. +
-

Un coup d'œil à quelques liens

+## Un coup d'œil à quelques liens -

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

+Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks). Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens. -

État des liens

+### État des liens -

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

+La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes [pseudo-classes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : -
    -
  • link (non visité) : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ;
    • -
  • visited : un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ;
    • -
  • hover : un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ;
    • -
  • focus : un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche Tab ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ;
    • -
  • active : un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}.
    • -
+- **link (non visité)** : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ; +- **visited :** un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ; +- **hover :** un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ; +- **focus :** un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche + + Tab + + ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ; + +- **active :** un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}. -

Styles par défaut

+### Styles par défaut -

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

+L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible). -
<p><a href="#">Un simple lien</a></p>
-
+```html +

Un simple lien

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

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

+{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }} -
-

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

-
+> **Note :** tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle. -

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

+Vous remarquerez quelques petites choses en explorant les styles par défaut : -
    -
  • les liens sont soulignés ;
    • -
  • les liens non visités sont bleus ;
    • -
  • les liens visités sont en violet ;
    • -
  • le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ;
    • -
  • les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche Tab (sur Mac, il se peut que vous ayez besoin d'activer l'option Accès clavier complet : Toutes les commandes en appuyant sur Ctrl + F7 pour que cela fonctionne) ;
    • -
  • les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus).
    • -
+- les liens sont soulignés ; +- les liens non visités sont bleus ; +- les liens visités sont en violet ; +- le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ; +- les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche -

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

+ Tab -
    -
  • utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ;
    • -
  • les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés.
    • -
+ (sur Mac, il se peut que vous ayez besoin d'activer l'option _Accès clavier complet : Toutes les commandes_ en appuyant sur -

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

+ Ctrl -
    -
  • {{cssxref ("color")}} pour la couleur du texte ;
    • -
  • {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;
    • -
  • {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.
    • -
+ \+ -
-

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

-
+ F7 + + pour que cela fonctionne) ; + +- les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus). + +De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins : + +- utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ; +- les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés. + +Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes : -

Mise en forme de quelques liens

+- {{cssxref ("color")}} pour la couleur du texte ; +- {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ; +- {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation. -

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

+> **Note :** vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou ! -

Pour commencer, nous écrirons notre jeu de règles vides :

+### Mise en forme de quelques liens -
a {
+Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.
+
+Pour commencer, nous écrirons notre jeu de règles vides :
+
+```css
+a {
 
 }
 
@@ -129,13 +153,15 @@ a:hover {
 
 a:active {
 
-}
+} +``` -

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

+Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte). -

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

+Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement : -
body {
+```css
+body {
   width: 300px;
   margin: 0 auto;
   font-size: 1.2rem;
@@ -173,47 +199,48 @@ a:hover {
 a:active {
   background: #265301;
   color: #CDFEAA;
-}
+} +``` -

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

+Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS : -
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, et
-<a href="#">Microsoft Edge</a>.</p>
+```html +

Il y a plusieurs navigateurs disponibles, tels que Mozilla +Firefox, Google Chrome, et +Microsoft Edge.

+``` -

En mettant les deux ensemble, nous obtenons ce résultat :

+En mettant les deux ensemble, nous obtenons ce résultat : -

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

+{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}} -

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

+Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe : -
    -
  • les deux premières règles ne sont pas très intéressantes pour cette discussion ;
    • -
  • la troisième règle utilise le sélecteur a pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ;
    • -
  • ensuite, nous utilisons les sélecteurs a:link et a:visited pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ;
    • -
  • les deux règles suivantes utilisent a:focus et a:hover pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : -
      -
    • le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ;
      • -
    • la valeur {{cssxref("border-bottom")}} a été définie comme 1px solid, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ;
      • -
    -
    • -
  • enfin, a:active est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer !
    • -
+- les deux premières règles ne sont pas très intéressantes pour cette discussion ; +- la troisième règle utilise le sélecteur `a` pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ; +- ensuite, nous utilisons les sélecteurs `a:link` et `a:visited` pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ; +- les deux règles suivantes utilisent `a:focus` et `a:hover` pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : + + - le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ; + - la valeur {{cssxref("border-bottom")}} a été définie comme `1px solid`, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ; + +- enfin, `a:active` est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer ! -

Apprentissage actif : mettez en forme vos propres liens

+### Apprentissage actif : mettez en forme vos propres liens -

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

+Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus. -

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

+Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton _Réinitialiser_. Si vous êtes vraiment bloqué, appuyez sur le bouton _Afficher la solution_ pour insérer l'exemple que nous avons montré ci-dessus. - +

Zone de rendu

+
+
+  + +
+ +``` - +``` -

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

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

Inclusion d'icônes dans des liens

+## Inclusion d'icônes dans des liens -

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

+Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com. -

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

+Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme : -
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
-jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
+```html +

Pour davantage d'information sur la météo, visitez notre page météo, +jetez un œil sur météo sur Wikipedia, ou regardez la météo sur Science Extrême .

+``` -

Ensuite, le CSS:

+Ensuite, le CSS: -
body {
+```css
+body {
   width: 300px;
   margin: 0 auto;
   font-family: sans-serif;
@@ -329,39 +360,41 @@ a[href*="http"] {
   background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
   background-size: 16px 16px;
   padding-right: 19px;
-}
+} +``` -

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

+{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }} -

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

+Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions `no-repeat` de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut. -

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

+Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle. -

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

+Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte. -

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

+Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un [sélecteur d'attribut](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) : `a[href*="http]` sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur. -

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

+Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique ! -
-

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

-
+> **Note :** ne vous inquiétez pas si vous n'êtes pas encore familier avec les [arrières-plans](/fr/Apprendre/CSS/styliser_boites) et le [responsive web design](/fr/Apps/app_layout/responsive_design_building_blocks) ; ceux-ci sont expliqués par ailleurs. -

Mise en forme de liens comme des boutons

+## Mise en forme de liens comme des boutons -

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

+Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses. -

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

+En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment. -

D'abord, un peu d'HTML :

+D'abord, un peu d'HTML : -
<ul>
-  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
-</ul>
+```html + +``` -

Et maintenant, notre CSS :

+Et maintenant, notre CSS : -
body,html {
+```css
+body,html {
   margin: 0;
   font-family: sans-serif;
 }
@@ -401,45 +434,36 @@ a:hover {
 a:active {
   background: red;
   color: white;
-}
- -

Cela nous donne le résultat suivant :

+} +``` -

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

+Cela nous donne le résultat suivant : -

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

+{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }} -
    -
  • notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ;
    • -
  • par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ;
    • -
  • la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : -
      -
    • comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ;
      • -
    • ensuite, nous mettons le {{cssxref ("display")}} à inline-block : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de block le ferait, nous voulons néanmoins être en mesure de les dimensionner : inline-block nous permet de le réaliser ;
      • -
    • maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'<ul> et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier <a> dans la liste, et en supprime la marge ; terminé !
      • -
    • les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.
      • -
    -
    • -
+Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes : -
-

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

-
+- notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ; +- par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ; +- la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : -

Résumé

+ - comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ; + - ensuite, nous mettons le {{cssxref ("display")}} à `inline-block` : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de `block` le ferait, nous voulons néanmoins être en mesure de les dimensionner : `inline-block` nous permet de le réaliser ; + - maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'`
    ` et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier `` dans la liste, et en supprime la marge ; terminé ! + - les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir. -

    Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

    +> **Note :** vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/). -

    {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

    +## Résumé -

    Dans ce module

    +Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web. +{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} +## Dans ce module -     +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index e7fb1721ba..d21469eda6 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -12,178 +12,194 @@ tags: - Texte translation_of: Learn/CSS/Styling_text/Styling_lists --- -
    {{LearnSidebar}}
    +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -
    {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
    - -

    Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.

    +Les [listes](/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Listes) se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout. - - - - - - - - - - + + + + + + + + + +
    Prérequis :Connaissances de base informatiques, bases HTML (étudiées dans Introduction à HTML), bases CSS (étudiées dans Introduction à CSS), la mise en forme du texte.
    Objectif :Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.
    Prérequis : + Connaissances de base informatiques, bases HTML (étudiées dans + Introduction à HTML), bases CSS (étudiées dans + Introduction à CSS), + la mise en forme du texte. +
    Objectif : + Se familiariser avec les meilleures pratiques et propriétés liées aux + styles de liste. +
    -

    Un exemple de liste simple

    +## Un exemple de liste simple -

    Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est disponible sur Github (voyez aussi le code source).

    +Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est [disponible sur Github](http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html)). -

    Le code HTML pour nos exemples de liste ressemble à ceci :

    +Le code HTML pour nos exemples de liste ressemble à ceci : -
    <h2>Liste de courses (non ordonnée)</h2>
+```html
+
    Liste de courses (non ordonnée)
    
 
-<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
    Paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.
    
 
-<ul>
-  <li>Houmous</li>
-  <li>Pain blanc</li>
-  <li>Salade verte</li>
-  <li>Fromage halloumi</li>
-</ul>
+
      
+  
    • Houmous
      • 
+  
    • Pain blanc
      • 
+  
    • Salade verte
      • 
+  
    • Fromage halloumi
      • 
+
    
 
-<h2>Liste de recette (ordonnée)</h2>
+
    Liste de recette (ordonnée)
    
 
-<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
    paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.
    
 
-<ol>
-  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
+
      
+  
    1. Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.
      2. 
+  
    2. Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.
      3. 
+  
    3. Laver et hacher la salade.
      4. 
+  
    4. Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.
      5. 
+
    
 
-<h2>Liste descriptive des ingrédients</h2>
+
    Liste descriptive des ingrédients
    
 
-<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
    paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.
    
 
-<dl>
-  <dt>Houmous</dt>
-  <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd>
-  <dt>Pain pitta</dt>
-  <dd>Un pain plat moelleux, légèrement levé.</dd>
-  <dt>Halloumi</dt>
-  <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd>
-  <dt>Salade verte</dt>
-  <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd>
-</dl>
    +
    +
    Houmous
    +
    Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.
    +
    Pain pitta
    +
    Un pain plat moelleux, légèrement levé.
    +
    Halloumi
    +
    Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.
    +
    Salade verte
    +
    Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.
    +
    +``` -

    Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant les outils de développement du navigateur, vous noterez quelques valeurs de style par défaut :

    +Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant [les outils de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools), vous noterez quelques valeurs de style par défaut : -
      -
    • Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de 16 px (1 em) en haut et en bas et une propriété {{cssxref("padding-left")}} de 40 px (2.5 em.)
      • -
    • Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut.
      • -
    • L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de16 px (1 em) en haut et en bas , mais pas de définition du remplissage.
      • -
    • Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de 40 px (2.5 em.)
      • -
    • Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de 16 px (1 em) en haut et en bas, identiques à ceux des différents types de listes.
      • -
    +- Les éléments {{htmlelement("ul")}} et {{htmlelement("ol")}} ont une propriété {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas et une propriété {{cssxref("padding-left")}} de `40 px` (`2.5 em`.) +- Les éléments de la liste ({{htmlelement("li")}}) n'ont aucun paramètre d'espacement par défaut. +- L'élément {{htmlelement("dl")}} a des propriétés {{cssxref("margin")}} de`16 px` (`1 em`) en haut et en bas , mais pas de définition du remplissage. +- Les éléments {{htmlelement("dd")}} ont une propriété {{cssxref("margin-left")}} de `40 px` (`2.5 em`.) +- Les éléments {{htmlelement("p")}}, inclus pour référence, ont des propriétés {{cssxref("margin")}} de `16 px` (`1 em`) en haut et en bas, identiques à ceux des différents types de listes. -

    Gestion d'espacement des listes

    +## Gestion d'espacement des listes -

    Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'exemple de style terminé sur Github et trouver le code source aussi.)

    +Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'[exemple de style terminé](http://mdn.github.io/learning-area/css/styling-text/styling-lists/) sur Github et trouver[ le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html) aussi.) -

    Le CSS utilisé pour le style et l'espacement du texte est le suivant :

    +Le CSS utilisé pour le style et l'espacement du texte est le suivant : -
    /* Style général */
+    /* Style général */
 
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
+    html {
+      font-family: Helvetica, Arial, sans-serif;
+      font-size: 10px;
+    }
 
-h2 {
-  font-size: 2rem;
-}
+    h2 {
+      font-size: 2rem;
+    }
 
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
+    ul,ol,dl,p {
+      font-size: 1.5rem;
+    }
 
-li, p {
-  line-height: 1.5;
-}
+    li, p {
+      line-height: 1.5;
+    }
 
-/* Styles des listes descriptives */
+    /* Styles des listes descriptives */
 
 
-dd, dt {
-  line-height: 1.5;
-}
+    dd, dt {
+      line-height: 1.5;
+    }
 
-dt {
-  font-weight: bold;
-}
+    dt {
+      font-weight: bold;
+    }
 
-dd {
-  margin-bottom: 1.5rem;
-}
    + dd { + margin-bottom: 1.5rem; + } -
      -
    • La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page.
      • -
    • Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent.
      • -
    • La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent.
      • -
    • Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété line-height pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement.
      • -
    +- La première règle définit une police de caractères pour l'ensemble du site avec une taille de base de 10 px. Elles sont héritées par tous les éléments de la page. +- Les règles 2 et 3 définissent des tailles relatives de la police pour les titres, les différents types de liste (les enfants des éléments de liste en héritent) et les paragraphes. Cela signifie que les paragraphes et listes auront la même taille de police et les mêmes espacements entre le haut et le bas, ce qui aidera à garder un rythme vertical cohérent. +- La règle 4 définit la même propriété {{cssxref("line-height")}} pour les paragraphes et éléments de listes — ainsi les paragraphes et chaque élément de liste individuellement auront le même espacement entre les lignes. Cela aidera également à garder un rythme vertical cohérent. +- Les règles 5 et 6 s'appliquent à la liste descriptive — nous définissons la même valeur pour la propriété `line-height` pour les termes à décrire et les descriptions, valeur utilisée pour les paragraphes et les éléments de liste. Encore une fois, la cohérence est bonne ! Nous écrivons aussi les termes à décrire avec une police en gras, pour les distinguer visuellement plus facilement. -

    Style propre à une liste

    +## Style propre à une liste -

    Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :

    +Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} : -
      -
    • {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée.
      • -
    • {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste.
      • -
    • {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond.
      • -
    +- {{cssxref("list-style-type")}} : définit le type de puces à utiliser pour la liste, par exemple des puces carrées ou rondes pour une liste non ordonnée ou bien des nombres, des lettres ou des chiffres romains pour une liste ordonnée. +- {{cssxref("list-style-position")}} : définit si les puces seront disposées à l'intérieur ou à l'extérieur du début de l'élément liste. +- {{cssxref("list-style-image")}} : permet d'utiliser une image personnalisée pour la puce, plutôt qu'un simple carré ou rond. -

    Styles de puces

    +### Styles de puces -

    Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :

    +Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec : -
    ol {
+```css
+ol {
   list-style-type: upper-roman;
-}
    +} +``` -

    Cela donne l'apparence suivante :

    +Cela donne l'apparence suivante : -

    une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.

    +![une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.](ex_1.png) -

    Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.

    +Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}. -

    Position des puces

    +### Position des puces -

    La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est outside et les puces apparaîssent comme ci-dessus.

    +La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est `outside` et les puces apparaîssent comme ci-dessus. -

    Si vous choisissez la valeur inside, les puces seront disposées dans la ligne :

    +Si vous choisissez la valeur `inside`, les puces seront disposées dans la ligne : -
    ol {
+```css
+ol {
   list-style-type: upper-roman;
   list-style-position: inside;
-}
    +} +``` -

    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.](ex_2.png) -

    Utilisation d'une puce image personnalisée

    +### Utilisation d'une puce image personnalisée -

    La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :

    +La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple : -
    ul {
+```css
+ul {
   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](/fr/Apprendre/CSS/styliser_boites). 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 :

    +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 : -
    ul {
+```css
+ul {
   padding-left: 2rem;
   list-style-type: none;
 }
@@ -194,140 +210,143 @@ ul li {
   background-position: 0 0;
   background-size: 1.6rem 1.6rem;
   background-repeat: no-repeat;
-}
    +} +``` -

    Voici ce que nous avons fait :

    +Voici ce que nous avons fait : -
      -
    • abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de 40px par défaut à 20px, puis défini la même valeur pour les éléments de la liste. Ainsi,  l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon.
      • -
    • défini la propriété {{cssxref("list-style-type")}} à none, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces.
      • -
    • inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : -
        -
      • {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce.
        • -
      • {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons 0 0 : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste.
        • -
      • {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de 1.6rem (16px), qui correspond bien au remplissage de 20px dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien.
        • -
      • {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur no-repeat.
        • -
      -
      • -
    +- abaissé la valeur de la propriété {{cssxref ("padding-left")}} de l'élément {{htmlelement ("ul")}} de `40px` par défaut à `20px`, puis défini la même valeur pour les éléments de la liste. Ainsi,  l'ensemble des éléments d'une liste non ordonnée seront toujours alignés avec les éléments d'une liste ordonnée et les descriptions d'une liste descriptive; tout en disposant d'un remplissage où les images d'arrière-plan seront placées. Si nous ne le faisions pas, les images d'arrière-plan et le texte de l'élément de liste se superposeraient, ce qui ferait brouillon. +- défini la propriété {{cssxref("list-style-type")}} à `none`, ainsi aucune puce par défaut n'apparaît. Nous allons utiliser les propriétés de {{cssxref("background")}} pour gérer les puces. +- inséré une puce pour chaque élément de la liste désordonnée. Les propriétés pertinentes sont les suivantes : -

    Ceci nous donne le résultat suivant :

    + - {{cssxref("background-image")}} : référence du chemin d'accès au fichier image utilisé comme puce. + - {{cssxref("background-position")}} : emplacement de l'image dans l'arrière-plan de l'élément sélectionné — dans ce cas, nous disons `0 0` : la puce apparaîtra dans le coin supérieur gauche de chaque élément de la liste. + - {{cssxref("background-size")}} : taille de l'image d'arrière-plan. L'idéal est que les puces soient de même taille que les éléments de la liste (ou légèrement plus petites ou plus grandes). Nous utilisons une taille de `1.6rem` (`16px`), qui correspond bien au remplissage de `20px` dans lequel la puce est placée — 16 px plus 4 px d'espace entre la puce et le texte de l'élément de liste fonctionne bien. + - {{cssxref("background-repeat")}} : par défaut, les images d'arrière-plan se répètent jusqu'à avoir rempli l'espace d'arrière-plan disponible. Nous voulons l'insertion d'une seule copie de l'image sans répétition, donc nous choisissons la valeur `no-repeat`. -

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

    +Ceci nous donne le résultat suivant : -

    Raccourci de style de liste

    +![une liste non ordonnée avec les puces définies comme de petites images d'étoiles.](ex_3.png) -

    Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :

    +### Raccourci de style de liste -
    ul {
+Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :
+
+```css
+ul {
   list-style-type: square;
   list-style-image: url(example.png);
   list-style-position: inside;
-}
    +} +``` -

    peut être remplacé par cela :

    +peut être remplacé par cela : -
    ul {
-  list-style: square url(example.png) inside;
-}
    + ul { + list-style: square url(example.png) inside; + } -

    Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont disc, none et outside. Si un type et une image sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.

    +Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont `disc`, `none` et `outside`. Si un `type` et une `image` sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque. -

    Contrôle du numérotage des listes

    +## Contrôle du numérotage des listes -

    Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.

    +Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre. -

    Numéro de départ

    +### Numéro de départ -

    L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :

    +L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant : -
    <ol start="4">
-  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
    +```html +
      +
    1. Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.
      2. +
    2. Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.
      3. +
    3. Laver et hacher la salade.
      4. +
    4. Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.
      5. +
    +``` -

    vous donne cette sortie :

    +vous donne cette sortie : -

    {{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}

    +{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }} -

    Numérotation inversée

    +### Numérotation inversée -

    L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :

    +L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant : -
    <ol start="4" reversed>
-  <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
    +```html +
      +
    1. Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.
      2. +
    2. Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.
      3. +
    3. Laver et hacher la salade.
      4. +
    4. Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.
      5. +
    +``` -

    donne cette sortie :

    +donne cette sortie : -

    {{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}

    +{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }} -

    Valeurs individualisées

    +### 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>
-  <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li value="6">Laver et hacher la salade.</li>
-  <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
    +```html +
      +
    1. Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.
      2. +
    2. Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.
      3. +
    3. Laver et hacher la salade.
      4. +
    4. Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.
      5. +
    +``` -

    vous donne cette sortie :

    +vous donne cette sortie : -

    {{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}

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

    +## Apprentissage actif : définir le style d'une liste imbriquée -

    Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :

    +Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de : -
      -
    1. mettre une puce carrée devant les éléments de la liste non ordonnée,
      2. -
    2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.
      3. -
    3. donner à la liste ordonnée une puce alphabétique en minuscules.
      4. -
    4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.
      5. -
    +1. mettre une puce carrée devant les éléments de la liste non ordonnée, +2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères. +3. donner à la liste ordonnée une puce alphabétique en minuscules. +4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver. -

    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.

    +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("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}

    +{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }} -

    Voir aussi

    +## Voir aussi -

    Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :

    +Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir : -
      -
    • {{cssxref("@counter-style")}}
      • -
    • {{cssxref("counter-increment")}}
      • -
    • {{cssxref("counter-reset")}}
      • -
    +- {{cssxref("@counter-style")}} +- {{cssxref("counter-increment")}} +- {{cssxref("counter-reset")}} -

    Résumé

    +## Résumé -

    Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.

    +Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens. -

    {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

    +{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}} -

    Dans ce module

    +## Dans ce module -

     

    - + +- [Initiation à la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte) +- [Style de listes](/fr/docs/Learn/CSS/Styling_text/Styling_lists) +- [Mise en forme des liens](/fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens) +- [Polices de caractères web](/fr/docs/Learn/CSS/Styling_text/Web_fonts) +- [Composition d'une page d'accueil d'une école communale](/fr/docs/Learn/CSS/Styling_text/Typesetting_a_homepage) diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md index d237b8f377..fa70e80c22 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -13,114 +13,100 @@ tags: - Listes translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage --- -
    {{LearnSidebar}}
    +{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -
    {{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. - - - - - - - - - - + + + + + + + + + +
    Prérequis :Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé tous les articles de ce module.
    Objectif :Tester la compréhension de la composition de textes à l'écran avec les techniques des CSS.
    Prérequis : + Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé + tous les articles de ce module. +
    Objectif : + Tester la compréhension de la composition de textes à l'écran avec les + techniques des CSS. +
    -

    Point de départ

    +## Point de départ + +Pour débuter cette évaluation, vous devez : + +- récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png). +- en faire une copie sur votre ordinateur. -

    Pour débuter cette évaluation, vous devez :

    +> **Note :** Autrement, il reste possible d'utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez [cet URL](http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png) 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 `